diff --git a/.prettierrc.json b/.prettierrc.json
index 4845cc5..4478f0f 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +1,12 @@
 {
-    "semi": true,
-    "tabWidth": 2,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "es5"
-}
\ No newline at end of file
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..532d40e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,34 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+    // "source.organizeImports": "explicit"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  // "typescript.preferences.importModuleSpecifier": "relative",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "files.associations": {
+    "*.module.scss": "scss"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.workingDirectories": ["."],
+  "eslint.format.enable": true,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index 984ab01..04bdb57 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '3.8'
+version: "3.8"
 
 services:
   app:
@@ -10,4 +10,4 @@ services:
       - /app/node_modules
     environment:
       - NODE_ENV=development
-    command: npm run dev 
\ No newline at end of file
+    command: npm run dev
diff --git a/eslint.config.mjs b/eslint.config.mjs
index fc1b024..c439e77 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,9 +1,11 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
 import eslintPluginImport from "eslint-plugin-import";
-import eslintPluginUnused from "eslint-plugin-unused-imports";
+import eslintPluginReact from "eslint-plugin-react";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
 import eslintPluginSort from "eslint-plugin-simple-import-sort";
+import eslintPluginUnused from "eslint-plugin-unused-imports";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -20,12 +22,14 @@ const eslintConfig = [
       import: eslintPluginImport,
       "unused-imports": eslintPluginUnused,
       "simple-import-sort": eslintPluginSort,
+      react: eslintPluginReact,
+      "react-hooks": eslintPluginReactHooks,
     },
 
     rules: {
       /* неиспользуемые переменные и импорты */
       "@typescript-eslint/no-unused-vars": [
-        "error",
+        "warn",
         { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
       ],
       "unused-imports/no-unused-imports": "error",
@@ -44,15 +48,61 @@ const eslintConfig = [
         "error",
         {
           groups: [
-            ["^\\u0000"],                 // side-effects
-            ["^react", "^next", "^@?\\w"],// пакеты
-            ["^@/"],                     // алиасы проекта
+            ["^\\u0000"], // side-effects
+            ["^react", "^next", "^@?\\w"], // пакеты
+            ["^@/"], // алиасы проекта
             ["^\\.\\.(?!/?$)", "^\\./(?=.*/)", "^\\./?$"], // относительные
-            ["^.+\\.module\\.(css|scss)$"],                // модули стилей
+            ["^.+\\.module\\.(css|scss)$"], // модули стилей
           ],
         },
       ],
       "simple-import-sort/exports": "error",
+
+      /* React правила */
+      "react/jsx-uses-react": "off", // не нужно в React 17+
+      "react/react-in-jsx-scope": "off", // не нужно в React 17+
+      "react/prop-types": "off", // используем TypeScript
+      "react/display-name": "warn",
+      "react/jsx-key": "error",
+      "react/jsx-no-duplicate-props": "error",
+      "react/jsx-no-undef": "error",
+      // "react/no-array-index-key": "warn",
+      "react/no-danger": "warn",
+      "react/no-deprecated": "error",
+      "react/no-direct-mutation-state": "error",
+      "react/no-find-dom-node": "error",
+      "react/no-is-mounted": "error",
+      "react/no-render-return-value": "error",
+      "react/no-string-refs": "error",
+      "react/no-unescaped-entities": "warn",
+      "react/no-unknown-property": "error",
+      "react/no-unsafe": "warn",
+      "react/self-closing-comp": "error",
+
+      /* React Hooks правила */
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+
+      /* TypeScript правила */
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-non-null-assertion": "warn",
+      "@typescript-eslint/no-var-requires": "error",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-empty-function": "warn",
+      "@typescript-eslint/no-inferrable-types": "error",
+
+      /* Общие правила */
+      "no-console": "warn",
+      "no-debugger": "error",
+      "no-alert": "warn",
+      "no-var": "error",
+      "prefer-const": "error",
+      "no-unused-expressions": "error",
+      "no-duplicate-imports": "error",
+      "no-multiple-empty-lines": ["error", { max: 2 }],
+      "eol-last": "error",
+      "no-trailing-spaces": "error",
     },
   },
 ];
diff --git a/messages/de.json b/messages/de.json
index 88020af..8cd816f 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -1,176 +1,176 @@
 {
-    "HomePage": {
-        "title": "Hello world!",
-        "about": "Go to the about page"
+  "HomePage": {
+    "title": "Hello world!",
+    "about": "Go to the about page"
+  },
+  "Profile": {
+    "profile_information": {
+      "title": "Profile Information",
+      "description": "To update your email address please contact support.",
+      "email_placeholder": "Email",
+      "name_placeholder": "Name"
     },
-    "Profile": {
-        "profile_information": {
-            "title": "Profile Information",
-            "description": "To update your email address please contact support.",
-            "email_placeholder": "Email",
-            "name_placeholder": "Name"
-        },
-        "billing": {
-            "title": "Billing",
-            "description": "To access your subscription information, please log into your billing account.",
-            "subscription_type": "Subscription Type:",
-            "billing_button": "Billing",
-            "credits": {
-                "title": "You have {credits} credits left",
-                "description": "You can use them to chat with any Expert on the platform."
-            },
-            "any_questions": "Any questions? <link>{linkText}</link>",
-            "any_questions_link": "Contact us",
-            "subscription_update": "<bold>{subscriptionUpdateBold}</bold><br></br>If you've just purchased or changed plan, your subscription status will change in a few hours.",
-            "subscription_update_bold": "Subscription information is updated every few hours."
-        },
-        "log_out": {
-            "title": "Log out",
-            "log_out_button": "Log out",
-            "modal": {
-                "title": "Are you sure you want to log out?",
-                "description": "Are you sure you want to log out?",
-                "stay_button": "Stay",
-                "log_out_button": "Log out"
-            }
-        }
+    "billing": {
+      "title": "Billing",
+      "description": "To access your subscription information, please log into your billing account.",
+      "subscription_type": "Subscription Type:",
+      "billing_button": "Billing",
+      "credits": {
+        "title": "You have {credits} credits left",
+        "description": "You can use them to chat with any Expert on the platform."
+      },
+      "any_questions": "Any questions? <link>{linkText}</link>",
+      "any_questions_link": "Contact us",
+      "subscription_update": "<bold>{subscriptionUpdateBold}</bold><br></br>If you've just purchased or changed plan, your subscription status will change in a few hours.",
+      "subscription_update_bold": "Subscription information is updated every few hours."
     },
-    "Subscriptions": {
-        "title": "Manage my subscriptions",
-        "modal": {
-            "title": "Are you sure you want to cancel your subscription?",
-            "description": "Are you sure you want to cancel your subscription?",
-            "cancel_button": "Cancel subscription",
-            "stay_button": "Stay"
-        },
-        "table": {
-            "subscription_type": "Subscription Type",
-            "subscription_type_value": {
-                "DAY": "Daily Subscription",
-                "WEEK": "Weekly Subscription",
-                "MONTH": "Monthly Subscription",
-                "YEAR": "Yearly Subscription"
-            },
-            "subscription_status": "Subscription Status",
-            "subscription_status_value": {
-                "ACTIVE": "Active",
-                "CANCELLED": "Cancels on <date>"
-            },
-            "billing_period": "Billing Period",
-            "billing_period_value": {
-                "DAY": "Day",
-                "WEEK": "Week",
-                "MONTH": "Month",
-                "YEAR": "Year"
-            },
-            "last_payment_on": "Last Payment On",
-            "renewal_date": "Renewal Date",
-            "renewal_amount": "Renewal Amount",
-            "cancel_subscription": "Cancel Subscription"
-        },
-        "no_subscriptions": "You don't have any subscriptions",
-        "error": "Something went wrong. Please try again later.",
-        "try_again": "Try again"
-    },
-    "CancelSubscription": {
-        "title": "Жаль, что вы уходите…",
-        "description": "Многие уходят именно в тот момент, когда астролог начинает видеть поворотную точку в их истории.<br></br><br></br>Позвольте задать пару вопросов, чтобы сделать наш сервис лучше - и, возможно, предложить решение, которое больше подходит именно вам.",
-        "stay_button": "Остаться и уменьшить мой план на 50%",
-        "cancel_button": "Отменить"
-    },
-    "Stay50Done": {
-        "title": "Мы ценим твой выбор!",
-        "descriptions": {
-            "1": "План успешно изменен"
-        },
-        "button": "Готово"
-    },
-    "AppreciateChoice": {
-        "title": "Мы ценим твой выбор!",
-        "descriptions": {
-            "1": "Подбираем оптимальное решение...",
-            "2": "Составляем персонализированный опрос...",
-            "3": "Формируем выгодное предложение..."
-        },
-        "button": "Next"
-    },
-    "WhatReason": {
-        "title": "Что стало причиной?",
-        "answers": {
-            "no_promised_result": "Не получил(а) обещанного результата",
-            "too_expensive": "Слишком дорого",
-            "high_auto_payment": "Стоимость автоматической оплаты слишком высока",
-            "unexpected_fee": "Я не ожидал дополнительной платы",
-            "want_pause": "Хочу сделать паузу",
-            "service_not_as_expected": "Сервис оказался не таким, как ожидал(а)",
-            "found_alternative": "Нашёл(а) альтернативу",
-            "dislike_app": "Мне не понравилось приложение",
-            "hard_to_navigate": "В приложении сложно ориентироваться",
-            "other": "Другое"
-        }
-    },
-    "Payment": {
-        "Success": {
-            "title": "Payment successful",
-            "button": "Done"
-        },
-        "Error": {
-            "title": "Payment failed",
-            "button": "Try again"
-        }
-    },
-    "SecondChance": {
-        "title": "Дайте нам второй шанс и получи самый лучший план БЕСПЛАТНО",
-        "offers": {
-            "1": {
-                "title": "Бесплатный план на<br></br>1 месяц",
-                "description": "Используй весь потенциал AURA и даже больше.",
-                "old-price": "1900",
-                "new-price": "0"
-            },
-            "2": {
-                "title": "Бесплатный премиальный план",
-                "description": "Бесплатная 30 мин консультация с премиальным Эдвайзером",
-                "old-price": "4900",
-                "new-price": "0"
-            }
-        },
-        "get_offer": "Получить бесплатный план",
-        "cancel": "Отменить"
-    },
-    "ChangeMind": {
-        "title": "Что может изменить твое мнение?",
-        "answers": {
-            "more_chat_time": "Больше времени в чатах",
-            "more_personal_reports": "Больше персонализированных отчетов",
-            "individual_plan": "Индивидуальный план",
-            "other": "Другое"
-        }
-    },
-    "StopFor30Days": {
-        "title": "Остановите подписку на тридцать дней. Никаких списаний.",
-        "stop": "Остановить",
-        "cancel": "Отменить"
-    },
-    "CancellationOfSubscription": {
-        "title": "Подписка аннулируется!",
-        "description": "Чтобы отменить подписку, нажмите “Подтвердить мои действия”",
-        "offer": {
-            "title": "Бесплатный 2-месячный план",
-            "old-price": "9900",
-            "new-price": "0"
-        },
-        "offer_button": "Применить",
-        "cancel_button": "Я подтверждаю свои действия"
-    },
-    "PlanCancelled": {
-        "title": "Стандартный план Отменен!",
-        "icon": "🥳",
-        "description": "Выполнен переход на бесплатный тридцатидневный план ",
-        "button": "Готово"
-    },
-    "SubscriptionStopped": {
-        "title": "Подписка остановлена успешно!",
-        "icon": "🎉"
+    "log_out": {
+      "title": "Log out",
+      "log_out_button": "Log out",
+      "modal": {
+        "title": "Are you sure you want to log out?",
+        "description": "Are you sure you want to log out?",
+        "stay_button": "Stay",
+        "log_out_button": "Log out"
+      }
     }
-}
\ No newline at end of file
+  },
+  "Subscriptions": {
+    "title": "Manage my subscriptions",
+    "modal": {
+      "title": "Are you sure you want to cancel your subscription?",
+      "description": "Are you sure you want to cancel your subscription?",
+      "cancel_button": "Cancel subscription",
+      "stay_button": "Stay"
+    },
+    "table": {
+      "subscription_type": "Subscription Type",
+      "subscription_type_value": {
+        "DAY": "Daily Subscription",
+        "WEEK": "Weekly Subscription",
+        "MONTH": "Monthly Subscription",
+        "YEAR": "Yearly Subscription"
+      },
+      "subscription_status": "Subscription Status",
+      "subscription_status_value": {
+        "ACTIVE": "Active",
+        "CANCELLED": "Cancels on <date>"
+      },
+      "billing_period": "Billing Period",
+      "billing_period_value": {
+        "DAY": "Day",
+        "WEEK": "Week",
+        "MONTH": "Month",
+        "YEAR": "Year"
+      },
+      "last_payment_on": "Last Payment On",
+      "renewal_date": "Renewal Date",
+      "renewal_amount": "Renewal Amount",
+      "cancel_subscription": "Cancel Subscription"
+    },
+    "no_subscriptions": "You don't have any subscriptions",
+    "error": "Something went wrong. Please try again later.",
+    "try_again": "Try again"
+  },
+  "CancelSubscription": {
+    "title": "Жаль, что вы уходите…",
+    "description": "Многие уходят именно в тот момент, когда астролог начинает видеть поворотную точку в их истории.<br></br><br></br>Позвольте задать пару вопросов, чтобы сделать наш сервис лучше - и, возможно, предложить решение, которое больше подходит именно вам.",
+    "stay_button": "Остаться и уменьшить мой план на 50%",
+    "cancel_button": "Отменить"
+  },
+  "Stay50Done": {
+    "title": "Мы ценим твой выбор!",
+    "descriptions": {
+      "1": "План успешно изменен"
+    },
+    "button": "Готово"
+  },
+  "AppreciateChoice": {
+    "title": "Мы ценим твой выбор!",
+    "descriptions": {
+      "1": "Подбираем оптимальное решение...",
+      "2": "Составляем персонализированный опрос...",
+      "3": "Формируем выгодное предложение..."
+    },
+    "button": "Next"
+  },
+  "WhatReason": {
+    "title": "Что стало причиной?",
+    "answers": {
+      "no_promised_result": "Не получил(а) обещанного результата",
+      "too_expensive": "Слишком дорого",
+      "high_auto_payment": "Стоимость автоматической оплаты слишком высока",
+      "unexpected_fee": "Я не ожидал дополнительной платы",
+      "want_pause": "Хочу сделать паузу",
+      "service_not_as_expected": "Сервис оказался не таким, как ожидал(а)",
+      "found_alternative": "Нашёл(а) альтернативу",
+      "dislike_app": "Мне не понравилось приложение",
+      "hard_to_navigate": "В приложении сложно ориентироваться",
+      "other": "Другое"
+    }
+  },
+  "Payment": {
+    "Success": {
+      "title": "Payment successful",
+      "button": "Done"
+    },
+    "Error": {
+      "title": "Payment failed",
+      "button": "Try again"
+    }
+  },
+  "SecondChance": {
+    "title": "Дайте нам второй шанс и получи самый лучший план БЕСПЛАТНО",
+    "offers": {
+      "1": {
+        "title": "Бесплатный план на<br></br>1 месяц",
+        "description": "Используй весь потенциал AURA и даже больше.",
+        "old-price": "1900",
+        "new-price": "0"
+      },
+      "2": {
+        "title": "Бесплатный премиальный план",
+        "description": "Бесплатная 30 мин консультация с премиальным Эдвайзером",
+        "old-price": "4900",
+        "new-price": "0"
+      }
+    },
+    "get_offer": "Получить бесплатный план",
+    "cancel": "Отменить"
+  },
+  "ChangeMind": {
+    "title": "Что может изменить твое мнение?",
+    "answers": {
+      "more_chat_time": "Больше времени в чатах",
+      "more_personal_reports": "Больше персонализированных отчетов",
+      "individual_plan": "Индивидуальный план",
+      "other": "Другое"
+    }
+  },
+  "StopFor30Days": {
+    "title": "Остановите подписку на тридцать дней. Никаких списаний.",
+    "stop": "Остановить",
+    "cancel": "Отменить"
+  },
+  "CancellationOfSubscription": {
+    "title": "Подписка аннулируется!",
+    "description": "Чтобы отменить подписку, нажмите “Подтвердить мои действия”",
+    "offer": {
+      "title": "Бесплатный 2-месячный план",
+      "old-price": "9900",
+      "new-price": "0"
+    },
+    "offer_button": "Применить",
+    "cancel_button": "Я подтверждаю свои действия"
+  },
+  "PlanCancelled": {
+    "title": "Стандартный план Отменен!",
+    "icon": "🥳",
+    "description": "Выполнен переход на бесплатный тридцатидневный план ",
+    "button": "Готово"
+  },
+  "SubscriptionStopped": {
+    "title": "Подписка остановлена успешно!",
+    "icon": "🎉"
+  }
+}
diff --git a/messages/en.json b/messages/en.json
index 88020af..e8b7d79 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1,176 +1,201 @@
 {
-    "HomePage": {
-        "title": "Hello world!",
-        "about": "Go to the about page"
+  "HomePage": {
+    "title": "Hello world!",
+    "about": "Go to the about page"
+  },
+  "Profile": {
+    "profile_information": {
+      "title": "Profile Information",
+      "description": "To update your email address please contact support.",
+      "email_placeholder": "Email",
+      "name_placeholder": "Name"
     },
-    "Profile": {
-        "profile_information": {
-            "title": "Profile Information",
-            "description": "To update your email address please contact support.",
-            "email_placeholder": "Email",
-            "name_placeholder": "Name"
-        },
-        "billing": {
-            "title": "Billing",
-            "description": "To access your subscription information, please log into your billing account.",
-            "subscription_type": "Subscription Type:",
-            "billing_button": "Billing",
-            "credits": {
-                "title": "You have {credits} credits left",
-                "description": "You can use them to chat with any Expert on the platform."
-            },
-            "any_questions": "Any questions? <link>{linkText}</link>",
-            "any_questions_link": "Contact us",
-            "subscription_update": "<bold>{subscriptionUpdateBold}</bold><br></br>If you've just purchased or changed plan, your subscription status will change in a few hours.",
-            "subscription_update_bold": "Subscription information is updated every few hours."
-        },
-        "log_out": {
-            "title": "Log out",
-            "log_out_button": "Log out",
-            "modal": {
-                "title": "Are you sure you want to log out?",
-                "description": "Are you sure you want to log out?",
-                "stay_button": "Stay",
-                "log_out_button": "Log out"
-            }
-        }
+    "billing": {
+      "title": "Billing",
+      "description": "To access your subscription information, please log into your billing account.",
+      "subscription_type": "Subscription Type:",
+      "billing_button": "Billing",
+      "credits": {
+        "title": "You have {credits} credits left",
+        "description": "You can use them to chat with any Expert on the platform."
+      },
+      "any_questions": "Any questions? <link>{linkText}</link>",
+      "any_questions_link": "Contact us",
+      "subscription_update": "<bold>{subscriptionUpdateBold}</bold><br></br>If you've just purchased or changed plan, your subscription status will change in a few hours.",
+      "subscription_update_bold": "Subscription information is updated every few hours."
     },
-    "Subscriptions": {
-        "title": "Manage my subscriptions",
-        "modal": {
-            "title": "Are you sure you want to cancel your subscription?",
-            "description": "Are you sure you want to cancel your subscription?",
-            "cancel_button": "Cancel subscription",
-            "stay_button": "Stay"
-        },
-        "table": {
-            "subscription_type": "Subscription Type",
-            "subscription_type_value": {
-                "DAY": "Daily Subscription",
-                "WEEK": "Weekly Subscription",
-                "MONTH": "Monthly Subscription",
-                "YEAR": "Yearly Subscription"
-            },
-            "subscription_status": "Subscription Status",
-            "subscription_status_value": {
-                "ACTIVE": "Active",
-                "CANCELLED": "Cancels on <date>"
-            },
-            "billing_period": "Billing Period",
-            "billing_period_value": {
-                "DAY": "Day",
-                "WEEK": "Week",
-                "MONTH": "Month",
-                "YEAR": "Year"
-            },
-            "last_payment_on": "Last Payment On",
-            "renewal_date": "Renewal Date",
-            "renewal_amount": "Renewal Amount",
-            "cancel_subscription": "Cancel Subscription"
-        },
-        "no_subscriptions": "You don't have any subscriptions",
-        "error": "Something went wrong. Please try again later.",
-        "try_again": "Try again"
-    },
-    "CancelSubscription": {
-        "title": "Жаль, что вы уходите…",
-        "description": "Многие уходят именно в тот момент, когда астролог начинает видеть поворотную точку в их истории.<br></br><br></br>Позвольте задать пару вопросов, чтобы сделать наш сервис лучше - и, возможно, предложить решение, которое больше подходит именно вам.",
-        "stay_button": "Остаться и уменьшить мой план на 50%",
-        "cancel_button": "Отменить"
-    },
-    "Stay50Done": {
-        "title": "Мы ценим твой выбор!",
-        "descriptions": {
-            "1": "План успешно изменен"
-        },
-        "button": "Готово"
-    },
-    "AppreciateChoice": {
-        "title": "Мы ценим твой выбор!",
-        "descriptions": {
-            "1": "Подбираем оптимальное решение...",
-            "2": "Составляем персонализированный опрос...",
-            "3": "Формируем выгодное предложение..."
-        },
-        "button": "Next"
-    },
-    "WhatReason": {
-        "title": "Что стало причиной?",
-        "answers": {
-            "no_promised_result": "Не получил(а) обещанного результата",
-            "too_expensive": "Слишком дорого",
-            "high_auto_payment": "Стоимость автоматической оплаты слишком высока",
-            "unexpected_fee": "Я не ожидал дополнительной платы",
-            "want_pause": "Хочу сделать паузу",
-            "service_not_as_expected": "Сервис оказался не таким, как ожидал(а)",
-            "found_alternative": "Нашёл(а) альтернативу",
-            "dislike_app": "Мне не понравилось приложение",
-            "hard_to_navigate": "В приложении сложно ориентироваться",
-            "other": "Другое"
-        }
-    },
-    "Payment": {
-        "Success": {
-            "title": "Payment successful",
-            "button": "Done"
-        },
-        "Error": {
-            "title": "Payment failed",
-            "button": "Try again"
-        }
-    },
-    "SecondChance": {
-        "title": "Дайте нам второй шанс и получи самый лучший план БЕСПЛАТНО",
-        "offers": {
-            "1": {
-                "title": "Бесплатный план на<br></br>1 месяц",
-                "description": "Используй весь потенциал AURA и даже больше.",
-                "old-price": "1900",
-                "new-price": "0"
-            },
-            "2": {
-                "title": "Бесплатный премиальный план",
-                "description": "Бесплатная 30 мин консультация с премиальным Эдвайзером",
-                "old-price": "4900",
-                "new-price": "0"
-            }
-        },
-        "get_offer": "Получить бесплатный план",
-        "cancel": "Отменить"
-    },
-    "ChangeMind": {
-        "title": "Что может изменить твое мнение?",
-        "answers": {
-            "more_chat_time": "Больше времени в чатах",
-            "more_personal_reports": "Больше персонализированных отчетов",
-            "individual_plan": "Индивидуальный план",
-            "other": "Другое"
-        }
-    },
-    "StopFor30Days": {
-        "title": "Остановите подписку на тридцать дней. Никаких списаний.",
-        "stop": "Остановить",
-        "cancel": "Отменить"
-    },
-    "CancellationOfSubscription": {
-        "title": "Подписка аннулируется!",
-        "description": "Чтобы отменить подписку, нажмите “Подтвердить мои действия”",
-        "offer": {
-            "title": "Бесплатный 2-месячный план",
-            "old-price": "9900",
-            "new-price": "0"
-        },
-        "offer_button": "Применить",
-        "cancel_button": "Я подтверждаю свои действия"
-    },
-    "PlanCancelled": {
-        "title": "Стандартный план Отменен!",
-        "icon": "🥳",
-        "description": "Выполнен переход на бесплатный тридцатидневный план ",
-        "button": "Готово"
-    },
-    "SubscriptionStopped": {
-        "title": "Подписка остановлена успешно!",
-        "icon": "🎉"
+    "log_out": {
+      "title": "Log out",
+      "log_out_button": "Log out",
+      "modal": {
+        "title": "Are you sure you want to log out?",
+        "description": "Are you sure you want to log out?",
+        "stay_button": "Stay",
+        "log_out_button": "Log out"
+      }
     }
-}
\ No newline at end of file
+  },
+  "Subscriptions": {
+    "title": "Manage my subscriptions",
+    "modal": {
+      "title": "Are you sure you want to cancel your subscription?",
+      "description": "Are you sure you want to cancel your subscription?",
+      "cancel_button": "Cancel subscription",
+      "stay_button": "Stay"
+    },
+    "table": {
+      "subscription_type": "Subscription Type",
+      "subscription_type_value": {
+        "DAY": "Daily Subscription",
+        "WEEK": "Weekly Subscription",
+        "MONTH": "Monthly Subscription",
+        "YEAR": "Yearly Subscription"
+      },
+      "subscription_status": "Subscription Status",
+      "subscription_status_value": {
+        "ACTIVE": "Active",
+        "CANCELLED": "Cancels on <date>",
+        "PAST_DUE": "Past due"
+      },
+      "billing_period": "Billing Period",
+      "billing_period_value": {
+        "DAY": "Day",
+        "WEEK": "Week",
+        "MONTH": "Month",
+        "YEAR": "Year"
+      },
+      "last_payment_on": "Last Payment On",
+      "renewal_date": "Renewal Date",
+      "renewal_amount": "Renewal Amount",
+      "cancel_subscription": "Cancel Subscription"
+    },
+    "no_subscriptions": "You don't have any subscriptions",
+    "error": "Something went wrong. Please try again later.",
+    "try_again": "Try again"
+  },
+  "CancelSubscription": {
+    "title": "Жаль, что вы уходите…",
+    "description": "Многие уходят именно в тот момент, когда астролог начинает видеть поворотную точку в их истории.<br></br><br></br>Позвольте задать пару вопросов, чтобы сделать наш сервис лучше - и, возможно, предложить решение, которое больше подходит именно вам.",
+    "stay_button": "Остаться и уменьшить мой план на 50%",
+    "cancel_button": "Отменить"
+  },
+  "Stay50Done": {
+    "title": "Мы ценим твой выбор!",
+    "descriptions": {
+      "1": "План успешно изменен"
+    },
+    "button": "Готово"
+  },
+  "AppreciateChoice": {
+    "title": "Мы ценим твой выбор!",
+    "descriptions": {
+      "1": "Подбираем оптимальное решение...",
+      "2": "Составляем персонализированный опрос...",
+      "3": "Формируем выгодное предложение..."
+    },
+    "button": "Next"
+  },
+  "WhatReason": {
+    "title": "Что стало причиной?",
+    "answers": {
+      "no_promised_result": "Не получил(а) обещанного результата",
+      "too_expensive": "Слишком дорого",
+      "high_auto_payment": "Стоимость автоматической оплаты слишком высока",
+      "unexpected_fee": "Я не ожидал дополнительной платы",
+      "want_pause": "Хочу сделать паузу",
+      "service_not_as_expected": "Сервис оказался не таким, как ожидал(а)",
+      "found_alternative": "Нашёл(а) альтернативу",
+      "dislike_app": "Мне не понравилось приложение",
+      "hard_to_navigate": "В приложении сложно ориентироваться",
+      "other": "Другое"
+    }
+  },
+  "Payment": {
+    "Success": {
+      "title": "Payment successful",
+      "button": "Done"
+    },
+    "Error": {
+      "title": "Payment failed",
+      "button": "Try again"
+    }
+  },
+  "SecondChance": {
+    "title": "Дайте нам второй шанс и получи самый лучший план БЕСПЛАТНО",
+    "offers": {
+      "1": {
+        "title": "Бесплатный план на<br></br>1 месяц",
+        "description": "Используй весь потенциал AURA и даже больше.",
+        "old-price": "1900",
+        "new-price": "0"
+      },
+      "2": {
+        "title": "Бесплатный премиальный план",
+        "description": "Бесплатная 30 мин консультация с премиальным Эдвайзером",
+        "old-price": "4900",
+        "new-price": "0"
+      }
+    },
+    "get_offer": "Получить бесплатный план",
+    "cancel": "Отменить"
+  },
+  "ChangeMind": {
+    "title": "Что может изменить твое мнение?",
+    "answers": {
+      "more_chat_time": "Больше времени в чатах",
+      "more_personal_reports": "Больше персонализированных отчетов",
+      "individual_plan": "Индивидуальный план",
+      "other": "Другое"
+    }
+  },
+  "StopFor30Days": {
+    "title": "Остановите подписку на тридцать дней. Никаких списаний.",
+    "stop": "Остановить",
+    "cancel": "Отменить"
+  },
+  "CancellationOfSubscription": {
+    "title": "Подписка аннулируется!",
+    "description": "Чтобы отменить подписку, нажмите “Подтвердить мои действия”",
+    "offer": {
+      "title": "Бесплатный 2-месячный план",
+      "old-price": "9900",
+      "new-price": "0"
+    },
+    "offer_button": "Применить",
+    "cancel_button": "Я подтверждаю свои действия"
+  },
+  "PlanCancelled": {
+    "title": "Стандартный план Отменен!",
+    "icon": "🥳",
+    "description": "Выполнен переход на бесплатный тридцатидневный план ",
+    "button": "Готово"
+  },
+  "SubscriptionStopped": {
+    "title": "Подписка остановлена успешно!",
+    "icon": "🎉"
+  },
+  "DatePicker": {
+    "year": "YYYY",
+    "month": "MM",
+    "day": "DD"
+  },
+  "TimePicker": {
+    "hour": "HH",
+    "minute": "MM",
+    "period": "AM/PM"
+  },
+  "Compatibility": {
+    "title": "Your Personality Type",
+    "description": "Please input your data to create the report.",
+    "button": "Continue",
+    "error": "Something went wrong. Please try again later."
+  },
+  "CompatibilityResult": {
+    "title": "Your Personality Type",
+    "error": "Something went wrong. Please try again later."
+  },
+  "PalmistryResult": {
+    "title": "Your Personality Type",
+    "error": "Something went wrong. Please try again later."
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d9764a8..d679a69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "react-dom": "^19.0.0",
         "sass": "^1.89.2",
         "server-only": "^0.0.1",
-        "zod": "^3.25.64"
+        "zod": "^3.25.64",
+        "zustand": "^5.0.5"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -28,6 +29,8 @@
         "eslint": "^9",
         "eslint-config-next": "15.3.3",
         "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-unused-imports": "^4.1.4",
         "prettier": "^3.5.3",
@@ -1343,7 +1346,7 @@
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2441,7 +2444,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -6006,6 +6009,35 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
+      "integrity": "sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 89736de..6ace31c 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,10 @@
     "build": "next build",
     "start": "next start -p 3001",
     "lint": "next lint",
-    "lint:fix": "next lint --fix"
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@lottiefiles/dotlottie-react": "^0.14.1",
@@ -20,7 +23,8 @@
     "react-dom": "^19.0.0",
     "sass": "^1.89.2",
     "server-only": "^0.0.1",
-    "zod": "^3.25.64"
+    "zod": "^3.25.64",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -30,9 +34,11 @@
     "eslint": "^9",
     "eslint-config-next": "15.3.3",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.1.4",
     "prettier": "^3.5.3",
     "typescript": "^5"
   }
-}
\ No newline at end of file
+}
diff --git a/public/metrics-scripts/ym-script.js b/public/metrics-scripts/ym-script.js
index 1751cbc..19dc3c5 100644
--- a/public/metrics-scripts/ym-script.js
+++ b/public/metrics-scripts/ym-script.js
@@ -1,24 +1,24 @@
 (function (m, e, t, r, i, k, a) {
-    m[i] =
-        m[i] ||
-        function () {
-            (m[i].a = m[i].a || []).push(arguments);
-        };
-    m[i].l = 1 * new Date();
-    for (var j = 0; j < document.scripts.length; j++) {
-        if (document.scripts[j].src === r) {
-            return;
-        }
+  m[i] =
+    m[i] ||
+    function () {
+      (m[i].a = m[i].a || []).push(arguments);
+    };
+  m[i].l = 1 * new Date();
+  for (var j = 0; j < document.scripts.length; j++) {
+    if (document.scripts[j].src === r) {
+      return;
     }
-    (k = e.createElement(t)),
-        (a = e.getElementsByTagName(t)[0]),
-        (k.async = 1),
-        (k.src = r),
-        a.parentNode.insertBefore(k, a);
+  }
+  (k = e.createElement(t)),
+    (a = e.getElementsByTagName(t)[0]),
+    (k.async = 1),
+    (k.src = r),
+    a.parentNode.insertBefore(k, a);
 })(
-    window,
-    document,
-    "script",
-    "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",
-    "ym"
-);
\ No newline at end of file
+  window,
+  document,
+  "script",
+  "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",
+  "ym"
+);
diff --git a/src/app/[locale]/(core)/compatibility/[id]/error.module.scss b/src/app/[locale]/(core)/compatibility/[id]/error.module.scss
new file mode 100644
index 0000000..0981741
--- /dev/null
+++ b/src/app/[locale]/(core)/compatibility/[id]/error.module.scss
@@ -0,0 +1,6 @@
+.coreError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/src/app/[locale]/(core)/compatibility/[id]/error.tsx b/src/app/[locale]/(core)/compatibility/[id]/error.tsx
new file mode 100644
index 0000000..6d72fb9
--- /dev/null
+++ b/src/app/[locale]/(core)/compatibility/[id]/error.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { Button, Typography } from "@/components/ui";
+
+import styles from "./error.module.scss";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className={styles.coreError}>
+      <Typography as="h2" size="xl" weight="bold">
+        Something went wrong!
+      </Typography>
+      <Typography as="p" align="center">
+        {error.message}
+      </Typography>
+      <Button onClick={() => reset()}>
+        <Typography color="white">Try again</Typography>
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/compatibility/[id]/page.module.scss b/src/app/[locale]/(core)/compatibility/[id]/page.module.scss
new file mode 100644
index 0000000..7007f0a
--- /dev/null
+++ b/src/app/[locale]/(core)/compatibility/[id]/page.module.scss
@@ -0,0 +1,11 @@
+.header {
+  margin-bottom: 24px;
+
+  & > .title {
+    line-height: 30px;
+  }
+
+  & > .description {
+    line-height: 25px;
+  }
+}
diff --git a/src/app/[locale]/(core)/compatibility/[id]/page.tsx b/src/app/[locale]/(core)/compatibility/[id]/page.tsx
new file mode 100644
index 0000000..d1f859b
--- /dev/null
+++ b/src/app/[locale]/(core)/compatibility/[id]/page.tsx
@@ -0,0 +1,43 @@
+import { Suspense, use } from "react";
+import { useTranslations } from "next-intl";
+
+import CompatibilityActionFieldsForm, {
+  CompatibilityActionFieldsFormSkeleton,
+} from "@/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm";
+import { Typography } from "@/components/ui";
+import { loadCompatibilityActionFields } from "@/entities/compatibilityActionFields/loaders";
+
+import styles from "./page.module.scss";
+
+export default function Compatibility({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const t = useTranslations("Compatibility");
+
+  return (
+    <>
+      <div className={styles.header}>
+        <Typography
+          as="h1"
+          size="xl"
+          weight="semiBold"
+          className={styles.title}
+        >
+          {t("title")}
+        </Typography>
+        <Typography as="p" size="sm" className={styles.description}>
+          {t("description")}
+        </Typography>
+      </div>
+      <Suspense key={id} fallback={<CompatibilityActionFieldsFormSkeleton />}>
+        <CompatibilityActionFieldsForm
+          fields={loadCompatibilityActionFields(id)}
+          actionId={id}
+        />
+      </Suspense>
+    </>
+  );
+}
diff --git a/src/app/[locale]/(core)/compatibility/result/[id]/page.tsx b/src/app/[locale]/(core)/compatibility/result/[id]/page.tsx
new file mode 100644
index 0000000..4a5582a
--- /dev/null
+++ b/src/app/[locale]/(core)/compatibility/result/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { use } from "react";
+
+import CompatibilityResultPage from "@/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage";
+
+export default function CompatibilityResult({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+
+  return <CompatibilityResultPage id={id} />;
+}
diff --git a/src/app/[locale]/(core)/error.module.scss b/src/app/[locale]/(core)/error.module.scss
index 0351b6d..0981741 100644
--- a/src/app/[locale]/(core)/error.module.scss
+++ b/src/app/[locale]/(core)/error.module.scss
@@ -1,6 +1,6 @@
 .coreError {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-}
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/src/app/[locale]/(core)/error.tsx b/src/app/[locale]/(core)/error.tsx
index ead1ad3..6d72fb9 100644
--- a/src/app/[locale]/(core)/error.tsx
+++ b/src/app/[locale]/(core)/error.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
-import { Button, Typography } from '@/components/ui';
+import { Button, Typography } from "@/components/ui";
 
-import styles from "./error.module.scss"
+import styles from "./error.module.scss";
 
 export default function Error({
   error,
@@ -14,20 +14,21 @@ export default function Error({
   reset: () => void;
 }) {
   useEffect(() => {
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 
   return (
     <div className={styles.coreError}>
-      <Typography as='h2' size='xl' weight='bold'>Something went wrong!</Typography>
-      <Typography as='p' align='center'>{error.message}</Typography>
-      <Button
-        onClick={
-          () => reset()
-        }
-      >
-        <Typography color='white'>Try again</Typography>
+      <Typography as="h2" size="xl" weight="bold">
+        Something went wrong!
+      </Typography>
+      <Typography as="p" align="center">
+        {error.message}
+      </Typography>
+      <Button onClick={() => reset()}>
+        <Typography color="white">Try again</Typography>
       </Button>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/app/[locale]/(core)/layout.module.scss b/src/app/[locale]/(core)/layout.module.scss
index 948bbf3..048dbc7 100644
--- a/src/app/[locale]/(core)/layout.module.scss
+++ b/src/app/[locale]/(core)/layout.module.scss
@@ -1,11 +1,11 @@
 .main {
-    padding: 16px;
-    padding-bottom: 64px;
+  padding: 16px;
+  padding-bottom: 64px;
 }
 
 .navBar {
-    position: sticky;
-    top: 0;
-    z-index: 7777;
-    background: var(--background);
-}
\ No newline at end of file
+  position: sticky;
+  top: 0;
+  z-index: 7777;
+  background: var(--background);
+}
diff --git a/src/app/[locale]/(core)/layout.tsx b/src/app/[locale]/(core)/layout.tsx
index 01c10b1..648b925 100644
--- a/src/app/[locale]/(core)/layout.tsx
+++ b/src/app/[locale]/(core)/layout.tsx
@@ -3,14 +3,14 @@ import { DrawerProvider, NavigationBar } from "@/components/layout";
 import styles from "./layout.module.scss";
 
 export default function CoreLayout({
-    children,
+  children,
 }: Readonly<{
-    children: React.ReactNode;
+  children: React.ReactNode;
 }>) {
-    return <DrawerProvider>
-        <NavigationBar className={styles.navBar} />
-        <main className={styles.main}>
-            {children}
-        </main>
+  return (
+    <DrawerProvider>
+      <NavigationBar className={styles.navBar} />
+      <main className={styles.main}>{children}</main>
     </DrawerProvider>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/[locale]/(core)/loading.module.scss b/src/app/[locale]/(core)/loading.module.scss
index 6c0ba2e..0333b08 100644
--- a/src/app/[locale]/(core)/loading.module.scss
+++ b/src/app/[locale]/(core)/loading.module.scss
@@ -1,5 +1,5 @@
 .coreSpinnerContainer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
\ No newline at end of file
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/app/[locale]/(core)/page.module.scss b/src/app/[locale]/(core)/page.module.scss
index 42f2106..6465f91 100644
--- a/src/app/[locale]/(core)/page.module.scss
+++ b/src/app/[locale]/(core)/page.module.scss
@@ -1,5 +1,5 @@
 .page {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
diff --git a/src/app/[locale]/(core)/page.tsx b/src/app/[locale]/(core)/page.tsx
index ce8e054..98b6bd9 100644
--- a/src/app/[locale]/(core)/page.tsx
+++ b/src/app/[locale]/(core)/page.tsx
@@ -1,41 +1,45 @@
 import { Suspense } from "react";
 
 import {
-    AdvisersSection,
-    AdvisersSectionSkeleton,
-    CompatibilitySection,
-    CompatibilitySectionSkeleton,
-    MeditationSection,
-    MeditationSectionSkeleton,
-    PalmSection,
-    PalmSectionSkeleton
+  AdvisersSection,
+  AdvisersSectionSkeleton,
+  CompatibilitySection,
+  CompatibilitySectionSkeleton,
+  MeditationSection,
+  MeditationSectionSkeleton,
+  PalmSection,
+  PalmSectionSkeleton,
 } from "@/components/domains/dashboard";
 import { Horoscope } from "@/components/widgets";
-import { loadAssistants, loadCompatibility, loadMeditations, loadPalms } from "@/entities/dashboard/loaders";
+import {
+  loadAssistants,
+  loadCompatibility,
+  loadMeditations,
+  loadPalms,
+} from "@/entities/dashboard/loaders";
 
 import styles from "./page.module.scss";
 
 export default function Home() {
+  return (
+    <section className={styles.page}>
+      <Horoscope />
 
-    return (
-        <section className={styles.page}>
-            <Horoscope />
+      <Suspense fallback={<AdvisersSectionSkeleton />}>
+        <AdvisersSection promise={loadAssistants()} />
+      </Suspense>
 
-            <Suspense fallback={<AdvisersSectionSkeleton />}>
-                <AdvisersSection promise={loadAssistants()} />
-            </Suspense>
+      <Suspense fallback={<CompatibilitySectionSkeleton />}>
+        <CompatibilitySection promise={loadCompatibility()} />
+      </Suspense>
 
-            <Suspense fallback={<CompatibilitySectionSkeleton />}>
-                <CompatibilitySection promise={loadCompatibility()} />
-            </Suspense>
+      <Suspense fallback={<MeditationSectionSkeleton />}>
+        <MeditationSection promise={loadMeditations()} />
+      </Suspense>
 
-            <Suspense fallback={<MeditationSectionSkeleton />}>
-                <MeditationSection promise={loadMeditations()} />
-            </Suspense>
-
-            <Suspense fallback={<PalmSectionSkeleton />}>
-                <PalmSection promise={loadPalms()} />
-            </Suspense>
-        </section>
-    );
-}
\ No newline at end of file
+      <Suspense fallback={<PalmSectionSkeleton />}>
+        <PalmSection promise={loadPalms()} />
+      </Suspense>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/(core)/palmistry/result/[id]/page.tsx b/src/app/[locale]/(core)/palmistry/result/[id]/page.tsx
new file mode 100644
index 0000000..0ba6d44
--- /dev/null
+++ b/src/app/[locale]/(core)/palmistry/result/[id]/page.tsx
@@ -0,0 +1,16 @@
+import PalmistryResultPage from "@/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage";
+import { startGeneration } from "@/entities/generations/api";
+
+export default async function PalmistryResult({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const result = await startGeneration({
+    actionType: "palm",
+    actionId: id,
+  });
+
+  return <PalmistryResultPage id={result?.id} />;
+}
diff --git a/src/app/[locale]/(core)/payment/failed/page.tsx b/src/app/[locale]/(core)/payment/failed/page.tsx
index ec4a287..b68c898 100644
--- a/src/app/[locale]/(core)/payment/failed/page.tsx
+++ b/src/app/[locale]/(core)/payment/failed/page.tsx
@@ -5,16 +5,18 @@ import { ROUTES } from "@/shared/constants/client-routes";
 import { ELottieKeys } from "@/shared/constants/lottie";
 
 export default async function PaymentFailed() {
-    const t = await getTranslations("Payment.Error");
+  const t = await getTranslations("Payment.Error");
 
-    return (
-        <AnimatedInfoScreen
-            lottieAnimation={<LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />}
-            title={t("title")}
-            animationTime={0}
-            animationTexts={[]}
-            buttonText={t("button")}
-            nextRoute={ROUTES.home()}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <AnimatedInfoScreen
+      lottieAnimation={
+        <LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />
+      }
+      title={t("title")}
+      animationTime={0}
+      animationTexts={[]}
+      buttonText={t("button")}
+      nextRoute={ROUTES.home()}
+    />
+  );
+}
diff --git a/src/app/[locale]/(core)/payment/route.ts b/src/app/[locale]/(core)/payment/route.ts
index f93b3c0..a1dde6d 100644
--- a/src/app/[locale]/(core)/payment/route.ts
+++ b/src/app/[locale]/(core)/payment/route.ts
@@ -4,26 +4,26 @@ import { createPaymentCheckout } from "@/entities/payment/api";
 import { ROUTES } from "@/shared/constants/client-routes";
 
 export async function GET(req: NextRequest) {
-    const productId = req.nextUrl.searchParams.get("productId");
-    const placementId = req.nextUrl.searchParams.get("placementId");
-    const paywallId = req.nextUrl.searchParams.get("paywallId");
-    const fbPixels = req.nextUrl.searchParams.get("fb_pixels");
-    const productPrice = req.nextUrl.searchParams.get("price");
-    const currency = req.nextUrl.searchParams.get("currency");
+  const productId = req.nextUrl.searchParams.get("productId");
+  const placementId = req.nextUrl.searchParams.get("placementId");
+  const paywallId = req.nextUrl.searchParams.get("paywallId");
+  const fbPixels = req.nextUrl.searchParams.get("fb_pixels");
+  const productPrice = req.nextUrl.searchParams.get("price");
+  const currency = req.nextUrl.searchParams.get("currency");
 
-    const data = await createPaymentCheckout({
-        productId: productId || "",
-        placementId: placementId || "",
-        paywallId: paywallId || "",
-    });
+  const data = await createPaymentCheckout({
+    productId: productId || "",
+    placementId: placementId || "",
+    paywallId: paywallId || "",
+  });
 
-    let redirectUrl: URL = new URL(data?.paymentUrl || "", req.nextUrl.origin);
-    if (!redirectUrl) {
-        redirectUrl = new URL(`${ROUTES.paymentFailed()}`, origin);
-    }
-    if (fbPixels) redirectUrl.searchParams.set("fb_pixels", fbPixels);
-    if (productPrice) redirectUrl.searchParams.set("price", productPrice);
-    if (currency) redirectUrl.searchParams.set("currency", currency);
+  let redirectUrl: URL = new URL(data?.paymentUrl || "", req.nextUrl.origin);
+  if (!redirectUrl) {
+    redirectUrl = new URL(`${ROUTES.paymentFailed()}`, origin);
+  }
+  if (fbPixels) redirectUrl.searchParams.set("fb_pixels", fbPixels);
+  if (productPrice) redirectUrl.searchParams.set("price", productPrice);
+  if (currency) redirectUrl.searchParams.set("currency", currency);
 
-    return NextResponse.redirect(redirectUrl, { status: 307 });
-}
\ No newline at end of file
+  return NextResponse.redirect(redirectUrl, { status: 307 });
+}
diff --git a/src/app/[locale]/(core)/payment/success/Metrics.module.scss b/src/app/[locale]/(core)/payment/success/Metrics.module.scss
index 979775c..3118289 100644
--- a/src/app/[locale]/(core)/payment/success/Metrics.module.scss
+++ b/src/app/[locale]/(core)/payment/success/Metrics.module.scss
@@ -1,23 +1,23 @@
 .button {
-    position: fixed;
-    bottom: calc(0dvh + 64px);
-    left: 50%;
-    transform: translate(-50%, 0);
-    opacity: 0;
-    pointer-events: none;
-    max-width: 400px;
-    width: calc(100dvw - 32px);
-    animation: fadeIn 0.5s ease-in-out 2s forwards;
+  position: fixed;
+  bottom: calc(0dvh + 64px);
+  left: 50%;
+  transform: translate(-50%, 0);
+  opacity: 0;
+  pointer-events: none;
+  max-width: 400px;
+  width: calc(100dvw - 32px);
+  animation: fadeIn 0.5s ease-in-out 2s forwards;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        pointer-events: none;
-    }
+  from {
+    opacity: 0;
+    pointer-events: none;
+  }
 
-    to {
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
\ No newline at end of file
+  to {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
diff --git a/src/app/[locale]/(core)/payment/success/Metrics.tsx b/src/app/[locale]/(core)/payment/success/Metrics.tsx
index 51984bd..e16fda8 100644
--- a/src/app/[locale]/(core)/payment/success/Metrics.tsx
+++ b/src/app/[locale]/(core)/payment/success/Metrics.tsx
@@ -10,65 +10,72 @@ import { ROUTES } from "@/shared/constants/client-routes";
 import styles from "./Metrics.module.scss";
 
 interface MetricsProps {
-    fbPixels: string[];
-    productPrice: string;
-    currency: string;
+  fbPixels: string[];
+  productPrice: string;
+  currency: string;
 }
 
-export default function Metrics({ fbPixels, productPrice, currency }: MetricsProps) {
-    const t = useTranslations("Payment.Success");
+export default function Metrics({
+  fbPixels,
+  productPrice,
+  currency,
+}: MetricsProps) {
+  const t = useTranslations("Payment.Success");
 
-    const [isButtonVisible, setIsButtonVisible] = useState(false);
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
 
-    const navigateToHome = () => {
-        window.location.href = ROUTES.home()
-    }
+  const navigateToHome = () => {
+    window.location.href = ROUTES.home();
+  };
 
-    // Yandex Metrica
-    useEffect(() => {
-        const interval = setInterval(() => {
-            if (typeof window.ym === 'function' && typeof window.klaviyo === 'object' && typeof window.gtag === 'function') {
-                try {
-                    window.gtag('event', 'PaymentSuccess')
-                    window.klaviyo.push(['track', "PaymentSuccess"]);
+  // Yandex Metrica
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (
+        typeof window.ym === "function" &&
+        typeof window.klaviyo === "object" &&
+        typeof window.gtag === "function"
+      ) {
+        try {
+          window.gtag("event", "PaymentSuccess");
+          window.klaviyo.push(["track", "PaymentSuccess"]);
 
-                    window.ym(95799066, "init", {
-                        clickmap: true,
-                        trackLinks: true,
-                        accurateTrackBounce: true,
-                        webvisor: true,
-                    });
+          window.ym(95799066, "init", {
+            clickmap: true,
+            trackLinks: true,
+            accurateTrackBounce: true,
+            webvisor: true,
+          });
 
-                    window.ym(95799066, 'reachGoal', "PaymentSuccess", {}, () => {
-                        console.log("Запрос отправлен");
-                        // deleteYm()
-                        setIsButtonVisible(true);
-                    })
+          window.ym(95799066, "reachGoal", "PaymentSuccess", {}, () => {
+            // deleteYm()
+            setIsButtonVisible(true);
+          });
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error("YM error:", e);
+        } finally {
+          clearInterval(interval);
+        }
+      }
+    }, 200);
 
-                } catch (e) {
-                    console.error('YM error:', e)
-                } finally {
-                    clearInterval(interval);
-                }
-            }
-        }, 200);
+    return () => clearInterval(interval);
+  }, []);
 
-        return () => clearInterval(interval)
-    }, []);
-
-    return <>
-
-        {/* Klaviyo */}
-        {/* <Script src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=RM7w5r" /> */}
-        <Script id="klaviyo-script">
-            {`const script = document.createElement("script");
+  return (
+    <>
+      {/* Klaviyo */}
+      {/* <Script src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=RM7w5r" /> */}
+      <Script id="klaviyo-script">
+        {`const script = document.createElement("script");
     script.src = "https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=RM7w5r";
     script.type = "text/javascript";
     script.async = "";
     document.head.appendChild(script);`}
-        </Script>
-        <Script id="klaviyo-script-proxy">
-            {`
+      </Script>
+      <Script id="klaviyo-script-proxy">
+        {`
             !(function () {
       if (!window.klaviyo) {
                 window._klOnsite = window._klOnsite || [];
@@ -117,11 +124,11 @@ export default function Metrics({ fbPixels, productPrice, currency }: MetricsPro
       }
     })();
     `}
-        </Script>
+      </Script>
 
-        {/* Yandex Metrica */}
-        <Script id="yandex-metrica-script">
-            {`(function (m, e, t, r, i, k, a) {
+      {/* Yandex Metrica */}
+      <Script id="yandex-metrica-script">
+        {`(function (m, e, t, r, i, k, a) {
     m[i] =
         m[i] ||
         function () {
@@ -145,22 +152,26 @@ export default function Metrics({ fbPixels, productPrice, currency }: MetricsPro
     "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",
     "ym"
 );`}
-        </Script>
+      </Script>
 
-        {/* Google Analytics */}
-        <Script id="google-analytics-script" async src="https://www.googletagmanager.com/gtag/js?id=G-4N17LL3BB5" />
-        <Script id="google-analytics-script-config">
-            {`window.dataLayer = window.dataLayer || [];
+      {/* Google Analytics */}
+      <Script
+        id="google-analytics-script"
+        async
+        src="https://www.googletagmanager.com/gtag/js?id=G-4N17LL3BB5"
+      />
+      <Script id="google-analytics-script-config">
+        {`window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
 
     gtag('config','G-4N17LL3BB5');`}
-        </Script>
+      </Script>
 
-        {/* Facebook Pixel */}
-        {fbPixels.map((pixel) => (
-            <Script id={`facebook-pixel-${pixel}`} key={pixel}>
-                {`!function(f,b,e,v,n,t,s)
+      {/* Facebook Pixel */}
+      {fbPixels.map(pixel => (
+        <Script id={`facebook-pixel-${pixel}`} key={pixel}>
+          {`!function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};
 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
@@ -171,15 +182,14 @@ s.parentNode.insertBefore(t,s)}(window, document,'script',
 fbq('init', '${pixel}');
 fbq('track', 'PageView');
 fbq('track', 'Purchase', { value: ${productPrice}, currency: "${currency}" });`}
-            </Script>
-        ))}
+        </Script>
+      ))}
 
-        {isButtonVisible &&
-            <Button onClick={navigateToHome} className={styles.button}>
-                <Typography color="white">
-                    {t("button")}
-                </Typography>
-            </Button>
-        }
-    </>;
-}
\ No newline at end of file
+      {isButtonVisible && (
+        <Button onClick={navigateToHome} className={styles.button}>
+          <Typography color="white">{t("button")}</Typography>
+        </Button>
+      )}
+    </>
+  );
+}
diff --git a/src/app/[locale]/(core)/payment/success/page.tsx b/src/app/[locale]/(core)/payment/success/page.tsx
index 81dfb50..138c657 100644
--- a/src/app/[locale]/(core)/payment/success/page.tsx
+++ b/src/app/[locale]/(core)/payment/success/page.tsx
@@ -5,30 +5,34 @@ import { ELottieKeys } from "@/shared/constants/lottie";
 
 import Metrics from "./Metrics";
 
-export default async function PaymentSuccess({ searchParams }: {
-    searchParams: Promise<{
-        [key: string]: string | undefined
-    }>;
+export default async function PaymentSuccess({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    [key: string]: string | undefined;
+  }>;
 }) {
-    const params = await searchParams;
+  const params = await searchParams;
 
-    const fbPixels = params?.fb_pixels?.split(",") || [];
-    const productPrice = params?.price || "0";
-    const currency = params?.currency || "USD";
+  const fbPixels = params?.fb_pixels?.split(",") || [];
+  const productPrice = params?.price || "0";
+  const currency = params?.currency || "USD";
 
-    const t = await getTranslations("Payment.Success");
+  const t = await getTranslations("Payment.Success");
 
-    return (
-        <>
-            <AnimatedInfoScreen
-                lottieAnimation={<LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />}
-                title={t("title")}
-            />
-            <Metrics
-                fbPixels={fbPixels}
-                productPrice={productPrice}
-                currency={currency}
-            />
-        </>
-    );
-}
\ No newline at end of file
+  return (
+    <>
+      <AnimatedInfoScreen
+        lottieAnimation={
+          <LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />
+        }
+        title={t("title")}
+      />
+      <Metrics
+        fbPixels={fbPixels}
+        productPrice={productPrice}
+        currency={currency}
+      />
+    </>
+  );
+}
diff --git a/src/app/[locale]/(core)/profile/Profile.tsx b/src/app/[locale]/(core)/profile/Profile.tsx
deleted file mode 100644
index 66f5c25..0000000
--- a/src/app/[locale]/(core)/profile/Profile.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-
-import { Billing, LogOut, ProfileBlock, ProfileInformation } from "@/components/domains/profile"
-import { Card, Modal, Typography } from "@/components/ui";
-import { ROUTES } from "@/shared/constants/client-routes";
-
-import styles from "./page.module.scss"
-
-export default function ProfilePage() {
-    const t = useTranslations('Profile');
-    const router = useRouter();
-    const [logoutModal, setLogoutModal] = useState(false);
-
-    const handleLogout = () => {
-        router.replace(ROUTES.home());
-        // logout();
-    };
-
-    const handleLogoutModal = () => {
-        setLogoutModal(true);
-    };
-
-    const handleBilling = () => {
-        router.push(ROUTES.profileSubscriptions())
-    }
-
-    const profileBlocks = [
-        {
-            title: t("profile_information.title"),
-            description: t("profile_information.description"),
-            children: <ProfileInformation />
-        },
-        {
-            title: t("billing.title"),
-            description: t("billing.description"),
-            children: <Billing onBilling={handleBilling} />
-        },
-        {
-            title: t("log_out.title"),
-            children: <LogOut onLogout={handleLogoutModal} />
-        }
-    ]
-
-    return (
-        <>
-            <Card className={styles.card}>
-                {profileBlocks.map((block, index) => (
-                    <div key={block.title}>
-                        <ProfileBlock {...block}>
-                            {block.children}
-                        </ProfileBlock>
-                        {index !== profileBlocks.length - 1 && <hr className={styles.line} />}
-                    </div>
-                ))}
-            </Card>
-            {logoutModal && <Modal
-                isCloseButtonVisible={false}
-                open={!!logoutModal}
-                onClose={() => setLogoutModal(false)}
-                className={styles.modal}
-                modalClassName={styles["modal-container"]}
-            >
-                <Typography as="h4" className={styles["modal-title"]}>
-                    {t("log_out.modal.title")}
-                </Typography>
-                <p className={styles["modal-description"]}>
-                    {t("log_out.modal.description")}
-                </p>
-                <div className={styles["modal-answers"]}>
-                    <div className={styles["modal-answer"]} onClick={handleLogout}>
-                        <p className={styles["modal-answer-text"]}>
-                            {t("log_out.modal.log_out_button")}
-                        </p>
-                    </div>
-                    <div className={styles["modal-answer"]} onClick={() => setLogoutModal(false)}>
-                        <p className={styles["modal-answer-text"]}>
-                            {t("log_out.modal.stay_button")}
-                        </p>
-                    </div>
-                </div>
-            </Modal>}
-        </>
-    )
-}
\ No newline at end of file
diff --git a/src/app/[locale]/(core)/profile/page.module.scss b/src/app/[locale]/(core)/profile/page.module.scss
index 4f68ceb..1e17e7b 100644
--- a/src/app/[locale]/(core)/profile/page.module.scss
+++ b/src/app/[locale]/(core)/profile/page.module.scss
@@ -1,51 +1,10 @@
 .card {
-    padding: 6px;
+  padding: 6px;
 }
 
 .line {
-    width: 100%;
-    height: 1px;
-    background-color: #f0f0f0;
-    margin: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #f0f0f0;
+  margin: 0;
 }
-
-
-
-.modal-container {
-    max-width: 290px;
-    padding: 24px 0px 0px;
-    overflow: hidden;
-}
-
-.modal-title {
-    font-weight: 600;
-    margin-bottom: 16px;
-    padding-inline: 24px;
-}
-
-.modal-description {
-    padding-inline: 24px;
-    text-align: center;
-}
-
-.modal-answers {
-    display: flex;
-    flex-direction: row;
-    margin-top: 24px;
-    border-top: 1px solid #D9D9D9;
-}
-
-.modal-answer {
-    width: 50%;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #275DA7;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:first-child {
-        border-right: 1px solid #D9D9D9;
-    }
-}
\ No newline at end of file
diff --git a/src/app/[locale]/(core)/profile/page.tsx b/src/app/[locale]/(core)/profile/page.tsx
index e294191..0101ea3 100644
--- a/src/app/[locale]/(core)/profile/page.tsx
+++ b/src/app/[locale]/(core)/profile/page.tsx
@@ -1,8 +1,50 @@
-import ProfilePage from "./Profile";
+import { Suspense } from "react";
+import { useTranslations } from "next-intl";
+
+import {
+  Billing,
+  LogOut,
+  ProfileBlock,
+  ProfileInformation,
+  ProfileInformationSkeleton,
+} from "@/components/domains/profile";
+import { Card } from "@/components/ui";
+import { loadUser } from "@/entities/user/loaders";
+
+import styles from "./page.module.scss";
 
 export default function Profile() {
+  const t = useTranslations("Profile");
 
-    return (
-        <ProfilePage />
-    )
-}
\ No newline at end of file
+  const profileBlocks = [
+    {
+      title: t("profile_information.title"),
+      description: t("profile_information.description"),
+      children: (
+        <Suspense fallback={<ProfileInformationSkeleton />}>
+          <ProfileInformation user={loadUser()} />
+        </Suspense>
+      ),
+    },
+    {
+      title: t("billing.title"),
+      description: t("billing.description"),
+      children: <Billing />,
+    },
+    {
+      title: t("log_out.title"),
+      children: <LogOut />,
+    },
+  ];
+
+  return (
+    <Card className={styles.card}>
+      {profileBlocks.map((block, index) => (
+        <div key={block.title}>
+          <ProfileBlock {...block}>{block.children}</ProfileBlock>
+          {index !== profileBlocks.length - 1 && <hr className={styles.line} />}
+        </div>
+      ))}
+    </Card>
+  );
+}
diff --git a/src/app/[locale]/(core)/profile/subscriptions/error.tsx b/src/app/[locale]/(core)/profile/subscriptions/error.tsx
index 591df3e..f74f58e 100644
--- a/src/app/[locale]/(core)/profile/subscriptions/error.tsx
+++ b/src/app/[locale]/(core)/profile/subscriptions/error.tsx
@@ -1,29 +1,33 @@
-'use client';
+"use client";
 
-import { useRouter } from 'next/navigation';
-import { useTranslations } from 'next-intl';
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 
-import { Button, Typography } from '@/components/ui';
-import { ROUTES } from '@/shared/constants/client-routes';
+import { Button, Typography } from "@/components/ui";
+import { ROUTES } from "@/shared/constants/client-routes";
 
-import styles from "./page.module.scss"
+import styles from "./page.module.scss";
 
 export default function Error() {
-  const t = useTranslations("Subscriptions")
-  const router = useRouter()
+  const t = useTranslations("Subscriptions");
+  const router = useRouter();
 
   return (
     <div className={styles.container}>
-      <Typography as="h1" className={styles.title}>{t("title")}</Typography>
-      <Typography as='p' align='center'>{t("error")}</Typography>
+      <Typography as="h1" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="p" align="center">
+        {t("error")}
+      </Typography>
       <Button
         onClick={
           // () => reset()
           () => router.push(ROUTES.retainingFunnelCancelSubscription())
         }
       >
-        <Typography color='white'>{t("try_again")}</Typography>
+        <Typography color="white">{t("try_again")}</Typography>
       </Button>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/app/[locale]/(core)/profile/subscriptions/page.module.scss b/src/app/[locale]/(core)/profile/subscriptions/page.module.scss
index 27b7a8f..a7088f7 100644
--- a/src/app/[locale]/(core)/profile/subscriptions/page.module.scss
+++ b/src/app/[locale]/(core)/profile/subscriptions/page.module.scss
@@ -1,96 +1,96 @@
 .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    padding-inline: 8px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-inline: 8px;
 }
 
 .title {
-    margin: 0;
-    font-size: 20px;
+  margin: 0;
+  font-size: 20px;
 }
 
 .buttonCancel {
-    color: #ACB0BA;
-    font-size: 16px;
-    line-height: 25px;
-    background: none;
-    border: none;
-    text-decoration: underline;
-    box-shadow: none;
-    padding: 0;
-    min-height: 0;
-    max-width: none;
+  color: #acb0ba;
+  font-size: 16px;
+  line-height: 25px;
+  background: none;
+  border: none;
+  text-decoration: underline;
+  box-shadow: none;
+  padding: 0;
+  min-height: 0;
+  max-width: none;
 }
 
 .description,
 .error {
-    font-size: 16px;
-    line-height: 25px;
-    text-align: center;
+  font-size: 16px;
+  line-height: 25px;
+  text-align: center;
 }
 
 .description {
-    color: #ACB0BA;
+  color: #acb0ba;
 }
 
 .error {
-    color: #FF0000;
+  color: #ff0000;
 }
 
 .modal-container {
-    max-width: 290px;
-    padding: 24px 0px 0px;
-    overflow: hidden;
+  max-width: 290px;
+  padding: 24px 0px 0px;
+  overflow: hidden;
 }
 
 .modal-title {
-    font-weight: 600;
-    margin-bottom: 16px;
-    padding-inline: 24px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  padding-inline: 24px;
 }
 
 .modal-description {
-    padding-inline: 24px;
-    text-align: center;
+  padding-inline: 24px;
+  text-align: center;
 }
 
 .modal-answers {
-    display: flex;
-    flex-direction: row;
-    margin-top: 24px;
-    border-top: 1px solid #D9D9D9;
+  display: flex;
+  flex-direction: row;
+  margin-top: 24px;
+  border-top: 1px solid #d9d9d9;
 }
 
 .modal-answer {
-    width: 50%;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #275DA7;
-    font-weight: 600;
-    cursor: pointer;
-    text-align: center;
+  width: 50%;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #275da7;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
 
-    &:first-child {
-        border-right: 1px solid #D9D9D9;
-    }
+  &:first-child {
+    border-right: 1px solid #d9d9d9;
+  }
 }
 
 :global(.dark-theme) .modal-container {
-    background-color: #343639;
+  background-color: #343639;
 
-    &>.modal-answers>.modal-answer {
-        color: #1e7dff;
-    }
+  & > .modal-answers > .modal-answer {
+    color: #1e7dff;
+  }
 }
 
 :global(.dark-theme) .modal-title {
-    color: #F7F7F7;
+  color: #f7f7f7;
 }
 
 :global(.dark-theme) .modal-description {
-    color: #F7F7F7;
-}
\ No newline at end of file
+  color: #f7f7f7;
+}
diff --git a/src/app/[locale]/(core)/profile/subscriptions/page.tsx b/src/app/[locale]/(core)/profile/subscriptions/page.tsx
index 97a3a83..433fb09 100644
--- a/src/app/[locale]/(core)/profile/subscriptions/page.tsx
+++ b/src/app/[locale]/(core)/profile/subscriptions/page.tsx
@@ -1,23 +1,29 @@
-import { Suspense } from "react"
+import { Suspense } from "react";
 import { getTranslations } from "next-intl/server";
 
-import { CancelSubscriptionModalProvider, SubscriptionsList, SubscriptionsListSkeleton } from "@/components/domains/profile/subscriptions";
+import {
+  CancelSubscriptionModalProvider,
+  SubscriptionsList,
+  SubscriptionsListSkeleton,
+} from "@/components/domains/profile/subscriptions";
 import { Typography } from "@/components/ui";
 import { loadSubscriptionsData } from "@/entities/subscriptions/loaders";
 
-import styles from "./page.module.scss"
+import styles from "./page.module.scss";
 
 export default async function Subscriptions() {
-    const t = await getTranslations("Subscriptions");
+  const t = await getTranslations("Subscriptions");
 
-    return (
-        <CancelSubscriptionModalProvider>
-            <div className={styles.container}>
-                <Typography as="h1" className={styles.title}>{t("title")}</Typography>
-                <Suspense fallback={<SubscriptionsListSkeleton />}>
-                    <SubscriptionsList promise={loadSubscriptionsData()} />
-                </Suspense>
-            </div>
-        </CancelSubscriptionModalProvider>
-    )
-}
\ No newline at end of file
+  return (
+    <CancelSubscriptionModalProvider>
+      <div className={styles.container}>
+        <Typography as="h1" className={styles.title}>
+          {t("title")}
+        </Typography>
+        <Suspense fallback={<SubscriptionsListSkeleton />}>
+          <SubscriptionsList promise={loadSubscriptionsData()} />
+        </Suspense>
+      </div>
+    </CancelSubscriptionModalProvider>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/appreciate-choice/page.tsx b/src/app/[locale]/(core)/retaining/appreciate-choice/page.tsx
index 8969af8..aae4ffe 100644
--- a/src/app/[locale]/(core)/retaining/appreciate-choice/page.tsx
+++ b/src/app/[locale]/(core)/retaining/appreciate-choice/page.tsx
@@ -5,23 +5,24 @@ import { ROUTES } from "@/shared/constants/client-routes";
 import { ELottieKeys } from "@/shared/constants/lottie";
 
 export default async function AppreciateChoice() {
-    const t = await getTranslations("AppreciateChoice");
+  const t = await getTranslations("AppreciateChoice");
 
-    const animationTexts = [
-        t("descriptions.1"),
-        t("descriptions.2"),
-        t("descriptions.3"),
-    ]
+  const animationTexts = [
+    t("descriptions.1"),
+    t("descriptions.2"),
+    t("descriptions.3"),
+  ];
 
-    return (
-        <AnimatedInfoScreen
-            lottieAnimation={<LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />}
-            title={t("title")}
-            animationTime={9000}
-            animationTexts={animationTexts}
-            buttonText={t("button")}
-            nextRoute={ROUTES.retainingFunnelWhatReason()}
-        />
-
-    )
-}
\ No newline at end of file
+  return (
+    <AnimatedInfoScreen
+      lottieAnimation={
+        <LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />
+      }
+      title={t("title")}
+      animationTime={9000}
+      animationTexts={animationTexts}
+      buttonText={t("button")}
+      nextRoute={ROUTES.retainingFunnelWhatReason()}
+    />
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/cancel-subscription/page.module.scss b/src/app/[locale]/(core)/retaining/cancel-subscription/page.module.scss
index c277fa6..c95d86a 100644
--- a/src/app/[locale]/(core)/retaining/cancel-subscription/page.module.scss
+++ b/src/app/[locale]/(core)/retaining/cancel-subscription/page.module.scss
@@ -1,18 +1,18 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }
 
 .title {
-    font-size: 28px;
-    line-height: 125%;
-    color: #1A1A1A;
+  font-size: 28px;
+  line-height: 125%;
+  color: #1a1a1a;
 }
 
 .description {
-    font-size: 20px;
-    line-height: 125%;
-    color: #2C2C2C;
-    padding-inline: 14px;
-}
\ No newline at end of file
+  font-size: 20px;
+  line-height: 125%;
+  color: #2c2c2c;
+  padding-inline: 14px;
+}
diff --git a/src/app/[locale]/(core)/retaining/cancel-subscription/page.tsx b/src/app/[locale]/(core)/retaining/cancel-subscription/page.tsx
index 6f72891..ba01074 100644
--- a/src/app/[locale]/(core)/retaining/cancel-subscription/page.tsx
+++ b/src/app/[locale]/(core)/retaining/cancel-subscription/page.tsx
@@ -6,19 +6,19 @@ import { Typography } from "@/components/ui";
 import styles from "./page.module.scss";
 
 export default function CanselSubscription() {
-    const t = useTranslations("CancelSubscription");
+  const t = useTranslations("CancelSubscription");
 
-    return (
-        <div className={styles.container}>
-            <Typography as="h1" size="xl" weight="bold" className={styles.title}>
-                {t("title")}
-            </Typography>
-            <Typography as="p" className={styles.description}>
-                {t.rich("description", {
-                    br: () => <br />
-                })}
-            </Typography>
-            <Buttons />
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.container}>
+      <Typography as="h1" size="xl" weight="bold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="p" className={styles.description}>
+        {t.rich("description", {
+          br: () => <br />,
+        })}
+      </Typography>
+      <Buttons />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.module.scss b/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.module.scss
index ab17902..e6f3413 100644
--- a/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.module.scss
+++ b/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.module.scss
@@ -1,48 +1,52 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 28px;
 }
 
 .title {
-    font-size: 27px;
-    line-height: 40px;
-    margin: 0;
+  font-size: 27px;
+  line-height: 40px;
+  margin: 0;
 }
 
 .description {
-    line-height: 25px;
-    margin-top: 74px;
-    padding-inline: 28px;
-    color: #ACB0BA;
+  line-height: 25px;
+  margin-top: 74px;
+  padding-inline: 28px;
+  color: #acb0ba;
 }
 
 .topSellingImage {
-    margin-top: -50px;
+  margin-top: -50px;
 }
 
 .offer {
-    margin-top: 12px;
-    background-image: url("/retaining/zodiac_circle.png");
-    background-size: 125%;
-    background-position: center -45px;
-    background-repeat: no-repeat;
+  margin-top: 12px;
+  background-image: url("/retaining/zodiac_circle.png");
+  background-size: 125%;
+  background-position: center -45px;
+  background-repeat: no-repeat;
 
-    & * {
-        position: relative;
-        z-index: 1;
-    }
+  & * {
+    position: relative;
+    z-index: 1;
+  }
 
-    &::after {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: 14px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: linear-gradient(0deg, #FFFFFF 25.48%, rgba(255, 255, 255, 0) 100%);
-    }
-}
\ No newline at end of file
+  &::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 14px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+      0deg,
+      #ffffff 25.48%,
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+}
diff --git a/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.tsx b/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.tsx
index 3088b0c..2881587 100644
--- a/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.tsx
+++ b/src/app/[locale]/(core)/retaining/cancellation-of-subscription/page.tsx
@@ -1,34 +1,37 @@
 import { getTranslations } from "next-intl/server";
 
 import { Offer } from "@/components/domains/retaining";
-import { Buttons, LottieAnimations } from "@/components/domains/retaining/cancellation-of-subscription";
+import {
+  Buttons,
+  LottieAnimations,
+} from "@/components/domains/retaining/cancellation-of-subscription";
 import { TopSellingSvg } from "@/components/domains/retaining/images";
 import { Typography } from "@/components/ui";
 
 import styles from "./page.module.scss";
 
 export default async function CancellationOfSubscription() {
-    const t = await getTranslations("CancellationOfSubscription");
+  const t = await getTranslations("CancellationOfSubscription");
 
-    return (
-        <div className={styles.container}>
-            <LottieAnimations />
-            <Typography as="h1" weight="bold" className={styles.title}>
-                {t("title")}
-            </Typography>
-            <Typography as="p" align="left" className={styles.description}>
-                {t("description")}
-            </Typography>
-            <Offer
-                className={styles.offer}
-                classNameTitle={styles.titleOffer}
-                title={t("offer.title")}
-                oldPrice={t("offer.old-price")}
-                newPrice={t("offer.new-price")}
-                image={<TopSellingSvg className={styles.topSellingImage} />}
-                active={true}
-            />
-            <Buttons />
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.container}>
+      <LottieAnimations />
+      <Typography as="h1" weight="bold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="p" align="left" className={styles.description}>
+        {t("description")}
+      </Typography>
+      <Offer
+        className={styles.offer}
+        classNameTitle={styles.titleOffer}
+        title={t("offer.title")}
+        oldPrice={t("offer.old-price")}
+        newPrice={t("offer.new-price")}
+        image={<TopSellingSvg className={styles.topSellingImage} />}
+        active={true}
+      />
+      <Buttons />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/change-mind/page.tsx b/src/app/[locale]/(core)/retaining/change-mind/page.tsx
index a966b4b..d8a983c 100644
--- a/src/app/[locale]/(core)/retaining/change-mind/page.tsx
+++ b/src/app/[locale]/(core)/retaining/change-mind/page.tsx
@@ -1,36 +1,39 @@
 import { useTranslations } from "next-intl";
 
-import { ChangeMindAnswer, ChangeMindButtons } from "@/components/domains/retaining/change-mind";
+import {
+  ChangeMindAnswer,
+  ChangeMindButtons,
+} from "@/components/domains/retaining/change-mind";
 import { Typography } from "@/components/ui";
 
 export default function ChangeMind() {
-    const t = useTranslations("ChangeMind")
+  const t = useTranslations("ChangeMind");
 
-    const answers: ChangeMindAnswer[] = [
-        {
-            id: 1,
-            title: t("answers.more_chat_time"),
-        },
-        {
-            id: 2,
-            title: t("answers.more_personal_reports"),
-        },
-        {
-            id: 3,
-            title: t("answers.individual_plan"),
-        },
-        {
-            id: 4,
-            title: t("answers.other"),
-        }
-    ]
+  const answers: ChangeMindAnswer[] = [
+    {
+      id: 1,
+      title: t("answers.more_chat_time"),
+    },
+    {
+      id: 2,
+      title: t("answers.more_personal_reports"),
+    },
+    {
+      id: 3,
+      title: t("answers.individual_plan"),
+    },
+    {
+      id: 4,
+      title: t("answers.other"),
+    },
+  ];
 
-    return (
-        <>
-            <Typography size="xl" weight="bold" as="h1">
-                {t("title")}
-            </Typography>
-            <ChangeMindButtons answers={answers} />
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <Typography size="xl" weight="bold" as="h1">
+        {t("title")}
+      </Typography>
+      <ChangeMindButtons answers={answers} />
+    </>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/layout.tsx b/src/app/[locale]/(core)/retaining/layout.tsx
index 632fab0..8dc0c9b 100644
--- a/src/app/[locale]/(core)/retaining/layout.tsx
+++ b/src/app/[locale]/(core)/retaining/layout.tsx
@@ -5,51 +5,48 @@ import { ROUTES } from "@/shared/constants/client-routes";
 import { ERetainingFunnel } from "@/types";
 
 const stepperRoutes: Record<ERetainingFunnel, string[]> = {
-    [ERetainingFunnel.Red]: [
-        ROUTES.retainingFunnelAppreciateChoice(),
-        // ROUTES.retainingFunnelWhatReason(),
-        // ROUTES.retainingFunnelSecondChance(),
-        // ROUTES.retainingFunnelChangeMind(),
-        // ROUTES.retainingFunnelStopFor30Days(),
-        // ROUTES.retainingFunnelCancellationOfSubscription(),
-    ],
-    [ERetainingFunnel.Green]: [
-        ROUTES.retainingFunnelAppreciateChoice(),
-        // ROUTES.retainingFunnelWhatReason(),
-        // ROUTES.retainingFunnelStopFor30Days(),
-        // ROUTES.retainingFunnelChangeMind(),
-        // ROUTES.retainingFunnelSecondChance(),
-        // ROUTES.retainingFunnelCancellationOfSubscription(),
+  [ERetainingFunnel.Red]: [
+    ROUTES.retainingFunnelAppreciateChoice(),
+    // ROUTES.retainingFunnelWhatReason(),
+    // ROUTES.retainingFunnelSecondChance(),
+    // ROUTES.retainingFunnelChangeMind(),
+    // ROUTES.retainingFunnelStopFor30Days(),
+    // ROUTES.retainingFunnelCancellationOfSubscription(),
+  ],
+  [ERetainingFunnel.Green]: [
+    ROUTES.retainingFunnelAppreciateChoice(),
+    // ROUTES.retainingFunnelWhatReason(),
+    // ROUTES.retainingFunnelStopFor30Days(),
+    // ROUTES.retainingFunnelChangeMind(),
+    // ROUTES.retainingFunnelSecondChance(),
+    // ROUTES.retainingFunnelCancellationOfSubscription(),
+  ],
+  [ERetainingFunnel.Purple]: [
+    ROUTES.retainingFunnelAppreciateChoice(),
+    // ROUTES.retainingFunnelWhatReason(),
+    // ROUTES.retainingFunnelChangeMind(),
+    // ROUTES.retainingFunnelSecondChance(),
+    // ROUTES.retainingFunnelStopFor30Days(),
+    // ROUTES.retainingFunnelCancellationOfSubscription(),
+  ],
+  [ERetainingFunnel.Stay50]: [ROUTES.retainingFunnelStay50Done()],
+};
 
-    ],
-    [ERetainingFunnel.Purple]: [
-        ROUTES.retainingFunnelAppreciateChoice(),
-        // ROUTES.retainingFunnelWhatReason(),
-        // ROUTES.retainingFunnelChangeMind(),
-        // ROUTES.retainingFunnelSecondChance(),
-        // ROUTES.retainingFunnelStopFor30Days(),
-        // ROUTES.retainingFunnelCancellationOfSubscription(),
-    ],
-    [ERetainingFunnel.Stay50]: [
-        ROUTES.retainingFunnelStay50Done(),
-    ],
-}
+function StepperLayout({ children }: { children: React.ReactNode }) {
+  // const darkTheme = useSelector(selectors.selectDarkTheme);
+  // const mainRef = useRef<HTMLDivElement>(null);
+  // useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
+  //     location,
+  // ]);
+  // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
+  const retainingFunnel = ERetainingFunnel.Red;
 
-function StepperLayout({ children }: { children: React.ReactNode; }) {
-    // const darkTheme = useSelector(selectors.selectDarkTheme);
-    // const mainRef = useRef<HTMLDivElement>(null);
-    // useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
-    //     location,
-    // ]);
-    // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
-    const retainingFunnel = ERetainingFunnel.Red;
-
-    return (
-        <>
-            <RetainingStepper stepperRoutes={stepperRoutes[retainingFunnel]} />
-            {children}
-        </>
-    );
+  return (
+    <>
+      <RetainingStepper stepperRoutes={stepperRoutes[retainingFunnel]} />
+      {children}
+    </>
+  );
 }
 
 export default StepperLayout;
diff --git a/src/app/[locale]/(core)/retaining/plan-cancelled/page.module.scss b/src/app/[locale]/(core)/retaining/plan-cancelled/page.module.scss
index da2c1f7..28ef01d 100644
--- a/src/app/[locale]/(core)/retaining/plan-cancelled/page.module.scss
+++ b/src/app/[locale]/(core)/retaining/plan-cancelled/page.module.scss
@@ -1,27 +1,27 @@
 .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 80px 28px 0;
-    min-height: calc(100dvh - 124px);
-    position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 80px 28px 0;
+  min-height: calc(100dvh - 124px);
+  position: relative;
 }
 
 .title {
-    font-size: 27px;
-    line-height: 40px;
-    margin: 0;
+  font-size: 27px;
+  line-height: 40px;
+  margin: 0;
 }
 
 .icon {
-    font-size: 80px;
+  font-size: 80px;
 }
 
 .description {
-    color: #ACB0BA;
-    font-size: 17px;
-    line-height: 25px;
-    margin-top: 72px;
-}
\ No newline at end of file
+  color: #acb0ba;
+  font-size: 17px;
+  line-height: 25px;
+  margin-top: 72px;
+}
diff --git a/src/app/[locale]/(core)/retaining/plan-cancelled/page.tsx b/src/app/[locale]/(core)/retaining/plan-cancelled/page.tsx
index 0f0d563..5c8085f 100644
--- a/src/app/[locale]/(core)/retaining/plan-cancelled/page.tsx
+++ b/src/app/[locale]/(core)/retaining/plan-cancelled/page.tsx
@@ -6,20 +6,18 @@ import { Typography } from "@/components/ui";
 import styles from "./page.module.scss";
 
 export default async function PlanCancelled() {
-    const t = await getTranslations("PlanCancelled");
+  const t = await getTranslations("PlanCancelled");
 
-    return (
-        <div className={styles.container}>
-            <Typography as="h1" weight="semiBold" className={styles.title}>
-                {t("title")}
-            </Typography>
-            <span className={styles.icon}>
-                {t("icon")}
-            </span>
-            <PlanCancelledButton />
-            <Typography as="p" className={styles.description}>
-                {t("description")}
-            </Typography>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.container}>
+      <Typography as="h1" weight="semiBold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <span className={styles.icon}>{t("icon")}</span>
+      <PlanCancelledButton />
+      <Typography as="p" className={styles.description}>
+        {t("description")}
+      </Typography>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/second-chance/page.module.scss b/src/app/[locale]/(core)/retaining/second-chance/page.module.scss
index b7c940f..4bdc80d 100644
--- a/src/app/[locale]/(core)/retaining/second-chance/page.module.scss
+++ b/src/app/[locale]/(core)/retaining/second-chance/page.module.scss
@@ -1,13 +1,13 @@
 .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    // overflow-x: clip;
-    // padding-inline: 2px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // overflow-x: clip;
+  // padding-inline: 2px;
 }
 
 .title {
-    line-height: 150%;
-    margin-bottom: 24px;
-}
\ No newline at end of file
+  line-height: 150%;
+  margin-bottom: 24px;
+}
diff --git a/src/app/[locale]/(core)/retaining/second-chance/page.tsx b/src/app/[locale]/(core)/retaining/second-chance/page.tsx
index d34b430..febd02b 100644
--- a/src/app/[locale]/(core)/retaining/second-chance/page.tsx
+++ b/src/app/[locale]/(core)/retaining/second-chance/page.tsx
@@ -6,14 +6,14 @@ import { Typography } from "@/components/ui";
 import styles from "./page.module.scss";
 
 export default async function SecondChance() {
-    const t = await getTranslations("SecondChance");
+  const t = await getTranslations("SecondChance");
 
-    return (
-        <div className={styles.container}>
-            <Typography as="h1" weight="bold" size="xl" className={styles.title}>
-                {t("title")}
-            </Typography>
-            <SecondChancePage />
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.container}>
+      <Typography as="h1" weight="bold" size="xl" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <SecondChancePage />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/stay-50-done/page.tsx b/src/app/[locale]/(core)/retaining/stay-50-done/page.tsx
index 085a0c5..e7f3f43 100644
--- a/src/app/[locale]/(core)/retaining/stay-50-done/page.tsx
+++ b/src/app/[locale]/(core)/retaining/stay-50-done/page.tsx
@@ -5,21 +5,20 @@ import { ROUTES } from "@/shared/constants/client-routes";
 import { ELottieKeys } from "@/shared/constants/lottie";
 
 export default async function Stay50Done() {
-    const t = await getTranslations("Stay50Done");
+  const t = await getTranslations("Stay50Done");
 
-    const animationTexts = [
-        t("descriptions.1"),
-    ]
+  const animationTexts = [t("descriptions.1")];
 
-    return (
-        <AnimatedInfoScreen
-            lottieAnimation={<LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />}
-            title={t("title")}
-            animationTime={5000}
-            animationTexts={animationTexts}
-            buttonText={t("button")}
-            nextRoute={ROUTES.home()}
-        />
-
-    )
-}
\ No newline at end of file
+  return (
+    <AnimatedInfoScreen
+      lottieAnimation={
+        <LottieAnimation loadKey={ELottieKeys.loaderCheckMark} />
+      }
+      title={t("title")}
+      animationTime={5000}
+      animationTexts={animationTexts}
+      buttonText={t("button")}
+      nextRoute={ROUTES.home()}
+    />
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/stop-for-30-days/page.module.scss b/src/app/[locale]/(core)/retaining/stop-for-30-days/page.module.scss
index 6a40d42..37659ef 100644
--- a/src/app/[locale]/(core)/retaining/stop-for-30-days/page.module.scss
+++ b/src/app/[locale]/(core)/retaining/stop-for-30-days/page.module.scss
@@ -1,5 +1,5 @@
 .title {
-    font-size: 27px;
-    line-height: 40px;
-    margin: 0;
-}
\ No newline at end of file
+  font-size: 27px;
+  line-height: 40px;
+  margin: 0;
+}
diff --git a/src/app/[locale]/(core)/retaining/stop-for-30-days/page.tsx b/src/app/[locale]/(core)/retaining/stop-for-30-days/page.tsx
index 7719a99..e8f43b1 100644
--- a/src/app/[locale]/(core)/retaining/stop-for-30-days/page.tsx
+++ b/src/app/[locale]/(core)/retaining/stop-for-30-days/page.tsx
@@ -6,14 +6,14 @@ import { Typography } from "@/components/ui";
 import styles from "./page.module.scss";
 
 export default async function StopFor30Days() {
-    const t = await getTranslations("StopFor30Days");
+  const t = await getTranslations("StopFor30Days");
 
-    return (
-        <div>
-            <Typography as="h1" weight="bold" className={styles.title}>
-                {t("title")}
-            </Typography>
-            <StopFor30DaysButtons />
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <Typography as="h1" weight="bold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <StopFor30DaysButtons />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/subscription-stopped/page.module.scss b/src/app/[locale]/(core)/retaining/subscription-stopped/page.module.scss
index 5ca7f19..43e78d0 100644
--- a/src/app/[locale]/(core)/retaining/subscription-stopped/page.module.scss
+++ b/src/app/[locale]/(core)/retaining/subscription-stopped/page.module.scss
@@ -1,20 +1,20 @@
 .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 80px 28px 0;
-    min-height: calc(100dvh - 124px);
-    position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 80px 28px 0;
+  min-height: calc(100dvh - 124px);
+  position: relative;
 }
 
 .title {
-    font-size: 27px;
-    line-height: 40px;
-    margin: 0;
+  font-size: 27px;
+  line-height: 40px;
+  margin: 0;
 }
 
 .icon {
-    font-size: 80px;
-}
\ No newline at end of file
+  font-size: 80px;
+}
diff --git a/src/app/[locale]/(core)/retaining/subscription-stopped/page.tsx b/src/app/[locale]/(core)/retaining/subscription-stopped/page.tsx
index 536a841..5ee4356 100644
--- a/src/app/[locale]/(core)/retaining/subscription-stopped/page.tsx
+++ b/src/app/[locale]/(core)/retaining/subscription-stopped/page.tsx
@@ -6,17 +6,15 @@ import { Typography } from "@/components/ui";
 import styles from "./page.module.scss";
 
 export default async function SubscriptionStopped() {
-    const t = await getTranslations("SubscriptionStopped");
+  const t = await getTranslations("SubscriptionStopped");
 
-    return (
-        <div className={styles.container}>
-            <Typography as="h1" weight="semiBold" className={styles.title}>
-                {t("title")}
-            </Typography>
-            <span className={styles.icon}>
-                {t("icon")}
-            </span>
-            <SubscriptionStoppedButton />
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.container}>
+      <Typography as="h1" weight="semiBold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <span className={styles.icon}>{t("icon")}</span>
+      <SubscriptionStoppedButton />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(core)/retaining/what-reason/page.tsx b/src/app/[locale]/(core)/retaining/what-reason/page.tsx
index b936eba..a6c0c35 100644
--- a/src/app/[locale]/(core)/retaining/what-reason/page.tsx
+++ b/src/app/[locale]/(core)/retaining/what-reason/page.tsx
@@ -1,71 +1,74 @@
 import { useTranslations } from "next-intl";
 
-import { WhatReasonAnswer, WhatReasonsButtons } from "@/components/domains/retaining/what-reason";
+import {
+  WhatReasonAnswer,
+  WhatReasonsButtons,
+} from "@/components/domains/retaining/what-reason";
 import { Typography } from "@/components/ui";
 import { ERetainingFunnel } from "@/types";
 
 export default function WhatReason() {
-    const t = useTranslations("WhatReason")
+  const t = useTranslations("WhatReason");
 
-    const answers: WhatReasonAnswer[] = [
-        {
-            id: 1,
-            title: t("answers.no_promised_result"),
-            funnel: ERetainingFunnel.Red
-        },
-        {
-            id: 2,
-            title: t("answers.too_expensive"),
-            funnel: ERetainingFunnel.Red
-        },
-        {
-            id: 3,
-            title: t("answers.high_auto_payment"),
-            funnel: ERetainingFunnel.Red
-        },
-        {
-            id: 4,
-            title: t("answers.unexpected_fee"),
-            funnel: ERetainingFunnel.Red
-        },
-        {
-            id: 5,
-            title: t("answers.want_pause"),
-            funnel: ERetainingFunnel.Green
-        },
-        {
-            id: 6,
-            title: t("answers.service_not_as_expected"),
-            funnel: ERetainingFunnel.Red
-        },
-        {
-            id: 7,
-            title: t("answers.found_alternative"),
-            funnel: ERetainingFunnel.Red
-        },
-        {
-            id: 8,
-            title: t("answers.dislike_app"),
-            funnel: ERetainingFunnel.Purple
-        },
-        {
-            id: 9,
-            title: t("answers.hard_to_navigate"),
-            funnel: ERetainingFunnel.Purple
-        },
-        {
-            id: 10,
-            title: t("answers.other"),
-            funnel: ERetainingFunnel.Purple
-        }
-    ]
+  const answers: WhatReasonAnswer[] = [
+    {
+      id: 1,
+      title: t("answers.no_promised_result"),
+      funnel: ERetainingFunnel.Red,
+    },
+    {
+      id: 2,
+      title: t("answers.too_expensive"),
+      funnel: ERetainingFunnel.Red,
+    },
+    {
+      id: 3,
+      title: t("answers.high_auto_payment"),
+      funnel: ERetainingFunnel.Red,
+    },
+    {
+      id: 4,
+      title: t("answers.unexpected_fee"),
+      funnel: ERetainingFunnel.Red,
+    },
+    {
+      id: 5,
+      title: t("answers.want_pause"),
+      funnel: ERetainingFunnel.Green,
+    },
+    {
+      id: 6,
+      title: t("answers.service_not_as_expected"),
+      funnel: ERetainingFunnel.Red,
+    },
+    {
+      id: 7,
+      title: t("answers.found_alternative"),
+      funnel: ERetainingFunnel.Red,
+    },
+    {
+      id: 8,
+      title: t("answers.dislike_app"),
+      funnel: ERetainingFunnel.Purple,
+    },
+    {
+      id: 9,
+      title: t("answers.hard_to_navigate"),
+      funnel: ERetainingFunnel.Purple,
+    },
+    {
+      id: 10,
+      title: t("answers.other"),
+      funnel: ERetainingFunnel.Purple,
+    },
+  ];
 
-    return (
-        <>
-            <Typography size="xl" weight="bold" as="h1">
-                {t("title")}
-            </Typography>
-            <WhatReasonsButtons answers={answers} />
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <Typography size="xl" weight="bold" as="h1">
+        {t("title")}
+      </Typography>
+      <WhatReasonsButtons answers={answers} />
+    </>
+  );
+}
diff --git a/src/app/[locale]/auth/callback/route.ts b/src/app/[locale]/auth/callback/route.ts
index 3facaba..f5ac134 100644
--- a/src/app/[locale]/auth/callback/route.ts
+++ b/src/app/[locale]/auth/callback/route.ts
@@ -34,8 +34,14 @@ import { ROUTES } from "@/shared/constants/client-routes";
 
 function extractTrackingCookiesFromUrl(url: URL): Record<string, string> {
   const trackingCookieKeys = [
-    '_fbc', '_fbp', '_ym_uid', '_ym_d', '_ym_isad', '_ym_visorc',
-    'yandexuid', 'ymex'
+    "_fbc",
+    "_fbp",
+    "_ym_uid",
+    "_ym_d",
+    "_ym_isad",
+    "_ym_visorc",
+    "yandexuid",
+    "ymex",
   ];
 
   const cookies: Record<string, string> = {};
@@ -43,8 +49,8 @@ function extractTrackingCookiesFromUrl(url: URL): Record<string, string> {
   for (const [key, value] of url.searchParams.entries()) {
     if (
       trackingCookieKeys.includes(key) ||
-      key.startsWith('_ga') ||
-      key.startsWith('_gid')
+      key.startsWith("_ga") ||
+      key.startsWith("_gid")
     ) {
       cookies[key] = value;
     }
@@ -63,7 +69,10 @@ export async function GET(req: NextRequest) {
   const productPrice = searchParams.get("price");
   const currency = searchParams.get("currency");
 
-  const redirectUrl = new URL(`${ROUTES.payment()}`, process.env.NEXT_PUBLIC_APP_URL || "");
+  const redirectUrl = new URL(
+    `${ROUTES.payment()}`,
+    process.env.NEXT_PUBLIC_APP_URL || ""
+  );
   if (productId) redirectUrl.searchParams.set("productId", productId);
   if (placementId) redirectUrl.searchParams.set("placementId", placementId);
   if (paywallId) redirectUrl.searchParams.set("paywallId", paywallId);
diff --git a/src/app/[locale]/layout.module.scss b/src/app/[locale]/layout.module.scss
index 92be521..9061ae0 100644
--- a/src/app/[locale]/layout.module.scss
+++ b/src/app/[locale]/layout.module.scss
@@ -1,5 +1,5 @@
 .body {
-    max-width: 560px;
-    margin: 0 auto;
-    position: relative;
-}
\ No newline at end of file
+  max-width: 560px;
+  margin: 0 auto;
+  position: relative;
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 66751f7..ef925c5 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -5,14 +5,16 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { notFound } from "next/navigation";
 import { hasLocale, NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
 import clsx from "clsx";
 
 import { routing } from "@/i18n/routing";
+import { StoreProvider } from "@/providers/StoreProvider";
 
-import styles from "./layout.module.scss"
+import styles from "./layout.module.scss";
 
 export function generateStaticParams() {
-  return routing.locales.map((locale) => ({ locale }));
+  return routing.locales.map(locale => ({ locale }));
 }
 
 const inter = Inter({
@@ -23,7 +25,8 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: "WIT",
-  description: "More than 14M people have experienced the value of our products. Wit Apps, headquartered in Silicon Valley, California, is a tech company that constructs global enterprises specializing in mobile-first products. We believe in the transformative power of technology, capable of turning chaos into miracles, thus enhancing the lives of millions. To realize this vision, we integrate leading expertise in artificial intelligence with a deep understanding of consumer needs and lifestyle trends.",
+  description:
+    "More than 14M people have experienced the value of our products. Wit Apps, headquartered in Silicon Valley, California, is a tech company that constructs global enterprises specializing in mobile-first products. We believe in the transformative power of technology, capable of turning chaos into miracles, thus enhancing the lives of millions. To realize this vision, we integrate leading expertise in artificial intelligence with a deep understanding of consumer needs and lifestyle trends.",
 };
 
 export default async function RootLayout({
@@ -38,10 +41,14 @@ export default async function RootLayout({
     notFound();
   }
 
+  const messages = await getMessages();
+
   return (
     <html lang={locale}>
       <body className={clsx(inter.variable, styles.body)}>
-        <NextIntlClientProvider>{children}</NextIntlClientProvider>
+        <NextIntlClientProvider messages={messages}>
+          <StoreProvider>{children}</StoreProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );
diff --git a/src/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm.module.scss b/src/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm.module.scss
new file mode 100644
index 0000000..f5f77bb
--- /dev/null
+++ b/src/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm.module.scss
@@ -0,0 +1,9 @@
+.errorToast {
+  position: fixed;
+  bottom: calc(0dvh + 32px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 400px;
+  z-index: 1000;
+}
diff --git a/src/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm.tsx b/src/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm.tsx
new file mode 100644
index 0000000..5fa4bd3
--- /dev/null
+++ b/src/components/domains/compatibility/CompatibilityActionFieldsForm/CompatibilityActionFieldsForm.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { use, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+
+import { Skeleton, Toast, Typography } from "@/components/ui";
+import { ActionFieldsForm } from "@/components/widgets";
+import { startGeneration } from "@/entities/generations/actions";
+import { ROUTES } from "@/shared/constants/client-routes";
+import { ActionField } from "@/types";
+
+import styles from "./CompatibilityActionFieldsForm.module.scss";
+
+interface CompatibilityActionFieldsFormProps {
+  fields: Promise<ActionField[]>;
+  actionId: string;
+}
+
+export default function CompatibilityActionFieldsForm({
+  fields,
+  actionId,
+}: CompatibilityActionFieldsFormProps) {
+  const t = useTranslations("Compatibility");
+  const compatibilityActionFields = use(fields);
+  const router = useRouter();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const handleSubmit = async (
+    values: Record<string, string | number | null>
+  ) => {
+    setIsLoading(true);
+    setFormError(null);
+
+    const response = await startGeneration({
+      actionType: "compatibility",
+      actionId,
+      variables: values,
+    });
+
+    setIsLoading(false);
+
+    if (response?.data?.id) {
+      router.push(ROUTES.compatibilityResult(response.data.id));
+    }
+
+    if (response.error) {
+      setFormError(response.error);
+      return;
+    }
+  };
+
+  // Обработка случая, когда поля не загрузились
+  if (!compatibilityActionFields || compatibilityActionFields.length === 0) {
+    return (
+      <Typography as="p" size="sm" color="danger">
+        {t("error")}
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <ActionFieldsForm
+        fields={compatibilityActionFields}
+        onSubmit={handleSubmit}
+        buttonText={t("button")}
+        isLoading={isLoading}
+      />
+
+      {formError && (
+        <Toast variant="error" classNameContainer={styles.errorToast}>
+          <Typography as="p" size="sm" color="black">
+            {t("error")}
+          </Typography>
+        </Toast>
+      )}
+    </>
+  );
+}
+
+export function CompatibilityActionFieldsFormSkeleton() {
+  return <Skeleton style={{ height: "250px" }} />;
+}
diff --git a/src/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage.module.scss b/src/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage.module.scss
new file mode 100644
index 0000000..b95f85d
--- /dev/null
+++ b/src/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage.module.scss
@@ -0,0 +1,15 @@
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100dvh - 56px);
+}
+
+.title {
+  line-height: 30px;
+}
+
+.description {
+  line-height: 25px;
+  margin-top: 24px;
+}
diff --git a/src/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage.tsx b/src/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage.tsx
new file mode 100644
index 0000000..4f881bd
--- /dev/null
+++ b/src/components/domains/compatibility/CompatibilityResultPage/CompatibilityResultPage.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { Spinner, Toast, Typography } from "@/components/ui";
+import { useGenerationPolling } from "@/hooks/generation/useGenerationPolling";
+
+import styles from "./CompatibilityResultPage.module.scss";
+
+interface CompatibilityResultPageProps {
+  id: string;
+}
+
+export default function CompatibilityResultPage({
+  id,
+}: CompatibilityResultPageProps) {
+  const t = useTranslations("CompatibilityResult");
+  const { data, error, isLoading } = useGenerationPolling(id);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <Toast variant="error">{t("error")}</Toast>;
+  }
+
+  return (
+    <>
+      <Typography as="h1" size="xl" weight="semiBold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="p" size="lg" align="left" className={styles.description}>
+        {data?.result}
+      </Typography>
+    </>
+  );
+}
diff --git a/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.module.scss b/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.module.scss
index c0ed9a0..4fc3c05 100644
--- a/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.module.scss
+++ b/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.module.scss
@@ -1,63 +1,63 @@
 .card.card {
-    padding: 0;
-    min-width: 160px;
-    height: 235px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    position: relative;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
+  padding: 0;
+  min-width: 160px;
+  height: 235px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
 .content {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  & > * {
+    z-index: 1;
+  }
+
+  & > .info {
     width: 100%;
-    padding: 10px;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    align-items: flex-start;
+    gap: 6px;
 
-    &>* {
-        z-index: 1;
+    & > .name {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 6px;
+
+      & > .indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #34d399;
+      }
     }
 
-    &>.info {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 6px;
-
-        &>.name {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 6px;
-
-            &>.indicator {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background-color: #34D399;
-            }
-        }
-
-        &>.rating {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
+    & > .rating {
+      display: flex;
+      align-items: center;
+      gap: 4px;
     }
+  }
 }
 
 .shadow {
-    height: 160px;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(0deg, #174280 0%, rgba(0, 0, 0, 0) 70.95%);
-    // border: 1px solid rgba(229, 231, 235, 1);
-}
\ No newline at end of file
+  height: 160px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(0deg, #174280 0%, rgba(0, 0, 0, 0) 70.95%);
+  // border: 1px solid rgba(229, 231, 235, 1);
+}
diff --git a/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.tsx b/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.tsx
index 9087214..b65da6d 100644
--- a/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.tsx
+++ b/src/components/domains/dashboard/cards/AdviserCard/AdviserCard.tsx
@@ -1,47 +1,55 @@
-import { Button, Card, Stars, Typography } from "@/components/ui"
-import { Assistant } from "@/entities/dashboard/types"
+import { Button, Card, Stars, Typography } from "@/components/ui";
+import { Assistant } from "@/entities/dashboard/types";
 
-import styles from "./AdviserCard.module.scss"
+import styles from "./AdviserCard.module.scss";
 
 type AdviserCardProps = Assistant;
 
 export default function AdviserCard({
-    name,
-    photoUrl,
-    rating,
-    reviewCount,
-    description
+  name,
+  photoUrl,
+  rating,
+  reviewCount,
+  description,
 }: AdviserCardProps) {
-    return (
-        <Card className={styles.card} style={{ backgroundImage: `url(${photoUrl})` }}>
-            <div className={styles.content}>
-                <div className={styles.info}>
-                    <div className={styles.name}>
-                        <Typography color="white" weight="bold">
-                            {name}
-                        </Typography>
-                        <div className={styles.indicator} />
-                    </div>
-                    <Typography className={styles.description} color="white" weight="medium" size="xs">
-                        {description}
-                    </Typography>
-                    <div className={styles.rating}>
-                        <Typography color="white" weight="medium" size="xs">
-                            {rating}
-                        </Typography>
-                        <Stars rating={rating} />
-                        <Typography color="white" weight="medium" size="xs">
-                            ({reviewCount})
-                        </Typography>
-                    </div>
-                </div>
-                <Button size="sm">
-                    <Typography color="white" weight="bold" size="sm">
-                        CHAT | FREE
-                    </Typography>
-                </Button>
-            </div>
-            <div className={styles.shadow} />
-        </Card>
-    )
-}
\ No newline at end of file
+  return (
+    <Card
+      className={styles.card}
+      style={{ backgroundImage: `url(${photoUrl})` }}
+    >
+      <div className={styles.content}>
+        <div className={styles.info}>
+          <div className={styles.name}>
+            <Typography color="white" weight="bold">
+              {name}
+            </Typography>
+            <div className={styles.indicator} />
+          </div>
+          <Typography
+            className={styles.description}
+            color="white"
+            weight="medium"
+            size="xs"
+          >
+            {description}
+          </Typography>
+          <div className={styles.rating}>
+            <Typography color="white" weight="medium" size="xs">
+              {rating}
+            </Typography>
+            <Stars rating={rating} />
+            <Typography color="white" weight="medium" size="xs">
+              ({reviewCount})
+            </Typography>
+          </div>
+        </div>
+        <Button size="sm">
+          <Typography color="white" weight="bold" size="sm">
+            CHAT | FREE
+          </Typography>
+        </Button>
+      </div>
+      <div className={styles.shadow} />
+    </Card>
+  );
+}
diff --git a/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.module.scss b/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.module.scss
index 03d4b8f..657e5f6 100644
--- a/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.module.scss
+++ b/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.module.scss
@@ -1,21 +1,22 @@
 .card.card {
-    padding: 0;
-    min-width: 320px;
-    height: 110px;
-    overflow: hidden;
-    box-shadow: none;
-    display: flex;
-    flex-direction: row;
+  padding: 0;
+  min-width: 320px;
+  height: 110px;
+  overflow: hidden;
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
 }
 
 .content {
-    padding: 22px 16px 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  padding: 22px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .compatibilityImage {
-    object-fit: cover;
-    object-position: center;
-}
\ No newline at end of file
+  object-fit: cover;
+  object-position: center;
+}
diff --git a/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.tsx b/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.tsx
index 2680a9c..a8103d9 100644
--- a/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.tsx
+++ b/src/components/domains/dashboard/cards/CompatibilityCard/CompatibilityCard.tsx
@@ -9,33 +9,35 @@ import styles from "./CompatibilityCard.module.scss";
 type CompatibilityCardProps = CompatibilityAction;
 
 export default function CompatibilityCard({
-    imageUrl,
-    title,
-    type,
-    minutes
+  imageUrl,
+  title,
+  type,
+  minutes,
 }: CompatibilityCardProps) {
-    return (
-        <Card className={styles.card}>
-            <Image
-                className={styles.compatibilityImage}
-                src={imageUrl}
-                alt="Compatibility image"
-                width={120}
-                height={110}
-            />
-            <div className={styles.content}>
-                <Typography size="lg" weight="medium" align="left">
-                    {title}
-                </Typography>
-                <MetaLabel iconLabelProps={{
-                    iconProps: {
-                        name: IconName.Article,
-                    },
-                    children: <Typography color="secondary">{type}</Typography>
-                }}>
-                    {minutes} min
-                </MetaLabel>
-            </div>
-        </Card>
-    )
-}
\ No newline at end of file
+  return (
+    <Card className={styles.card}>
+      <Image
+        className={styles.compatibilityImage}
+        src={imageUrl}
+        alt="Compatibility image"
+        width={120}
+        height={110}
+      />
+      <div className={styles.content}>
+        <Typography size="lg" weight="medium" align="left">
+          {title}
+        </Typography>
+        <MetaLabel
+          iconLabelProps={{
+            iconProps: {
+              name: IconName.Article,
+            },
+            children: <Typography color="secondary">{type}</Typography>,
+          }}
+        >
+          {minutes} min
+        </MetaLabel>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.module.scss b/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.module.scss
index 3032cfb..7bf27aa 100644
--- a/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.module.scss
+++ b/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.module.scss
@@ -1,41 +1,41 @@
 .card.card {
-    padding: 0;
-    min-width: 342px;
-    height: 308px;
-    overflow: hidden;
-    box-shadow: none;
-    display: flex;
-    flex-direction: column;
+  padding: 0;
+  min-width: 342px;
+  height: 308px;
+  overflow: hidden;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .content {
-    padding: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  & > .info {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
 
-    &>.info {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-    }
-
-    &>.button {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background-color: #F5F5F7;
-        padding: 0;
-
-        &>.icon {
-            transform: rotate(180deg);
-        }
+  & > .button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #f5f5f7;
+    padding: 0;
+
+    & > .icon {
+      transform: rotate(180deg);
     }
+  }
 }
 
 .meditationImage {
-    object-fit: cover;
-    object-position: center;
-}
\ No newline at end of file
+  object-fit: cover;
+  object-position: center;
+}
diff --git a/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.tsx b/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.tsx
index e11de77..c02a48e 100644
--- a/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.tsx
+++ b/src/components/domains/dashboard/cards/MeditationCard/MeditationCard.tsx
@@ -4,56 +4,58 @@ import { Button, Card, Icon, MetaLabel, Typography } from "@/components/ui";
 import { IconName } from "@/components/ui/Icon/Icon";
 import { Meditation } from "@/entities/dashboard/types";
 
-import styles from "./MeditationCard.module.scss"
+import styles from "./MeditationCard.module.scss";
 
 type MeditationCardProps = Meditation;
 
 export default function MeditationCard({
-    imageUrl,
-    title,
-    type,
-    minutes
+  imageUrl,
+  title,
+  type,
+  minutes,
 }: MeditationCardProps) {
-    return (
-        <Card className={styles.card}>
-            <Image
-                className={styles.meditationImage}
-                src={imageUrl}
-                alt="Meditation image"
-                width={342}
-                height={216}
-            />
-            <div className={styles.content}>
-                <div className={styles.info}>
-                    <Typography size="lg" weight="regular">
-                        {title}
-                    </Typography>
-                    <MetaLabel iconLabelProps={{
-                        iconProps: {
-                            name: IconName.Video,
-                            color: "#6B7280",
-                            size: {
-                                width: 24,
-                                height: 25
-                            }
-                        },
-                        children: <Typography color="secondary">{type}</Typography>
-                    }}>
-                        {minutes} min
-                    </MetaLabel>
-                </div>
-                <Button className={styles.button}>
-                    <Icon
-                        className={styles.icon}
-                        name={IconName.Chevron}
-                        size={{
-                            width: 18,
-                            height: 18
-                        }}
-                        color="#A0A7B5"
-                    />
-                </Button>
-            </div>
-        </Card>
-    )
-}
\ No newline at end of file
+  return (
+    <Card className={styles.card}>
+      <Image
+        className={styles.meditationImage}
+        src={imageUrl}
+        alt="Meditation image"
+        width={342}
+        height={216}
+      />
+      <div className={styles.content}>
+        <div className={styles.info}>
+          <Typography size="lg" weight="regular">
+            {title}
+          </Typography>
+          <MetaLabel
+            iconLabelProps={{
+              iconProps: {
+                name: IconName.Video,
+                color: "#6B7280",
+                size: {
+                  width: 24,
+                  height: 25,
+                },
+              },
+              children: <Typography color="secondary">{type}</Typography>,
+            }}
+          >
+            {minutes} min
+          </MetaLabel>
+        </div>
+        <Button className={styles.button}>
+          <Icon
+            className={styles.icon}
+            name={IconName.Chevron}
+            size={{
+              width: 18,
+              height: 18,
+            }}
+            color="#A0A7B5"
+          />
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/domains/dashboard/cards/PalmCard/PalmCard.module.scss b/src/components/domains/dashboard/cards/PalmCard/PalmCard.module.scss
index 5b61165..6513c0b 100644
--- a/src/components/domains/dashboard/cards/PalmCard/PalmCard.module.scss
+++ b/src/components/domains/dashboard/cards/PalmCard/PalmCard.module.scss
@@ -1,33 +1,37 @@
 .card.card {
-    padding: 0;
-    min-width: 200px;
-    height: 227px;
-    overflow: hidden;
-    box-shadow: none;
-    display: flex;
-    flex-direction: column;
+  padding: 0;
+  min-width: 200px;
+  height: 227px;
+  overflow: hidden;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .image {
-    width: 100%;
-    height: 123px;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
-    display: flex;
-    justify-content: center;
+  width: 100%;
+  height: 123px;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  display: flex;
+  justify-content: center;
 }
 
 .content {
-    padding: 14px 12px 12px;
+  padding: 14px 12px 12px;
 
-    &>.info {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 15px;
-    }
+  & > .info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
 }
 
 .palmImage {
-    object-fit: cover;
-    object-position: center;
-}
\ No newline at end of file
+  object-fit: cover;
+  object-position: center;
+}
diff --git a/src/components/domains/dashboard/cards/PalmCard/PalmCard.tsx b/src/components/domains/dashboard/cards/PalmCard/PalmCard.tsx
index 15f7625..af8cdd9 100644
--- a/src/components/domains/dashboard/cards/PalmCard/PalmCard.tsx
+++ b/src/components/domains/dashboard/cards/PalmCard/PalmCard.tsx
@@ -9,42 +9,44 @@ import styles from "./PalmCard.module.scss";
 type PalmCardProps = PalmAction;
 
 export default function PalmCard({
-    imageUrl,
-    title,
-    type,
-    minutes
+  imageUrl,
+  title,
+  type,
+  minutes,
 }: PalmCardProps) {
-    return (
-        <Card className={styles.card}>
-            <div className={styles.image}>
-                <Image
-                    className={styles.palmImage}
-                    src={imageUrl}
-                    alt="Palm image"
-                    width={99}
-                    height={123}
-                />
-            </div>
-            <div className={styles.content}>
-                <div className={styles.info}>
-                    <Typography size="lg" align="left">
-                        {title}
-                    </Typography>
-                    <MetaLabel iconLabelProps={{
-                        iconProps: {
-                            name: IconName.Video,
-                            color: "#6B7280",
-                            size: {
-                                width: 24,
-                                height: 25
-                            }
-                        },
-                        children: <Typography color="secondary">{type}</Typography>
-                    }}>
-                        {minutes} min
-                    </MetaLabel>
-                </div>
-            </div>
-        </Card>
-    )
-}
\ No newline at end of file
+  return (
+    <Card className={styles.card}>
+      <div className={styles.image}>
+        <Image
+          className={styles.palmImage}
+          src={imageUrl}
+          alt="Palm image"
+          width={99}
+          height={123}
+        />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.info}>
+          <Typography size="lg" align="left">
+            {title}
+          </Typography>
+          <MetaLabel
+            iconLabelProps={{
+              iconProps: {
+                name: IconName.Video,
+                color: "#6B7280",
+                size: {
+                  width: 24,
+                  height: 25,
+                },
+              },
+              children: <Typography color="secondary">{type}</Typography>,
+            }}
+          >
+            {minutes} min
+          </MetaLabel>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/domains/dashboard/cards/index.ts b/src/components/domains/dashboard/cards/index.ts
index ae338cb..8f676e1 100644
--- a/src/components/domains/dashboard/cards/index.ts
+++ b/src/components/domains/dashboard/cards/index.ts
@@ -1,4 +1,4 @@
-export { default as AdviserCard } from './AdviserCard/AdviserCard';
-export { default as CompatibilityCard } from './CompatibilityCard/CompatibilityCard';
-export { default as MeditationCard } from './MeditationCard/MeditationCard';
-export { default as PalmCard } from './PalmCard/PalmCard';
\ No newline at end of file
+export { default as AdviserCard } from "./AdviserCard/AdviserCard";
+export { default as CompatibilityCard } from "./CompatibilityCard/CompatibilityCard";
+export { default as MeditationCard } from "./MeditationCard/MeditationCard";
+export { default as PalmCard } from "./PalmCard/PalmCard";
diff --git a/src/components/domains/dashboard/index.ts b/src/components/domains/dashboard/index.ts
index ad8c17f..baf283e 100644
--- a/src/components/domains/dashboard/index.ts
+++ b/src/components/domains/dashboard/index.ts
@@ -1,2 +1,2 @@
-export * from './cards';
-export * from './sections';
\ No newline at end of file
+export * from "./cards";
+export * from "./sections";
diff --git a/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.module.scss b/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.module.scss
index 3f6ed21..cceb1e1 100644
--- a/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.module.scss
+++ b/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.module.scss
@@ -1,10 +1,10 @@
 .sectionContent.sectionContent {
-    overflow-x: scroll;
-    width: calc(100% + 32px);
-    padding: 32px 16px;
-    margin: -32px -16px;
+  overflow-x: scroll;
+  width: calc(100% + 32px);
+  padding: 32px 16px;
+  margin: -32px -16px;
 }
 
 .skeleton.skeleton {
-    height: 486px;
-}
\ No newline at end of file
+  height: 486px;
+}
diff --git a/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.tsx b/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.tsx
index 9629daa..db2193d 100644
--- a/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.tsx
+++ b/src/components/domains/dashboard/sections/AdvisersSection/AdvisersSection.tsx
@@ -7,25 +7,29 @@ import { AdviserCard } from "../../cards";
 
 import styles from "./AdvisersSection.module.scss";
 
-export default function AdvisersSection({ promise }: { promise: Promise<Assistant[]> }) {
-    const assistants = use(promise);
-    const columns = Math.ceil(assistants?.length / 2);
+export default function AdvisersSection({
+  promise,
+}: {
+  promise: Promise<Assistant[]>;
+}) {
+  const assistants = use(promise);
+  const columns = Math.ceil(assistants?.length / 2);
 
-    return (
-        <Section title="Advisers" contentClassName={styles.sectionContent}>
-            <Grid columns={columns} className={styles.grid}>
-                {assistants.map((adviser) => (
-                    <AdviserCard key={adviser._id} {...adviser} />
-                ))}
-            </Grid>
-        </Section>
-    )
+  return (
+    <Section title="Advisers" contentClassName={styles.sectionContent}>
+      <Grid columns={columns} className={styles.grid}>
+        {assistants.map(adviser => (
+          <AdviserCard key={adviser._id} {...adviser} />
+        ))}
+      </Grid>
+    </Section>
+  );
 }
 
 export function AdvisersSectionSkeleton() {
-    return (
-        <Section title="Advisers" contentClassName={styles.sectionContent}>
-            <Skeleton className={styles.skeleton} />
-        </Section>
-    )
-}
\ No newline at end of file
+  return (
+    <Section title="Advisers" contentClassName={styles.sectionContent}>
+      <Skeleton className={styles.skeleton} />
+    </Section>
+  );
+}
diff --git a/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.module.scss b/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.module.scss
index cccd4d6..70d3dae 100644
--- a/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.module.scss
+++ b/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.module.scss
@@ -1,10 +1,10 @@
 .sectionContent.sectionContent {
-    overflow-x: scroll;
-    width: calc(100% + 32px);
-    padding: 16px;
-    margin: -16px;
+  overflow-x: scroll;
+  width: calc(100% + 32px);
+  padding: 16px;
+  margin: -16px;
 }
 
 .skeleton.skeleton {
-    height: 236px;
-}
\ No newline at end of file
+  height: 236px;
+}
diff --git a/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.tsx b/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.tsx
index 81df070..97fb780 100644
--- a/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.tsx
+++ b/src/components/domains/dashboard/sections/CompatibilitySection/CompatibilitySection.tsx
@@ -1,31 +1,42 @@
 import { use } from "react";
+import Link from "next/link";
 
 import { Grid, Section, Skeleton } from "@/components/ui";
 import { CompatibilityAction } from "@/entities/dashboard/types";
+import { ROUTES } from "@/shared/constants/client-routes";
 
 import { CompatibilityCard } from "../../cards";
 
 import styles from "./CompatibilitySection.module.scss";
 
-export default function CompatibilitySection({ promise }: { promise: Promise<CompatibilityAction[]> }) {
-    const compatibilities = use(promise);
-    const columns = Math.ceil(compatibilities?.length / 2);
+export default function CompatibilitySection({
+  promise,
+}: {
+  promise: Promise<CompatibilityAction[]>;
+}) {
+  const compatibilities = use(promise);
+  const columns = Math.ceil(compatibilities?.length / 2);
 
-    return (
-        <Section title="Compatibility" contentClassName={styles.sectionContent}>
-            <Grid columns={columns} className={styles.grid}>
-                {compatibilities.map((compatibility) => (
-                    <CompatibilityCard key={compatibility._id} {...compatibility} />
-                ))}
-            </Grid>
-        </Section>
-    )
+  return (
+    <Section title="Compatibility" contentClassName={styles.sectionContent}>
+      <Grid columns={columns} className={styles.grid}>
+        {compatibilities.map(compatibility => (
+          <Link
+            href={ROUTES.compatibility(compatibility._id)}
+            key={compatibility._id}
+          >
+            <CompatibilityCard key={compatibility._id} {...compatibility} />
+          </Link>
+        ))}
+      </Grid>
+    </Section>
+  );
 }
 
 export function CompatibilitySectionSkeleton() {
-    return (
-        <Section title="Compatibility" contentClassName={styles.sectionContent}>
-            <Skeleton className={styles.skeleton} />
-        </Section>
-    )
-}
\ No newline at end of file
+  return (
+    <Section title="Compatibility" contentClassName={styles.sectionContent}>
+      <Skeleton className={styles.skeleton} />
+    </Section>
+  );
+}
diff --git a/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.module.scss b/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.module.scss
index 049dc30..8192ebd 100644
--- a/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.module.scss
+++ b/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.module.scss
@@ -1,10 +1,10 @@
 .sectionContent.sectionContent {
-    overflow-x: scroll;
-    width: calc(100% + 32px);
-    padding: 16px;
-    margin: -16px;
+  overflow-x: scroll;
+  width: calc(100% + 32px);
+  padding: 16px;
+  margin: -16px;
 }
 
 .skeleton.skeleton {
-    height: 308px;
-}
\ No newline at end of file
+  height: 308px;
+}
diff --git a/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.tsx b/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.tsx
index b591a25..a2e70b5 100644
--- a/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.tsx
+++ b/src/components/domains/dashboard/sections/MeditationSection/MeditationSection.tsx
@@ -7,25 +7,29 @@ import { MeditationCard } from "../../cards";
 
 import styles from "./MeditationSection.module.scss";
 
-export default function MeditationSection({ promise }: { promise: Promise<Meditation[]> }) {
-    const meditations = use(promise);
-    const columns = meditations?.length;
+export default function MeditationSection({
+  promise,
+}: {
+  promise: Promise<Meditation[]>;
+}) {
+  const meditations = use(promise);
+  const columns = meditations?.length;
 
-    return (
-        <Section title="Meditations" contentClassName={styles.sectionContent}>
-            <Grid columns={columns} className={styles.grid}>
-                {meditations.map((meditation) => (
-                    <MeditationCard key={meditation._id} {...meditation} />
-                ))}
-            </Grid>
-        </Section>
-    )
+  return (
+    <Section title="Meditations" contentClassName={styles.sectionContent}>
+      <Grid columns={columns} className={styles.grid}>
+        {meditations.map(meditation => (
+          <MeditationCard key={meditation._id} {...meditation} />
+        ))}
+      </Grid>
+    </Section>
+  );
 }
 
 export function MeditationSectionSkeleton() {
-    return (
-        <Section title="Meditations" contentClassName={styles.sectionContent}>
-            <Skeleton className={styles.skeleton} />
-        </Section>
-    )
-}
\ No newline at end of file
+  return (
+    <Section title="Meditations" contentClassName={styles.sectionContent}>
+      <Skeleton className={styles.skeleton} />
+    </Section>
+  );
+}
diff --git a/src/components/domains/dashboard/sections/PalmSection/PalmSection.module.scss b/src/components/domains/dashboard/sections/PalmSection/PalmSection.module.scss
index d733474..63276e6 100644
--- a/src/components/domains/dashboard/sections/PalmSection/PalmSection.module.scss
+++ b/src/components/domains/dashboard/sections/PalmSection/PalmSection.module.scss
@@ -1,10 +1,10 @@
 .sectionContent.sectionContent {
-    overflow-x: scroll;
-    width: calc(100% + 32px);
-    padding: 16px;
-    margin: -16px;
+  overflow-x: scroll;
+  width: calc(100% + 32px);
+  padding: 16px;
+  margin: -16px;
 }
 
 .skeleton.skeleton {
-    height: 227px;
-}
\ No newline at end of file
+  height: 227px;
+}
diff --git a/src/components/domains/dashboard/sections/PalmSection/PalmSection.tsx b/src/components/domains/dashboard/sections/PalmSection/PalmSection.tsx
index cafd73c..6f76b95 100644
--- a/src/components/domains/dashboard/sections/PalmSection/PalmSection.tsx
+++ b/src/components/domains/dashboard/sections/PalmSection/PalmSection.tsx
@@ -1,31 +1,39 @@
 import { use } from "react";
+import Link from "next/link";
 
 import { Grid, Section, Skeleton } from "@/components/ui";
 import { PalmAction } from "@/entities/dashboard/types";
+import { ROUTES } from "@/shared/constants/client-routes";
 
 import { PalmCard } from "../../cards";
 
 import styles from "./PalmSection.module.scss";
 
-export default function PalmSection({ promise }: { promise: Promise<PalmAction[]> }) {
-    const palms = use(promise);
-    const columns = palms?.length;
+export default function PalmSection({
+  promise,
+}: {
+  promise: Promise<PalmAction[]>;
+}) {
+  const palms = use(promise);
+  const columns = palms?.length;
 
-    return (
-        <Section title="Palm" contentClassName={styles.sectionContent}>
-            <Grid columns={columns} className={styles.grid}>
-                {palms.map((palm) => (
-                    <PalmCard key={palm._id} {...palm} />
-                ))}
-            </Grid>
-        </Section>
-    )
+  return (
+    <Section title="Palm" contentClassName={styles.sectionContent}>
+      <Grid columns={columns} className={styles.grid}>
+        {palms.map(palm => (
+          <Link href={ROUTES.palmistryResult(palm._id)} key={palm._id}>
+            <PalmCard key={palm._id} {...palm} />
+          </Link>
+        ))}
+      </Grid>
+    </Section>
+  );
 }
 
 export function PalmSectionSkeleton() {
-    return (
-        <Section title="Palm" contentClassName={styles.sectionContent}>
-            <Skeleton className={styles.skeleton} />
-        </Section>
-    )
-}
\ No newline at end of file
+  return (
+    <Section title="Palm" contentClassName={styles.sectionContent}>
+      <Skeleton className={styles.skeleton} />
+    </Section>
+  );
+}
diff --git a/src/components/domains/dashboard/sections/index.ts b/src/components/domains/dashboard/sections/index.ts
index 4f32d9e..6fa52de 100644
--- a/src/components/domains/dashboard/sections/index.ts
+++ b/src/components/domains/dashboard/sections/index.ts
@@ -1,4 +1,16 @@
-export { default as AdvisersSection, AdvisersSectionSkeleton } from './AdvisersSection/AdvisersSection';
-export { default as CompatibilitySection, CompatibilitySectionSkeleton } from './CompatibilitySection/CompatibilitySection';
-export { default as MeditationSection, MeditationSectionSkeleton } from './MeditationSection/MeditationSection';
-export { default as PalmSection, PalmSectionSkeleton } from './PalmSection/PalmSection';
\ No newline at end of file
+export {
+  default as AdvisersSection,
+  AdvisersSectionSkeleton,
+} from "./AdvisersSection/AdvisersSection";
+export {
+  default as CompatibilitySection,
+  CompatibilitySectionSkeleton,
+} from "./CompatibilitySection/CompatibilitySection";
+export {
+  default as MeditationSection,
+  MeditationSectionSkeleton,
+} from "./MeditationSection/MeditationSection";
+export {
+  default as PalmSection,
+  PalmSectionSkeleton,
+} from "./PalmSection/PalmSection";
diff --git a/src/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage.module.scss b/src/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage.module.scss
new file mode 100644
index 0000000..b95f85d
--- /dev/null
+++ b/src/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage.module.scss
@@ -0,0 +1,15 @@
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100dvh - 56px);
+}
+
+.title {
+  line-height: 30px;
+}
+
+.description {
+  line-height: 25px;
+  margin-top: 24px;
+}
diff --git a/src/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage.tsx b/src/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage.tsx
new file mode 100644
index 0000000..36d67b1
--- /dev/null
+++ b/src/components/domains/palmistry/PalmistryResultPage/PalmistryResultPage.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { Spinner, Toast, Typography } from "@/components/ui";
+import { useGenerationPolling } from "@/hooks/generation/useGenerationPolling";
+
+import styles from "./PalmistryResultPage.module.scss";
+
+interface PalmistryResultPageProps {
+  id: string;
+}
+
+export default function PalmistryResultPage({ id }: PalmistryResultPageProps) {
+  const t = useTranslations("PalmistryResult");
+  const { data, error, isLoading } = useGenerationPolling(id);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <Toast variant="error">{t("error")}</Toast>;
+  }
+
+  return (
+    <>
+      <Typography as="h1" size="xl" weight="semiBold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="p" size="lg" align="left" className={styles.description}>
+        {data?.result}
+      </Typography>
+    </>
+  );
+}
diff --git a/src/components/domains/profile/Billing/Billing.module.scss b/src/components/domains/profile/Billing/Billing.module.scss
index 000cb18..3f4c323 100644
--- a/src/components/domains/profile/Billing/Billing.module.scss
+++ b/src/components/domains/profile/Billing/Billing.module.scss
@@ -1,35 +1,35 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
 }
 
 .button {
-    min-height: 60px;
+  min-height: 60px;
 }
 
 .credits {
-    padding: 16px;
-    background-color: #275ca7;
-    border-radius: 12px;
-    width: 100%;
+  padding: 16px;
+  background-color: #275ca7;
+  border-radius: 12px;
+  width: 100%;
 
-    .creditsDescription {
-        margin-top: 8px;
-    }
+  .creditsDescription {
+    margin-top: 8px;
+  }
 }
 
 .anyQuestions {
-    width: 100%;
+  width: 100%;
 
-    &>a {
-        color: #275ca7;
-        text-decoration: underline;
-    }
+  & > a {
+    color: #275ca7;
+    text-decoration: underline;
+  }
 }
 
 .subscriptionUpdate {
-    width: 100%;
-    line-height: 1.25;
-}
\ No newline at end of file
+  width: 100%;
+  line-height: 1.25;
+}
diff --git a/src/components/domains/profile/Billing/Billing.tsx b/src/components/domains/profile/Billing/Billing.tsx
index 77a558d..5f67799 100644
--- a/src/components/domains/profile/Billing/Billing.tsx
+++ b/src/components/domains/profile/Billing/Billing.tsx
@@ -1,64 +1,82 @@
-"use client;"
+"use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
 import { Button, Typography } from "@/components/ui";
+import { ROUTES } from "@/shared/constants/client-routes";
 
-import styles from "./Billing.module.scss"
+import styles from "./Billing.module.scss";
 
-interface IBillingProps {
-    onBilling: () => void;
-}
+function Billing() {
+  const t = useTranslations("Profile.billing");
+  const router = useRouter();
 
-function Billing({ onBilling }: IBillingProps) {
-    const t = useTranslations('Profile.billing');
+  const onBilling = () => {
+    router.push(ROUTES.profileSubscriptions());
+  };
 
-    return (
-        <div className={styles.container}>
-            <Button
-                className={styles.button}
-                onClick={onBilling}
+  return (
+    <div className={styles.container}>
+      <Button className={styles.button} onClick={onBilling}>
+        <Typography size="xl" color="white">
+          {t("billing_button")}
+        </Typography>
+      </Button>
+      <div className={styles.credits}>
+        <Typography as="p" weight="bold" color="white" align="left">
+          {t("credits.title", {
+            credits: String(0),
+          })}
+        </Typography>
+        <Typography
+          className={styles.creditsDescription}
+          as="p"
+          size="sm"
+          color="white"
+          align="left"
+        >
+          {t("credits.description")}
+        </Typography>
+      </div>
+      <Typography
+        as="p"
+        weight="bold"
+        align="left"
+        className={styles.anyQuestions}
+      >
+        {t.rich("any_questions", {
+          link: chunks => (
+            <Link
+              href="https://witapps.us/en#contact-us"
+              target="_blank"
+              rel="noopener noreferrer"
             >
-                <Typography size="xl" color="white">
-                    {t("billing_button")}
-                </Typography>
-            </Button>
-            <div className={styles.credits}>
-                <Typography as="p" weight="bold" color="white" align="left">
-                    {t("credits.title", {
-                        credits: String(0)
-                    })}
-                </Typography>
-                <Typography className={styles.creditsDescription} as="p" size="sm" color="white" align="left">
-                    {t("credits.description")}
-                </Typography>
-            </div>
-            <Typography as="p" weight="bold" align="left" className={styles.anyQuestions}>
-                {t.rich("any_questions", {
-                    link: (chunks) => (
-                        <Link
-                            href="https://witapps.us/en#contact-us"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {chunks}
-                        </Link>
-                    ),
-                    linkText: t("any_questions_link")
-                })}
+              {chunks}
+            </Link>
+          ),
+          linkText: t("any_questions_link"),
+        })}
+      </Typography>
+      <Typography
+        as="p"
+        align="left"
+        color="secondary"
+        className={styles.subscriptionUpdate}
+      >
+        {t.rich("subscription_update", {
+          bold: chunks => (
+            <Typography weight="bold" color="secondary">
+              {chunks}
             </Typography>
-            <Typography as="p" align="left" color="secondary" className={styles.subscriptionUpdate}>
-                {t.rich("subscription_update", {
-                    bold: (chunks) => (
-                        <Typography weight="bold" color="secondary">{chunks}</Typography>
-                    ),
-                    subscriptionUpdateBold: t("subscription_update_bold"),
-                    br: () => <br />
-                })}
-            </Typography>
-        </div>
-    )
+          ),
+          subscriptionUpdateBold: t("subscription_update_bold"),
+          br: () => <br />,
+        })}
+      </Typography>
+    </div>
+  );
 }
 
-export default Billing
\ No newline at end of file
+export default Billing;
diff --git a/src/components/domains/profile/LogOut/LogOut.module.scss b/src/components/domains/profile/LogOut/LogOut.module.scss
index 6c9a6b0..2e58d6c 100644
--- a/src/components/domains/profile/LogOut/LogOut.module.scss
+++ b/src/components/domains/profile/LogOut/LogOut.module.scss
@@ -1,3 +1,42 @@
 .button {
-    min-height: 60px;
-}
\ No newline at end of file
+  min-height: 60px;
+}
+
+.modal-container {
+  max-width: 290px;
+  padding: 24px 0px 0px;
+  overflow: hidden;
+}
+
+.modal-title {
+  font-weight: 600;
+  margin-bottom: 16px;
+  padding-inline: 24px;
+}
+
+.modal-description {
+  padding-inline: 24px;
+  text-align: center;
+}
+
+.modal-answers {
+  display: flex;
+  flex-direction: row;
+  margin-top: 24px;
+  border-top: 1px solid #d9d9d9;
+}
+
+.modal-answer {
+  width: 50%;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #275da7;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:first-child {
+    border-right: 1px solid #d9d9d9;
+  }
+}
diff --git a/src/components/domains/profile/LogOut/LogOut.tsx b/src/components/domains/profile/LogOut/LogOut.tsx
index ade778e..f51e282 100644
--- a/src/components/domains/profile/LogOut/LogOut.tsx
+++ b/src/components/domains/profile/LogOut/LogOut.tsx
@@ -1,24 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
-import { Button, Typography } from "@/components/ui";
+import { Button, Modal, Typography } from "@/components/ui";
+import { ROUTES } from "@/shared/constants/client-routes";
 
-import styles from "./LogOut.module.scss"
+import styles from "./LogOut.module.scss";
 
-interface ILogOutProps {
-    onLogout: () => void;
-}
+function LogOut() {
+  const t = useTranslations("Profile.log_out");
+  const router = useRouter();
 
-function LogOut({ onLogout }: ILogOutProps) {
-    const t = useTranslations('Profile.log_out');
+  const [logoutModal, setLogoutModal] = useState(false);
 
-    return (
-        <Button
-            className={styles.button}
-            onClick={onLogout}
+  const handleLogout = () => {
+    router.replace(ROUTES.home());
+    // logout();
+  };
+
+  const onLogoutButton = () => {
+    setLogoutModal(true);
+  };
+
+  return (
+    <>
+      <Button className={styles.button} onClick={onLogoutButton}>
+        <Typography size="xl" color="white">
+          {t("log_out_button")}
+        </Typography>
+      </Button>
+
+      {logoutModal && (
+        <Modal
+          isCloseButtonVisible={false}
+          open={!!logoutModal}
+          onClose={() => setLogoutModal(false)}
+          className={styles.modal}
+          modalClassName={styles["modal-container"]}
         >
-            <Typography size="xl" color="white">{t("log_out_button")}</Typography>
-        </Button>
-    )
+          <Typography as="h4" className={styles["modal-title"]}>
+            {t("modal.title")}
+          </Typography>
+          <p className={styles["modal-description"]}>
+            {t("modal.description")}
+          </p>
+          <div className={styles["modal-answers"]}>
+            <div className={styles["modal-answer"]} onClick={handleLogout}>
+              <p className={styles["modal-answer-text"]}>
+                {t("modal.log_out_button")}
+              </p>
+            </div>
+            <div
+              className={styles["modal-answer"]}
+              onClick={() => setLogoutModal(false)}
+            >
+              <p className={styles["modal-answer-text"]}>
+                {t("modal.stay_button")}
+              </p>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
 }
 
-export default LogOut
\ No newline at end of file
+export default LogOut;
diff --git a/src/components/domains/profile/ProfileBlock/ProfileBlock.module.scss b/src/components/domains/profile/ProfileBlock/ProfileBlock.module.scss
index eae24e2..d6e339d 100644
--- a/src/components/domains/profile/ProfileBlock/ProfileBlock.module.scss
+++ b/src/components/domains/profile/ProfileBlock/ProfileBlock.module.scss
@@ -1,23 +1,23 @@
 .container {
-    width: 100%;
-    padding: 16px;
+  width: 100%;
+  padding: 16px;
 }
 
 .header {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 
-    &>.title {
-        line-height: 32px;
-    }
+  & > .title {
+    line-height: 32px;
+  }
 
-    &>.description {
-        line-height: 20px;
-    }
+  & > .description {
+    line-height: 20px;
+  }
 }
 
 .content {
-    width: 100%;
-    margin-top: 16px;
-}
\ No newline at end of file
+  width: 100%;
+  margin-top: 16px;
+}
diff --git a/src/components/domains/profile/ProfileBlock/ProfileBlock.tsx b/src/components/domains/profile/ProfileBlock/ProfileBlock.tsx
index 63ba62a..67fefb0 100644
--- a/src/components/domains/profile/ProfileBlock/ProfileBlock.tsx
+++ b/src/components/domains/profile/ProfileBlock/ProfileBlock.tsx
@@ -1,31 +1,35 @@
-import { Typography } from "@/components/ui"
+import { Typography } from "@/components/ui";
 
-import styles from "./ProfileBlock.module.scss"
+import styles from "./ProfileBlock.module.scss";
 
 interface ProfileBlockProps {
-    title: string
-    description?: string
-    children?: React.ReactNode
+  title: string;
+  description?: string;
+  children?: React.ReactNode;
 }
 
 function ProfileBlock({ title, description, children }: ProfileBlockProps) {
-    return (
-        <section className={styles.container}>
-            <header className={styles.header}>
-                <Typography className={styles.title} as="h2" size="xl" weight="semiBold" align="left">
-                    {title}
-                </Typography>
-                {description &&
-                    <Typography className={styles.description} size="sm" align="left">
-                        {description}
-                    </Typography>
-                }
-            </header>
-            {!!children && <div className={styles.content}>
-                {children}
-            </div>}
-        </section>
-    )
+  return (
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Typography
+          className={styles.title}
+          as="h2"
+          size="xl"
+          weight="semiBold"
+          align="left"
+        >
+          {title}
+        </Typography>
+        {description && (
+          <Typography className={styles.description} size="sm" align="left">
+            {description}
+          </Typography>
+        )}
+      </header>
+      {!!children && <div className={styles.content}>{children}</div>}
+    </section>
+  );
 }
 
-export default ProfileBlock
\ No newline at end of file
+export default ProfileBlock;
diff --git a/src/components/domains/profile/ProfileInformation/ProfileInformation.module.scss b/src/components/domains/profile/ProfileInformation/ProfileInformation.module.scss
index af24f9d..b68266a 100644
--- a/src/components/domains/profile/ProfileInformation/ProfileInformation.module.scss
+++ b/src/components/domains/profile/ProfileInformation/ProfileInformation.module.scss
@@ -1,16 +1,16 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .input {
-    background-color: #f3f3f3;
-    min-height: 60px;
+  background-color: #f3f3f3;
+  min-height: 60px;
 }
 
 .inputContainer {
-    margin: 0;
-    width: 100%;
-    max-width: 100%;
-}
\ No newline at end of file
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+}
diff --git a/src/components/domains/profile/ProfileInformation/ProfileInformation.tsx b/src/components/domains/profile/ProfileInformation/ProfileInformation.tsx
index 426c2ea..169248c 100644
--- a/src/components/domains/profile/ProfileInformation/ProfileInformation.tsx
+++ b/src/components/domains/profile/ProfileInformation/ProfileInformation.tsx
@@ -1,41 +1,54 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 "use client";
 
-import { useTranslations } from "next-intl"
+import { use } from "react";
+import { useTranslations } from "next-intl";
 
-import { EmailInput, NameInput } from "@/components/ui";
+import { EmailInput, NameInput, Skeleton } from "@/components/ui";
+import { IUser } from "@/entities/user/types";
 
-import styles from "./ProfileInformation.module.scss"
+import styles from "./ProfileInformation.module.scss";
 
-function ProfileInformation() {
-    const t = useTranslations('Profile');
-    // const email = useSelector(selectors.selectEmail) || ""
-    // const name = useSelector(selectors.selectUser)?.username || ""
-    const email = "Test email"
-    const name = "Test name"
-
-    return (
-        <div className={styles.container}>
-            <EmailInput
-                name="email"
-                value={email}
-                placeholder={t("profile_information.email_placeholder")}
-                inputContainerClassName={styles.inputContainer}
-                inputClassName={styles.input}
-                onValid={() => { }}
-                onInvalid={() => { }}
-                readonly
-            />
-            <NameInput
-                value={name}
-                placeholder={t("profile_information.name_placeholder")}
-                inputContainerClassName={styles.inputContainer}
-                inputClassName={styles.input}
-                onValid={() => { }}
-                onInvalid={() => { }}
-                readonly
-            />
-        </div>
-    )
+interface IProfileInformationProps {
+  user: Promise<IUser>;
 }
 
-export default ProfileInformation
\ No newline at end of file
+export default function ProfileInformation({ user }: IProfileInformationProps) {
+  const userData = use(user);
+
+  const t = useTranslations("Profile");
+  const email = userData?.email || "";
+  const name = userData?.profile?.name || "";
+
+  return (
+    <div className={styles.container}>
+      <EmailInput
+        name="email"
+        value={email}
+        placeholder={t("profile_information.email_placeholder")}
+        inputContainerClassName={styles.inputContainer}
+        inputClassName={styles.input}
+        onValid={() => {}}
+        onInvalid={() => {}}
+        readonly
+      />
+      <NameInput
+        value={name}
+        placeholder={t("profile_information.name_placeholder")}
+        inputContainerClassName={styles.inputContainer}
+        inputClassName={styles.input}
+        onValid={() => {}}
+        onInvalid={() => {}}
+        readonly
+      />
+    </div>
+  );
+}
+
+export function ProfileInformationSkeleton() {
+  return (
+    <div className={styles.container}>
+      <Skeleton style={{ height: "136px" }} />
+    </div>
+  );
+}
diff --git a/src/components/domains/profile/index.ts b/src/components/domains/profile/index.ts
index 9a94b8d..5980eec 100644
--- a/src/components/domains/profile/index.ts
+++ b/src/components/domains/profile/index.ts
@@ -1,4 +1,7 @@
-export { default as Billing } from "./Billing/Billing"
-export { default as LogOut } from "./LogOut/LogOut"
-export { default as ProfileBlock } from "./ProfileBlock/ProfileBlock"
-export { default as ProfileInformation } from "./ProfileInformation/ProfileInformation"
\ No newline at end of file
+export { default as Billing } from "./Billing/Billing";
+export { default as LogOut } from "./LogOut/LogOut";
+export { default as ProfileBlock } from "./ProfileBlock/ProfileBlock";
+export {
+  default as ProfileInformation,
+  ProfileInformationSkeleton,
+} from "./ProfileInformation/ProfileInformation";
diff --git a/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.module.scss b/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.module.scss
index e69de29..dce7a5f 100644
--- a/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.module.scss
+++ b/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.module.scss
@@ -0,0 +1,41 @@
+.modal {
+  max-width: 290px;
+  padding: 24px 0px 0px;
+  overflow: hidden;
+}
+
+.title {
+  font-weight: 600;
+  margin-bottom: 16px;
+  padding-inline: 24px;
+}
+
+.description {
+  padding-inline: 24px;
+  text-align: center;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  margin-top: 24px;
+  border-top: 1px solid #d9d9d9;
+}
+
+.action.action {
+  width: 50%;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #275da7;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  background-color: transparent;
+  border-radius: 0px;
+
+  &:first-child {
+    border-right: 1px solid #d9d9d9;
+  }
+}
diff --git a/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.tsx b/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.tsx
index a04a822..c7f997f 100644
--- a/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.tsx
+++ b/src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { createContext, ReactNode,useContext, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
@@ -8,6 +14,7 @@ import { Button, Typography } from "@/components/ui";
 import Modal from "@/components/ui/Modal/Modal";
 import { UserSubscription } from "@/entities/subscriptions/types";
 import { ROUTES } from "@/shared/constants/client-routes";
+import { useRetainingActions } from "@/stores/retainingStore";
 
 import styles from "./CancelSubscriptionModalProvider.module.scss";
 
@@ -15,61 +22,67 @@ type Ctx = { open: (sub: UserSubscription) => void };
 
 const Context = createContext<Ctx | null>(null);
 export const useCancelSubscriptionModal = () => {
-    const ctx = useContext(Context);
-    if (!ctx) throw new Error("useCancelSubscriptionModal must be inside provider");
-    return ctx;
+  const ctx = useContext(Context);
+  if (!ctx)
+    throw new Error("useCancelSubscriptionModal must be inside provider");
+  return ctx;
 };
 
 export default function CancelSubscriptionModalProvider({
-    children,
+  children,
 }: {
-    children: ReactNode;
+  children: ReactNode;
 }) {
-    const router = useRouter()
-    const t = useTranslations("Subscriptions");
-    const [isOpen, setIsOpen] = useState(false);
+  const router = useRouter();
+  const t = useTranslations("Subscriptions");
+  const [isOpen, setIsOpen] = useState(false);
+  const { setCancellingSubscription } = useRetainingActions();
 
-    const close = () => setIsOpen(false);
-    const open = (
-        // _sub: UserSubscription
-    ) => {
-        setIsOpen(true)
-    };
+  const close = useCallback(() => setIsOpen(false), []);
+  const open = useCallback(
+    (subscription: UserSubscription) => {
+      setCancellingSubscription(subscription);
+      setIsOpen(true);
+    },
+    [setCancellingSubscription]
+  );
 
-    const handleCancel = () => {
-        router.push(ROUTES.retainingFunnelCancelSubscription())
-        close();
-    };
+  const handleCancel = useCallback(() => {
+    router.push(ROUTES.retainingFunnelCancelSubscription());
+    close();
+  }, [router, close]);
 
-    return (
-        <Context.Provider value={{ open }}>
-            {children}
+  const handleStay = useCallback(() => {
+    close();
+  }, [close]);
 
-            <Modal
-                open={!!isOpen}
-                onClose={close}
-                isCloseButtonVisible={false}
-                className={styles.overlay}
-                modalClassName={styles.modal}
-            >
-                <Typography as="h4" className={styles.title}>
-                    {t("modal.title")}
-                </Typography>
-                <Typography as="p" className={styles.description}>
-                    {t("modal.description")}
-                </Typography>
+  return (
+    <Context.Provider value={{ open }}>
+      {children}
 
-                <div className={styles.actions}>
-                    <Button onClick={handleCancel}>{t("modal.cancel_button")}</Button>
-                    <Button
-                        variant="secondary"
-                        onClick={close}
-                        className={styles.stayButton}
-                    >
-                        {t("modal.stay_button")}
-                    </Button>
-                </div>
-            </Modal>
-        </Context.Provider>
-    );
-}
\ No newline at end of file
+      <Modal
+        open={!!isOpen}
+        onClose={close}
+        isCloseButtonVisible={false}
+        className={styles.overlay}
+        modalClassName={styles.modal}
+      >
+        <Typography as="h4" className={styles.title}>
+          {t("modal.title")}
+        </Typography>
+        <Typography as="p" className={styles.description}>
+          {t("modal.description")}
+        </Typography>
+
+        <div className={styles.actions}>
+          <Button className={styles.action} onClick={handleCancel}>
+            {t("modal.cancel_button")}
+          </Button>
+          <Button onClick={handleStay} className={styles.action}>
+            {t("modal.stay_button")}
+          </Button>
+        </div>
+      </Modal>
+    </Context.Provider>
+  );
+}
diff --git a/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.module.scss b/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.module.scss
index 9d92177..02b59df 100644
--- a/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.module.scss
+++ b/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.module.scss
@@ -1,33 +1,33 @@
 .container {
-    width: 100%;
-    padding: 16px;
-    border-radius: 12px;
-    background-color: #f0f0f4;
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  padding: 16px;
+  border-radius: 12px;
+  background-color: #f0f0f4;
+  display: flex;
+  flex-direction: column;
 }
 
 .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 16px 8px;
-    border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px 8px;
+  border-bottom: 1px solid #e5e7eb;
 
-    &:last-child {
-        border-bottom: none;
-        padding-bottom: 0;
-    }
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
 }
 
 .cell {
-    width: 100%;
-    line-height: 1.5;
-    font-size: 16px;
-    color: #7d8785;
+  width: 100%;
+  line-height: 1.5;
+  font-size: 16px;
+  color: #7d8785;
 
-    &:nth-child(2) {
-        color: #090909;
-        font-weight: 600;
-    }
-}
\ No newline at end of file
+  &:nth-child(2) {
+    color: #090909;
+    font-weight: 600;
+  }
+}
diff --git a/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.tsx b/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.tsx
index a8bdd41..6107118 100644
--- a/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.tsx
+++ b/src/components/domains/profile/subscriptions/SubscriptionTable/SubscriptionTable.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import { useTranslations } from "next-intl";
 
-import { Button } from "@/components/ui";
+import { Button, Typography } from "@/components/ui";
 import { Table } from "@/components/widgets";
 import { UserSubscription } from "@/entities/subscriptions/types";
 import { formatDate } from "@/shared/utils/date";
@@ -12,36 +12,68 @@ import { Currency } from "@/types";
 
 import { useCancelSubscriptionModal } from "../CancelSubscriptionModalProvider/CancelSubscriptionModalProvider";
 
-import styles from "./SubscriptionTable.module.scss"
+import styles from "./SubscriptionTable.module.scss";
 
 interface ITableProps {
-    subscription: UserSubscription;
+  subscription: UserSubscription;
 }
 
 export default function SubscriptionTable({ subscription }: ITableProps) {
-    const t = useTranslations("Subscriptions");
-    const { open } = useCancelSubscriptionModal();
+  const t = useTranslations("Subscriptions");
+  const { open } = useCancelSubscriptionModal();
 
-    const tableData: ReactNode[][] = [
-        [t("table.subscription_type"), t(`table.subscription_type_value.${subscription.subscriptionType}`)],
-        [t("table.subscription_status"), t(`table.subscription_status_value.${subscription.subscriptionStatus}`, {
-            date: formatDate(subscription.cancellationDate) || ""
-        })],
-        [t("table.billing_period"), t(`table.billing_period_value.${subscription.billingPeriod}`)],
-        [t("table.last_payment_on"), formatDate(subscription.lastPaymentOn)],
-        [t("table.renewal_date"), formatDate(subscription.renewalDate)],
-        [t("table.renewal_amount"), getFormattedPrice(subscription.renewalAmount, Currency[subscription.currency])],
-    ]
+  const tableData: ReactNode[][] = useMemo(() => {
+    const data: ReactNode[][] = [
+      [
+        t("table.subscription_type"),
+        t(`table.subscription_type_value.${subscription.subscriptionType}`),
+      ],
+      [
+        t("table.subscription_status"),
+        t(
+          `table.subscription_status_value.${subscription.subscriptionStatus}`,
+          {
+            date: formatDate(subscription.cancellationDate) || "",
+          }
+        ),
+      ],
+      [
+        t("table.billing_period"),
+        t(`table.billing_period_value.${subscription.billingPeriod}`),
+      ],
+      [t("table.last_payment_on"), formatDate(subscription.lastPaymentOn)],
+      [t("table.renewal_date"), formatDate(subscription.renewalDate)],
+      [
+        t("table.renewal_amount"),
+        getFormattedPrice(
+          subscription.renewalAmount,
+          Currency[subscription.currency]
+        ),
+      ],
+    ];
 
     if (subscription.subscriptionStatus === "ACTIVE") {
-        tableData.push([
-            <Button key={"cancel-subscription"} className={styles.buttonCancel} onClick={() => open(subscription)}>
-                {t("table.cancel_subscription")}
-            </Button>
-        ])
+      data.push([
+        <Button
+          key={"cancel-subscription"}
+          className={styles.buttonCancel}
+          onClick={() => open(subscription)}
+        >
+          <Typography color="white">
+            {t("table.cancel_subscription")}
+          </Typography>
+        </Button>,
+      ]);
     }
 
-    return (
-        <Table data={tableData} />
-    )
-}
\ No newline at end of file
+    return data;
+  }, [subscription, t, open]);
+
+  // const tableData: ReactNode[][] = [
+  //     [t("table.subscription_status"), t(`table.subscription_status_value.${subscription.subscriptionStatus}`, {
+  //         date: formatDate(subscription.cancellationDate) || ""
+  //     })],
+  // ]
+
+  return <Table data={tableData} />;
+}
diff --git a/src/components/domains/profile/subscriptions/SubscriptionsList/SubscriptionsList.tsx b/src/components/domains/profile/subscriptions/SubscriptionsList/SubscriptionsList.tsx
index 440389a..34b45fd 100644
--- a/src/components/domains/profile/subscriptions/SubscriptionsList/SubscriptionsList.tsx
+++ b/src/components/domains/profile/subscriptions/SubscriptionsList/SubscriptionsList.tsx
@@ -1,37 +1,50 @@
 import { use } from "react";
 import { getTranslations } from "next-intl/server";
 
-import { Typography } from "@/components/ui";
-import { Skeleton } from "@/components/ui";
+import { Skeleton, Typography } from "@/components/ui";
 import { UserSubscription } from "@/entities/subscriptions/types";
 
 import SubscriptionTable from "../SubscriptionTable/SubscriptionTable";
 
-import styles from "./SubscriptionsList.module.scss"
+import styles from "./SubscriptionsList.module.scss";
 
-export default function SubscriptionsList(
-    { promise }: { promise: Promise<UserSubscription[]> }
-) {
-    const t = use(getTranslations("Subscriptions"));
+export default function SubscriptionsList({
+  promise,
+}: {
+  promise: Promise<UserSubscription[]>;
+}) {
+  const t = use(getTranslations("Subscriptions"));
 
-    const subscriptions = use(promise);
+  const subscriptions = use(promise);
 
-    if (subscriptions?.length === 0) {
-        return <div className={styles.container}>
-            <Typography as="h1" className={styles.title}>{t("title")}</Typography>
-            <Typography as="p" className={styles.description}>{t("no_subscriptions")}</Typography>
-        </div>
-    }
+  if (subscriptions?.length === 0) {
+    return (
+      <div className={styles.container}>
+        <Typography as="h1" className={styles.title}>
+          {t("title")}
+        </Typography>
+        <Typography as="p" className={styles.description}>
+          {t("no_subscriptions")}
+        </Typography>
+      </div>
+    );
+  }
 
-    return <>
-        {subscriptions.map((subscription) => {
-            return <SubscriptionTable subscription={subscription} key={subscription.id} />
-        })}
+  return (
+    <>
+      {subscriptions.map(subscription => {
+        return (
+          <SubscriptionTable
+            subscription={subscription}
+            key={subscription.id}
+          />
+        );
+      })}
+      {/* <SubscriptionTable subscription={subscriptions[0]} key={subscriptions[0].id} /> */}
     </>
+  );
 }
 
 export function SubscriptionsListSkeleton() {
-    return (
-        <Skeleton style={{ height: "300px" }} className={styles.skeleton} />
-    )
-}
\ No newline at end of file
+  return <Skeleton style={{ height: "300px" }} className={styles.skeleton} />;
+}
diff --git a/src/components/domains/profile/subscriptions/index.ts b/src/components/domains/profile/subscriptions/index.ts
index 36ac8a7..ec6ca9c 100644
--- a/src/components/domains/profile/subscriptions/index.ts
+++ b/src/components/domains/profile/subscriptions/index.ts
@@ -1,3 +1,5 @@
-
-export { default as CancelSubscriptionModalProvider } from "./CancelSubscriptionModalProvider/CancelSubscriptionModalProvider"
-export { default as SubscriptionsList, SubscriptionsListSkeleton } from "./SubscriptionsList/SubscriptionsList"
\ No newline at end of file
+export { default as CancelSubscriptionModalProvider } from "./CancelSubscriptionModalProvider/CancelSubscriptionModalProvider";
+export {
+  default as SubscriptionsList,
+  SubscriptionsListSkeleton,
+} from "./SubscriptionsList/SubscriptionsList";
diff --git a/src/components/domains/retaining/Button/Button.module.scss b/src/components/domains/retaining/Button/Button.module.scss
index b5d54a0..4a51f52 100644
--- a/src/components/domains/retaining/Button/Button.module.scss
+++ b/src/components/domains/retaining/Button/Button.module.scss
@@ -1,22 +1,25 @@
 .button {
-    min-height: 71px;
-    border-radius: 8px;
-    font-size: 28px;
-    font-weight: normal;
-    background: #F1F1F1;
-    background-blend-mode: color;
-    box-shadow: 2px 5px 2.5px #00000025;
-    color: #121620;
-    transition: background 0.3s ease, color 0.3s ease;
-    will-change: background, color;
-    padding: 25px;
-    line-height: 1;
-    word-break: break-word;
-    min-width: none;
+  min-height: 71px;
+  border-radius: 8px;
+  font-size: 28px;
+  font-weight: normal;
+  background: #f1f1f1;
+  background-blend-mode: color;
+  box-shadow: 2px 5px 2.5px #00000025;
+  color: #121620;
+  transition:
+    background 0.3s ease,
+    color 0.3s ease;
+  will-change: background, color;
+  padding: 25px;
+  line-height: 1;
+  word-break: break-word;
+  min-width: none;
 
-    &.active {
-        background: linear-gradient(to right, #057dd4 23%, #224e90 74%, #0c6bc3 94%),
-            linear-gradient(-45deg, #3a617120 9%, #21212120 72%, #21895120 96%);
-        color: #fff;
-    }
-}
\ No newline at end of file
+  &.active {
+    background:
+      linear-gradient(to right, #057dd4 23%, #224e90 74%, #0c6bc3 94%),
+      linear-gradient(-45deg, #3a617120 9%, #21212120 72%, #21895120 96%);
+    color: #fff;
+  }
+}
diff --git a/src/components/domains/retaining/Button/Button.tsx b/src/components/domains/retaining/Button/Button.tsx
index 38ca1d9..766a1f8 100644
--- a/src/components/domains/retaining/Button/Button.tsx
+++ b/src/components/domains/retaining/Button/Button.tsx
@@ -1,18 +1,23 @@
-import MainButton, { ButtonProps as MainButtonProps } from "@/components/ui/Button/Button";
+import MainButton, {
+  ButtonProps as MainButtonProps,
+} from "@/components/ui/Button/Button";
 
 import styles from "./Button.module.scss";
 
 interface ButtonProps extends MainButtonProps {
-    active?: boolean;
+  active?: boolean;
 }
 
 function Button(props: ButtonProps) {
-    const { active, ...buttonProps } = props;
-    return (
-        <MainButton {...buttonProps} className={`${styles.button} ${props.className} ${active ? styles.active : ""}`}>
-            {props.children}
-        </MainButton>
-    );
+  const { active, ...buttonProps } = props;
+  return (
+    <MainButton
+      {...buttonProps}
+      className={`${styles.button} ${props.className} ${active ? styles.active : ""}`}
+    >
+      {props.children}
+    </MainButton>
+  );
 }
 
 export default Button;
diff --git a/src/components/domains/retaining/CheckMark/CheckMark.tsx b/src/components/domains/retaining/CheckMark/CheckMark.tsx
index c1df10e..31d35a9 100644
--- a/src/components/domains/retaining/CheckMark/CheckMark.tsx
+++ b/src/components/domains/retaining/CheckMark/CheckMark.tsx
@@ -1,45 +1,75 @@
-
-
 interface CheckMarkProps {
-    active: boolean;
-    className?: string;
+  active: boolean;
+  className?: string;
 }
 
 function CheckMark({ active, className = "" }: CheckMarkProps) {
-    return (
-        <>
-            {active &&
-                <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clipPath="url(#clip0_49_4129)">
-                        <g clipPath="url(#clip1_49_4129)">
-                            <path d="M25 0H5C3.67392 0 2.40215 0.526784 1.46447 1.46447C0.526784 2.40215 0 3.67392 0 5V25C0 26.3261 0.526784 27.5979 1.46447 28.5355C2.40215 29.4732 3.67392 30 5 30H25C26.3261 30 27.5979 29.4732 28.5355 28.5355C29.4732 27.5979 30 26.3261 30 25V5C30 3.67392 29.4732 2.40215 28.5355 1.46447C27.5979 0.526784 26.3261 0 25 0ZM22.1667 11.0167L14.55 21.0167C14.3947 21.2184 14.1953 21.3818 13.9671 21.4945C13.7389 21.6072 13.4879 21.6661 13.2333 21.6667C12.9802 21.668 12.73 21.6117 12.5019 21.502C12.2738 21.3922 12.0736 21.232 11.9167 21.0333L7.85 15.85C7.71539 15.6771 7.61616 15.4794 7.55797 15.2681C7.49978 15.0569 7.48377 14.8362 7.51086 14.6188C7.53794 14.4013 7.60759 14.1913 7.71582 14.0008C7.82406 13.8103 7.96876 13.6429 8.14167 13.5083C8.49087 13.2365 8.93376 13.1145 9.37291 13.1692C9.59035 13.1963 9.80033 13.2659 9.99086 13.3742C10.1814 13.4824 10.3487 13.6271 10.4833 13.8L13.2 17.2667L19.5 8.93333C19.6335 8.75824 19.8002 8.61115 19.9906 8.50048C20.1809 8.3898 20.3912 8.3177 20.6094 8.2883C20.8276 8.25889 21.0495 8.27276 21.2624 8.3291C21.4752 8.38544 21.6749 8.48316 21.85 8.61667C22.0251 8.75018 22.1722 8.91687 22.2829 9.10722C22.3935 9.29758 22.4656 9.50786 22.495 9.72608C22.5244 9.9443 22.5106 10.1662 22.4542 10.379C22.3979 10.5919 22.3002 10.7916 22.1667 10.9667V11.0167Z" fill="#1172AC" />
-                        </g>
-                    </g>
-                    <rect x="1" y="1" width="28" height="28" rx="14" stroke="#1172AC" strokeWidth="2" />
-                    <defs>
-                        <clipPath id="clip0_49_4129">
-                            <rect width="30" height="30" rx="15" fill="white" />
-                        </clipPath>
-                        <clipPath id="clip1_49_4129">
-                            <rect width="30" height="30" rx="15" fill="white" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            }
-            {!active &&
-                <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clipPath="url(#clip0_49_4525)">
-                    </g>
-                    <rect x="1" y="1" width="28" height="28" rx="14" stroke="#1172AC" strokeWidth="2" />
-                    <defs>
-                        <clipPath id="clip0_49_4525">
-                            <rect width="30" height="30" rx="15" fill="white" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            }
-        </>
-    )
+  return (
+    <>
+      {active && (
+        <svg
+          className={className}
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clipPath="url(#clip0_49_4129)">
+            <g clipPath="url(#clip1_49_4129)">
+              <path
+                d="M25 0H5C3.67392 0 2.40215 0.526784 1.46447 1.46447C0.526784 2.40215 0 3.67392 0 5V25C0 26.3261 0.526784 27.5979 1.46447 28.5355C2.40215 29.4732 3.67392 30 5 30H25C26.3261 30 27.5979 29.4732 28.5355 28.5355C29.4732 27.5979 30 26.3261 30 25V5C30 3.67392 29.4732 2.40215 28.5355 1.46447C27.5979 0.526784 26.3261 0 25 0ZM22.1667 11.0167L14.55 21.0167C14.3947 21.2184 14.1953 21.3818 13.9671 21.4945C13.7389 21.6072 13.4879 21.6661 13.2333 21.6667C12.9802 21.668 12.73 21.6117 12.5019 21.502C12.2738 21.3922 12.0736 21.232 11.9167 21.0333L7.85 15.85C7.71539 15.6771 7.61616 15.4794 7.55797 15.2681C7.49978 15.0569 7.48377 14.8362 7.51086 14.6188C7.53794 14.4013 7.60759 14.1913 7.71582 14.0008C7.82406 13.8103 7.96876 13.6429 8.14167 13.5083C8.49087 13.2365 8.93376 13.1145 9.37291 13.1692C9.59035 13.1963 9.80033 13.2659 9.99086 13.3742C10.1814 13.4824 10.3487 13.6271 10.4833 13.8L13.2 17.2667L19.5 8.93333C19.6335 8.75824 19.8002 8.61115 19.9906 8.50048C20.1809 8.3898 20.3912 8.3177 20.6094 8.2883C20.8276 8.25889 21.0495 8.27276 21.2624 8.3291C21.4752 8.38544 21.6749 8.48316 21.85 8.61667C22.0251 8.75018 22.1722 8.91687 22.2829 9.10722C22.3935 9.29758 22.4656 9.50786 22.495 9.72608C22.5244 9.9443 22.5106 10.1662 22.4542 10.379C22.3979 10.5919 22.3002 10.7916 22.1667 10.9667V11.0167Z"
+                fill="#1172AC"
+              />
+            </g>
+          </g>
+          <rect
+            x="1"
+            y="1"
+            width="28"
+            height="28"
+            rx="14"
+            stroke="#1172AC"
+            strokeWidth="2"
+          />
+          <defs>
+            <clipPath id="clip0_49_4129">
+              <rect width="30" height="30" rx="15" fill="white" />
+            </clipPath>
+            <clipPath id="clip1_49_4129">
+              <rect width="30" height="30" rx="15" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      )}
+      {!active && (
+        <svg
+          className={className}
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clipPath="url(#clip0_49_4525)" />
+          <rect
+            x="1"
+            y="1"
+            width="28"
+            height="28"
+            rx="14"
+            stroke="#1172AC"
+            strokeWidth="2"
+          />
+          <defs>
+            <clipPath id="clip0_49_4525">
+              <rect width="30" height="30" rx="15" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      )}
+    </>
+  );
 }
 
-export default CheckMark
\ No newline at end of file
+export default CheckMark;
diff --git a/src/components/domains/retaining/Offer/Offer.module.scss b/src/components/domains/retaining/Offer/Offer.module.scss
index 3fc7758..6062ad7 100644
--- a/src/components/domains/retaining/Offer/Offer.module.scss
+++ b/src/components/domains/retaining/Offer/Offer.module.scss
@@ -1,62 +1,61 @@
 .container {
-    position: relative;
-    width: 100%;
-    border-radius: 14px;
-    padding: 72px 20px 65px;
+  position: relative;
+  width: 100%;
+  border-radius: 14px;
+  padding: 72px 20px 65px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0px 0px 10.2px 0px rgba(0, 0, 0, 0.25);
+  border: 4px solid transparent;
+  cursor: pointer;
+
+  &.active {
+    border: 4px solid rgba(17, 114, 172, 1);
+  }
+
+  & > .checkMark {
+    position: absolute;
+    top: 21px;
+    right: 14px;
+  }
+
+  & > .title {
+    margin: 0;
+    margin-top: 4px;
+    color: #323232;
+    font-size: 28px;
+  }
+
+  & > .description {
+    margin-top: 14px;
+    color: #323232;
+    font-size: 18px;
+    line-height: 1;
+    text-align: left;
+    padding-inline: 7px;
+  }
+
+  & > .priceContainer {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    box-shadow: 0px 0px 10.2px 0px rgba(0, 0, 0, 0.25);
-    border: 4px solid transparent;
-    cursor: pointer;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 33px;
 
-    &.active {
-        border: 4px solid rgba(17, 114, 172, 1)
+    & > .oldPrice {
+      color: #c4c4c4;
+      font-size: 28px;
+      line-height: 1;
+      text-align: center;
+      text-decoration: line-through;
     }
 
-    &>.checkMark {
-        position: absolute;
-        top: 21px;
-        right: 14px;
+    & > .newPrice {
+      color: #000;
+      font-size: 36px;
+      line-height: 1;
+      text-align: center;
     }
-
-    &>.title {
-        margin: 0;
-        margin-top: 4px;
-        color: #323232;
-        font-size: 28px;
-    }
-
-
-    &>.description {
-        margin-top: 14px;
-        color: #323232;
-        font-size: 18px;
-        line-height: 1;
-        text-align: left;
-        padding-inline: 7px;
-    }
-
-    &>.priceContainer {
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        gap: 10px;
-        margin-top: 33px;
-
-        &>.oldPrice {
-            color: #C4C4C4;
-            font-size: 28px;
-            line-height: 1;
-            text-align: center;
-            text-decoration: line-through;
-        }
-
-        &>.newPrice {
-            color: #000;
-            font-size: 36px;
-            line-height: 1;
-            text-align: center;
-        }
-    }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/components/domains/retaining/Offer/Offer.tsx b/src/components/domains/retaining/Offer/Offer.tsx
index ecf5227..762ffa8 100644
--- a/src/components/domains/retaining/Offer/Offer.tsx
+++ b/src/components/domains/retaining/Offer/Offer.tsx
@@ -11,53 +11,60 @@ import styles from "./Offer.module.scss";
 import { CheckMark } from "..";
 
 interface OfferProps {
-    title?: string | React.ReactNode;
-    description?: string;
-    oldPrice?: number | string;
-    newPrice?: number | string;
-    active?: boolean;
-    image?: React.ReactNode;
-    className?: string;
-    classNameTitle?: string;
-    onClick?: () => void;
+  title?: string | React.ReactNode;
+  description?: string;
+  oldPrice?: number | string;
+  newPrice?: number | string;
+  active?: boolean;
+  image?: React.ReactNode;
+  className?: string;
+  classNameTitle?: string;
+  onClick?: () => void;
 }
 
 function Offer({
-    title,
-    description,
-    oldPrice,
-    newPrice,
-    active = false,
-    onClick,
-    image,
-    className = "",
-    classNameTitle = ""
+  title,
+  description,
+  oldPrice,
+  newPrice,
+  active = false,
+  onClick,
+  image,
+  className = "",
+  classNameTitle = "",
 }: OfferProps) {
-    // const currency = useSelector(selectors.selectCurrency);
-    const currency = Currency.USD;
+  // const currency = useSelector(selectors.selectCurrency);
+  const currency = Currency.USD;
 
-    return (
-        <div className={clsx(styles.container, active && styles.active, className)} onClick={onClick}>
-            <CheckMark active={active} className={styles.checkMark} />
+  return (
+    <div
+      className={clsx(styles.container, active && styles.active, className)}
+      onClick={onClick}
+    >
+      <CheckMark active={active} className={styles.checkMark} />
 
-            {image}
+      {image}
 
-            <Typography as="h3" weight="bold" className={clsx(styles.title, classNameTitle)}>
-                {title}
-            </Typography>
-            <Typography as="p" className={styles.description}>
-                {description}
-            </Typography>
-            <div className={styles.priceContainer}>
-                <Typography weight="bold" className={styles.oldPrice}>
-                    {getFormattedPrice(Number(oldPrice), currency)}
-                </Typography>
-                <Typography weight="bold" className={styles.newPrice}>
-                    {getFormattedPrice(Number(newPrice), currency)}
-                </Typography>
-            </div>
-        </div>
-    )
+      <Typography
+        as="h3"
+        weight="bold"
+        className={clsx(styles.title, classNameTitle)}
+      >
+        {title}
+      </Typography>
+      <Typography as="p" className={styles.description}>
+        {description}
+      </Typography>
+      <div className={styles.priceContainer}>
+        <Typography weight="bold" className={styles.oldPrice}>
+          {getFormattedPrice(Number(oldPrice), currency)}
+        </Typography>
+        <Typography weight="bold" className={styles.newPrice}>
+          {getFormattedPrice(Number(newPrice), currency)}
+        </Typography>
+      </div>
+    </div>
+  );
 }
 
-export default Offer
\ No newline at end of file
+export default Offer;
diff --git a/src/components/domains/retaining/RetainingStepper/RetainingStepper.module.scss b/src/components/domains/retaining/RetainingStepper/RetainingStepper.module.scss
index d02dfcd..c3081d1 100644
--- a/src/components/domains/retaining/RetainingStepper/RetainingStepper.module.scss
+++ b/src/components/domains/retaining/RetainingStepper/RetainingStepper.module.scss
@@ -1,3 +1,3 @@
 .stepper-bar {
-    margin-bottom: 30px;
-}
\ No newline at end of file
+  margin-bottom: 30px;
+}
diff --git a/src/components/domains/retaining/RetainingStepper/RetainingStepper.tsx b/src/components/domains/retaining/RetainingStepper/RetainingStepper.tsx
index de62327..5380e7d 100644
--- a/src/components/domains/retaining/RetainingStepper/RetainingStepper.tsx
+++ b/src/components/domains/retaining/RetainingStepper/RetainingStepper.tsx
@@ -4,41 +4,40 @@ import { usePathname } from "next/navigation";
 
 import { StepperBar } from "@/components/layout";
 
-import styles from "./RetainingStepper.module.scss"
-
+import styles from "./RetainingStepper.module.scss";
 
 export default function RetainingStepper({
-    stepperRoutes,
+  stepperRoutes,
 }: {
-    stepperRoutes: string[];
+  stepperRoutes: string[];
 }) {
-    const pathname = usePathname();
+  const pathname = usePathname();
 
-    const getCurrentStep = () => {
-        // if ([
-        //     ROUTES.retainingFunnelPlanCancelled(),
-        //     ROUTES.retainingFunnelSubscriptionStopped(),
-        // ].some(route => location.pathname.includes(route))) {
-        //     return stepperRoutes[retainingFunnel].length;
-        // }
-        let index = 0;
-        for (const route of stepperRoutes) {
-            if (pathname.includes(route)) {
-                return index + 1;
-            }
-            index++;
-        }
-        return 0;
-    };
+  const getCurrentStep = () => {
+    // if ([
+    //     ROUTES.retainingFunnelPlanCancelled(),
+    //     ROUTES.retainingFunnelSubscriptionStopped(),
+    // ].some(route => location.pathname.includes(route))) {
+    //     return stepperRoutes[retainingFunnel].length;
+    // }
+    let index = 0;
+    for (const route of stepperRoutes) {
+      if (pathname.includes(route)) {
+        return index + 1;
+      }
+      index++;
+    }
+    return 0;
+  };
 
-    // логика выбора шага по pathname
-    return (
-        <StepperBar
-            length={stepperRoutes.length}
-            currentStep={getCurrentStep()}
-            // color={darkTheme ? "#B2BCFF" : "#353E75"}
-            color={"#353E75"}
-            className={styles["stepper-bar"]}
-        />
-    );
-}
\ No newline at end of file
+  // логика выбора шага по pathname
+  return (
+    <StepperBar
+      length={stepperRoutes.length}
+      currentStep={getCurrentStep()}
+      // color={darkTheme ? "#B2BCFF" : "#353E75"}
+      color={"#353E75"}
+      className={styles["stepper-bar"]}
+    />
+  );
+}
diff --git a/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.module.scss b/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.module.scss
index 059644e..ee51e3a 100644
--- a/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.module.scss
+++ b/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.module.scss
@@ -1,36 +1,36 @@
 .buttons {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
 
-    &>.button {
-        position: relative;
-        min-height: 110px;
-        display: grid;
-        grid-template-columns: 75px 1fr;
-        gap: 13px;
-        text-align: left;
-        border-radius: 21px;
+  & > .button {
+    position: relative;
+    min-height: 110px;
+    display: grid;
+    grid-template-columns: 75px 1fr;
+    gap: 13px;
+    text-align: left;
+    border-radius: 21px;
 
-        &>.buttonIcon {
-            font-size: 50px;
-            text-align: center;
-        }
-
-        &>.loaderContainer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: rgba(0, 0, 0, 0.2);
-            border-radius: 21px;
-            backdrop-filter: blur(3px);
-            transition: background-color 0.3s ease-in-out;
-        }
+    & > .buttonIcon {
+      font-size: 50px;
+      text-align: center;
     }
-}
\ No newline at end of file
+
+    & > .loaderContainer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 21px;
+      backdrop-filter: blur(3px);
+      transition: background-color 0.3s ease-in-out;
+    }
+  }
+}
diff --git a/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.tsx b/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.tsx
index f4410e5..ffb971b 100644
--- a/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.tsx
+++ b/src/components/domains/retaining/cancel-subscription/Buttons/Buttons.tsx
@@ -4,63 +4,73 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
-import { Spinner, Typography } from "@/components/ui"
+import { Spinner, Typography } from "@/components/ui";
 import { useLottie } from "@/hooks/lottie/useLottie";
 import { ROUTES } from "@/shared/constants/client-routes";
 import { ELottieKeys } from "@/shared/constants/lottie";
 
-import { RetainingButton } from "../.."
+import { RetainingButton } from "../..";
 
-import styles from "./Buttons.module.scss"
+import styles from "./Buttons.module.scss";
 
 export default function Buttons() {
-    const t = useTranslations("CancelSubscription");
-    const router = useRouter();
-    useLottie({
-        preloadKey: ELottieKeys.loaderCheckMark,
-    });
+  const t = useTranslations("CancelSubscription");
+  const router = useRouter();
+  useLottie({
+    preloadKey: ELottieKeys.loaderCheckMark,
+  });
 
-    const [activeButton, setActiveButton] = useState<"stay" | "cancel">();
-    const [isLoadingButton, setIsLoadingButton] = useState<"stay" | "cancel">();
+  const [activeButton, setActiveButton] = useState<"stay" | "cancel">();
+  const [isLoadingButton, setIsLoadingButton] = useState<"stay" | "cancel">();
 
-    const handleCancelButtonClick = () => {
-        if (isLoadingButton) return;
-        setActiveButton("cancel");
-        const timer = setTimeout(() => {
-            router.push(ROUTES.retainingFunnelAppreciateChoice());
-        }, 1000);
-        return () => clearTimeout(timer);
-    }
+  const handleCancelButtonClick = () => {
+    if (isLoadingButton) return;
+    setActiveButton("cancel");
+    const timer = setTimeout(() => {
+      router.push(ROUTES.retainingFunnelAppreciateChoice());
+    }, 1000);
+    return () => clearTimeout(timer);
+  };
 
-    const handleStayButtonClick = async () => {
-        if (isLoadingButton) return;
-        setActiveButton("stay");
-        setIsLoadingButton("stay");
+  const handleStayButtonClick = async () => {
+    if (isLoadingButton) return;
+    setActiveButton("stay");
+    setIsLoadingButton("stay");
 
-        // const response = await api.userSubscriptionAction({
-        //     subscriptionId: cancellingSubscriptionId,
-        //     action: "discount_50",
-        //     token
-        // });
-        // if (response.status === "success") {
-        //     dispatch(actions.retainingFunnel.setFunnel(ERetainingFunnel.Stay50));
-        // }
-        router.push(ROUTES.retainingFunnelStay50Done());
-    }
+    // const response = await api.userSubscriptionAction({
+    //     subscriptionId: cancellingSubscriptionId,
+    //     action: "discount_50",
+    //     token
+    // });
+    // if (response.status === "success") {
+    //     dispatch(actions.retainingFunnel.setFunnel(ERetainingFunnel.Stay50));
+    // }
+    router.push(ROUTES.retainingFunnelStay50Done());
+  };
 
-    return (
-        <div className={styles.buttons}>
-            <RetainingButton className={styles.button} active={activeButton === "stay"} onClick={handleStayButtonClick}>
-                {isLoadingButton === "stay" && <div className={styles.loaderContainer}>
-                    <Spinner />
-                </div>}
-                <Typography className={styles.buttonIcon}>🙋‍♀️</Typography>
-                {t("stay_button")}
-            </RetainingButton>
-            <RetainingButton className={styles.button} active={activeButton === "cancel"} onClick={handleCancelButtonClick}>
-                <Typography className={styles.buttonIcon}>🙅‍♀️</Typography>
-                {t("cancel_button")}
-            </RetainingButton>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.buttons}>
+      <RetainingButton
+        className={styles.button}
+        active={activeButton === "stay"}
+        onClick={handleStayButtonClick}
+      >
+        {isLoadingButton === "stay" && (
+          <div className={styles.loaderContainer}>
+            <Spinner />
+          </div>
+        )}
+        <Typography className={styles.buttonIcon}>🙋‍♀️</Typography>
+        {t("stay_button")}
+      </RetainingButton>
+      <RetainingButton
+        className={styles.button}
+        active={activeButton === "cancel"}
+        onClick={handleCancelButtonClick}
+      >
+        <Typography className={styles.buttonIcon}>🙅‍♀️</Typography>
+        {t("cancel_button")}
+      </RetainingButton>
+    </div>
+  );
+}
diff --git a/src/components/domains/retaining/cancel-subscription/index.ts b/src/components/domains/retaining/cancel-subscription/index.ts
index 636e7e8..40147ec 100644
--- a/src/components/domains/retaining/cancel-subscription/index.ts
+++ b/src/components/domains/retaining/cancel-subscription/index.ts
@@ -1 +1 @@
-export { default as Buttons } from "./Buttons/Buttons"
\ No newline at end of file
+export { default as Buttons } from "./Buttons/Buttons";
diff --git a/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.module.scss b/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.module.scss
index eca8bad..d841475 100644
--- a/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.module.scss
+++ b/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.module.scss
@@ -1,60 +1,60 @@
 .buttonOffer {
-    margin-top: 22px;
-    font-size: 28px;
-    line-height: 20px;
-    position: relative;
+  margin-top: 22px;
+  font-size: 28px;
+  line-height: 20px;
+  position: relative;
 
-    &>.loaderContainer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: inherit;
-        backdrop-filter: blur(3px);
-        transition: background-color 0.3s ease-in-out;
-    }
+  & > .loaderContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: inherit;
+    backdrop-filter: blur(3px);
+    transition: background-color 0.3s ease-in-out;
+  }
 }
 
 .buttonCancel {
-    color: #ACB0BA;
-    font-size: 16px;
-    line-height: 25px;
-    background: none;
-    border: none;
-    margin-top: 12px;
-    text-decoration: underline;
-    box-shadow: none;
-    padding: 0;
-    min-height: 0;
-    position: relative;
+  color: #acb0ba;
+  font-size: 16px;
+  line-height: 25px;
+  background: none;
+  border: none;
+  margin-top: 12px;
+  text-decoration: underline;
+  box-shadow: none;
+  padding: 0;
+  min-height: 0;
+  position: relative;
 
-    &>.loaderContainer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: inherit;
-        backdrop-filter: blur(3px);
-        transition: background-color 0.3s ease-in-out;
-    }
+  & > .loaderContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    backdrop-filter: blur(3px);
+    transition: background-color 0.3s ease-in-out;
+  }
 }
 
 .toast {
-    position: fixed;
-    bottom: calc(0dvh + 16px);
-    left: 0;
-    right: 0;
-    margin-inline: auto;
-    padding-inline: 16px;
-    max-width: 560px;
-    z-index: 1000;
-}
\ No newline at end of file
+  position: fixed;
+  bottom: calc(0dvh + 16px);
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  padding-inline: 16px;
+  max-width: 560px;
+  z-index: 1000;
+}
diff --git a/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.tsx b/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.tsx
index cdfbaf8..d436340 100644
--- a/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.tsx
+++ b/src/components/domains/retaining/cancellation-of-subscription/Buttons/Buttons.tsx
@@ -5,78 +5,83 @@ import { useTranslations } from "next-intl";
 
 import { Spinner, Toast } from "@/components/ui";
 
-import { RetainingButton } from "../.."
+import { RetainingButton } from "../..";
 
-import styles from "./Buttons.module.scss"
+import styles from "./Buttons.module.scss";
 // import { useRouter } from "next/navigation";
 // import { ROUTES } from "@/shared/constants/client-routes";
 
 export default function Buttons() {
-    const t = useTranslations("CancellationOfSubscription");
-    // const router = useRouter();
+  const t = useTranslations("CancellationOfSubscription");
+  // const router = useRouter();
 
-    const [isToastVisible, setIsToastVisible] = useState(false);
-    const [isLoadingOfferButton, setIsLoadingOfferButton] = useState<boolean>(false);
-    const [isLoadingCancelButton, setIsLoadingCancelButton] = useState<boolean>(false);
+  const [isToastVisible, setIsToastVisible] = useState(false);
+  const [isLoadingOfferButton, setIsLoadingOfferButton] =
+    useState<boolean>(false);
+  const [isLoadingCancelButton, setIsLoadingCancelButton] =
+    useState<boolean>(false);
 
-    const handleOfferButtonClick = async () => {
-        if (isLoadingOfferButton || isLoadingCancelButton) return;
-        setIsLoadingOfferButton(true);
-        // const response = await api.userSubscriptionAction({
-        //     subscriptionId: cancellingSubscriptionId,
-        //     action: "pause_60",
-        //     token
-        // });
-        // if (response.status === "success") {
-        //     navigate(routes.client.retainingFunnelSubscriptionStopped());
-        // }
-    }
+  const handleOfferButtonClick = async () => {
+    if (isLoadingOfferButton || isLoadingCancelButton) return;
+    setIsLoadingOfferButton(true);
+    // const response = await api.userSubscriptionAction({
+    //     subscriptionId: cancellingSubscriptionId,
+    //     action: "pause_60",
+    //     token
+    // });
+    // if (response.status === "success") {
+    //     navigate(routes.client.retainingFunnelSubscriptionStopped());
+    // }
+  };
 
-    const handleCancelClick = async () => {
-        if (isToastVisible || isLoadingOfferButton || isLoadingCancelButton) return;
-        setIsLoadingCancelButton(true);
-        setIsToastVisible(true);
-        // const response = await api.userSubscriptionAction({
-        //     subscriptionId: cancellingSubscriptionId,
-        //     action: "cancel",
-        //     token
-        // });
-        // if (response.status === "success") {
-        //     setIsToastVisible(true);
-        //     const timer = setTimeout(() => {
-        //         router.push(ROUTES.profile());
-        //     }, 7000);
-        //     return () => clearTimeout(timer);
-        // }
-    }
+  const handleCancelClick = async () => {
+    if (isToastVisible || isLoadingOfferButton || isLoadingCancelButton) return;
+    setIsLoadingCancelButton(true);
+    setIsToastVisible(true);
+    // const response = await api.userSubscriptionAction({
+    //     subscriptionId: cancellingSubscriptionId,
+    //     action: "cancel",
+    //     token
+    // });
+    // if (response.status === "success") {
+    //     setIsToastVisible(true);
+    //     const timer = setTimeout(() => {
+    //         router.push(ROUTES.profile());
+    //     }, 7000);
+    //     return () => clearTimeout(timer);
+    // }
+  };
 
-    return (
-        <>
-            <RetainingButton
-                className={styles.buttonOffer}
-                active={true}
-                onClick={handleOfferButtonClick}
-            >
-                {isLoadingOfferButton && <div className={styles.loaderContainer}>
-                    <Spinner />
-                </div>}
-                {t("offer_button")}
-            </RetainingButton>
-            <RetainingButton
-                className={styles.buttonCancel}
-                onClick={handleCancelClick}
-            >
-                {isLoadingCancelButton && <div className={styles.loaderContainer}>
-                    <Spinner />
-                </div>}
-                {t("cancel_button")}
-            </RetainingButton>
-            {isToastVisible && <Toast
-                classNameContainer={styles.toast}
-                variant="success"
-            >
-                Ваша подписка будет аннулирована!
-            </Toast>}
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <RetainingButton
+        className={styles.buttonOffer}
+        active={true}
+        onClick={handleOfferButtonClick}
+      >
+        {isLoadingOfferButton && (
+          <div className={styles.loaderContainer}>
+            <Spinner />
+          </div>
+        )}
+        {t("offer_button")}
+      </RetainingButton>
+      <RetainingButton
+        className={styles.buttonCancel}
+        onClick={handleCancelClick}
+      >
+        {isLoadingCancelButton && (
+          <div className={styles.loaderContainer}>
+            <Spinner />
+          </div>
+        )}
+        {t("cancel_button")}
+      </RetainingButton>
+      {isToastVisible && (
+        <Toast classNameContainer={styles.toast} variant="success">
+          Ваша подписка будет аннулирована!
+        </Toast>
+      )}
+    </>
+  );
+}
diff --git a/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.module.scss b/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.module.scss
index 8107735..2c13ef9 100644
--- a/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.module.scss
+++ b/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.module.scss
@@ -1,14 +1,14 @@
 .lottie-animation-container-confetti {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100dvw;
-    height: 100dvh;
-    z-index: 9999;
-    pointer-events: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+  z-index: 9999;
+  pointer-events: none;
 }
 
 .lottie-animation-confetti {
-    width: 100dvw;
-    height: 100dvh;
-}
\ No newline at end of file
+  width: 100dvw;
+  height: 100dvh;
+}
diff --git a/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.tsx b/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.tsx
index 3a71719..561db82 100644
--- a/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.tsx
+++ b/src/components/domains/retaining/cancellation-of-subscription/LottieAnimations/LottieAnimations.tsx
@@ -8,38 +8,38 @@ import { ELottieKeys } from "@/shared/constants/lottie";
 import styles from "./LottieAnimations.module.scss";
 
 export default function LottieAnimations() {
-    const [isConfettiVisible, setIsConfettiVisible] = useState(false);
+  const [isConfettiVisible, setIsConfettiVisible] = useState(false);
 
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setIsConfettiVisible(true);
-        }, 2000);
-        return () => clearTimeout(timer);
-    }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsConfettiVisible(true);
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, []);
 
-    return (
-        <>
-            <LottieAnimation
-                loadKey={ELottieKeys.loaderCheckMark2}
-                width={100}
-                height={100}
-                animationProps={{
-                    style: {
-                        backgroundColor: "transparent"
-                    }
-                }}
-            />
-            {isConfettiVisible &&
-                <LottieAnimation
-                    loadKey={ELottieKeys.confetti}
-                    width={"100dvw"}
-                    height={"100dvh"}
-                    className={styles["lottie-animation-container-confetti"]}
-                    animationProps={{
-                        className: styles["lottie-animation-confetti"]
-                    }}
-                />
-            }
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <LottieAnimation
+        loadKey={ELottieKeys.loaderCheckMark2}
+        width={100}
+        height={100}
+        animationProps={{
+          style: {
+            backgroundColor: "transparent",
+          },
+        }}
+      />
+      {isConfettiVisible && (
+        <LottieAnimation
+          loadKey={ELottieKeys.confetti}
+          width={"100dvw"}
+          height={"100dvh"}
+          className={styles["lottie-animation-container-confetti"]}
+          animationProps={{
+            className: styles["lottie-animation-confetti"],
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/domains/retaining/cancellation-of-subscription/index.ts b/src/components/domains/retaining/cancellation-of-subscription/index.ts
index 440a9c6..4647907 100644
--- a/src/components/domains/retaining/cancellation-of-subscription/index.ts
+++ b/src/components/domains/retaining/cancellation-of-subscription/index.ts
@@ -1,2 +1,2 @@
 export { default as Buttons } from "./Buttons/Buttons";
-export { default as LottieAnimations } from "./LottieAnimations/LottieAnimations";
\ No newline at end of file
+export { default as LottieAnimations } from "./LottieAnimations/LottieAnimations";
diff --git a/src/components/domains/retaining/change-mind/Buttons/Buttons.module.scss b/src/components/domains/retaining/change-mind/Buttons/Buttons.module.scss
index 57fb845..9031f7d 100644
--- a/src/components/domains/retaining/change-mind/Buttons/Buttons.module.scss
+++ b/src/components/domains/retaining/change-mind/Buttons/Buttons.module.scss
@@ -1,10 +1,10 @@
 .answers {
-    display: flex;
-    flex-direction: column;
-    margin-top: 24px;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 24px;
+  gap: 16px;
 
-    &>.answer {
-        border-radius: 21px;
-    }
-}
\ No newline at end of file
+  & > .answer {
+    border-radius: 21px;
+  }
+}
diff --git a/src/components/domains/retaining/change-mind/Buttons/Buttons.tsx b/src/components/domains/retaining/change-mind/Buttons/Buttons.tsx
index ba91a2b..ff78668 100644
--- a/src/components/domains/retaining/change-mind/Buttons/Buttons.tsx
+++ b/src/components/domains/retaining/change-mind/Buttons/Buttons.tsx
@@ -4,61 +4,61 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { ROUTES } from "@/shared/constants/client-routes";
-import { ERetainingFunnel } from "@/types"
+import { ERetainingFunnel } from "@/types";
 
 import { RetainingButton } from "../..";
 
-import styles from './Buttons.module.scss'
+import styles from "./Buttons.module.scss";
 
 export interface ChangeMindAnswer {
-    id: number;
-    title: string;
+  id: number;
+  title: string;
 }
 
 interface ButtonsProps {
-    answers: ChangeMindAnswer[]
+  answers: ChangeMindAnswer[];
 }
 
-export default function Buttons({
-    answers
-}: ButtonsProps) {
-    const router = useRouter()
-    // usePreloadImages([
-    //     images("vip_member.png")
-    // ])
+export default function Buttons({ answers }: ButtonsProps) {
+  const router = useRouter();
+  // usePreloadImages([
+  //     images("vip_member.png")
+  // ])
 
-    const [activeAnswer, setActiveAnswer] = useState<ChangeMindAnswer | null>(null);
-    // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
-    const retainingFunnel = ERetainingFunnel.Red;
+  const [activeAnswer, setActiveAnswer] = useState<ChangeMindAnswer | null>(
+    null
+  );
+  // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
+  const retainingFunnel = ERetainingFunnel.Red;
 
-    const handleNext = (answer: ChangeMindAnswer) => {
-        setActiveAnswer(answer);
-        const timer = setTimeout(() => {
-            if (retainingFunnel === ERetainingFunnel.Red) {
-                router.push(ROUTES.retainingFunnelStopFor30Days());
-            }
-            // if (retainingFunnel === ERetainingFunnel.Green) {
-            //     router.push(ROUTES.retainingFunnelSecondChance());
-            // }
-            // if (retainingFunnel === ERetainingFunnel.Purple) {
-            //     router.push(ROUTES.retainingFunnelSecondChance());
-            // }
-        }, 1000);
-        return () => clearTimeout(timer);
-    }
+  const handleNext = (answer: ChangeMindAnswer) => {
+    setActiveAnswer(answer);
+    const timer = setTimeout(() => {
+      if (retainingFunnel === ERetainingFunnel.Red) {
+        router.push(ROUTES.retainingFunnelStopFor30Days());
+      }
+      // if (retainingFunnel === ERetainingFunnel.Green) {
+      //     router.push(ROUTES.retainingFunnelSecondChance());
+      // }
+      // if (retainingFunnel === ERetainingFunnel.Purple) {
+      //     router.push(ROUTES.retainingFunnelSecondChance());
+      // }
+    }, 1000);
+    return () => clearTimeout(timer);
+  };
 
-    return (
-        <div className={styles.answers}>
-            {answers.map((answer) => (
-                <RetainingButton
-                    key={answer.id}
-                    className={styles.answer}
-                    active={activeAnswer?.id === answer.id}
-                    onClick={() => handleNext(answer)}
-                >
-                    {answer.title}
-                </RetainingButton>
-            ))}
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.answers}>
+      {answers.map(answer => (
+        <RetainingButton
+          key={answer.id}
+          className={styles.answer}
+          active={activeAnswer?.id === answer.id}
+          onClick={() => handleNext(answer)}
+        >
+          {answer.title}
+        </RetainingButton>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/domains/retaining/change-mind/index.tsx b/src/components/domains/retaining/change-mind/index.tsx
index 0263d29..ef92af8 100644
--- a/src/components/domains/retaining/change-mind/index.tsx
+++ b/src/components/domains/retaining/change-mind/index.tsx
@@ -1 +1,4 @@
-export { type ChangeMindAnswer,default as ChangeMindButtons } from "./Buttons/Buttons"
\ No newline at end of file
+export {
+  type ChangeMindAnswer,
+  default as ChangeMindButtons,
+} from "./Buttons/Buttons";
diff --git a/src/components/domains/retaining/images/EyeSvg/EyeSvg.tsx b/src/components/domains/retaining/images/EyeSvg/EyeSvg.tsx
index d675d27..5134d66 100644
--- a/src/components/domains/retaining/images/EyeSvg/EyeSvg.tsx
+++ b/src/components/domains/retaining/images/EyeSvg/EyeSvg.tsx
@@ -1,34 +1,70 @@
-import { SVGProps } from "react"
+import { SVGProps } from "react";
 
-
-type EyeSvgProps = SVGProps<SVGSVGElement>
+type EyeSvgProps = SVGProps<SVGSVGElement>;
 
 export default function EyeSvg(props: EyeSvgProps) {
-    return (
-        <svg width="210" height="210" viewBox="0 0 210 210" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <g clipPath="url(#clip0_49_4114)">
-                <rect x="0.00012207" width="210" height="210" fill="#D7A06B" />
-                <mask id="mask0_49_4114" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="-36" y="0" width="282" height="210">
-                    <g clipPath="url(#clip1_49_4114)">
-                        <path d="M-35.5913 105V210H105.18H245.951V105V0H105.18H-35.5913V105ZM106.197 22.2643C106.321 22.6652 106.351 33.7357 106.259 46.8722C106.105 70.5242 106.105 70.7709 105.488 70.7709C104.871 70.7709 104.871 70.5242 104.779 46.5639C104.748 33.2423 104.779 22.1718 104.871 21.9559C105.087 21.3392 105.951 21.5242 106.197 22.2643ZM70.9505 29.8194C71.4131 30.8062 73.1091 34.5066 74.7127 38.0837C76.3162 41.63 79.0298 47.5815 80.695 51.2819C82.3911 54.9824 84.673 60.1013 85.7831 62.6916C86.8933 65.2511 88.2809 68.4581 88.8668 69.7533C89.4527 71.0793 89.9153 72.3436 89.9153 72.6211C89.9153 73.2996 89.021 73.5771 88.5276 73.0529C88.3118 72.8062 86.5541 68.9515 84.6113 64.4493C82.6686 59.9471 78.3206 50.141 74.9594 42.6476C71.629 35.1234 68.9461 28.7709 69.0695 28.5242C69.4087 27.5991 70.1488 28.0925 70.9505 29.8194ZM142.277 28.8634C142.338 29.2026 140.303 33.9824 137.774 39.5022C135.246 44.9912 131.977 52.1145 130.528 55.3524C129.078 58.5595 126.92 63.37 125.748 65.9912C124.576 68.6123 123.373 71.2952 123.127 71.9427C122.572 73.2379 121.832 73.6696 121.215 73.0529C120.845 72.6828 120.937 72.3128 121.647 70.6167C122.757 68.0881 139.008 32.6564 140.889 28.7401C141.29 27.9075 142.153 27.9692 142.277 28.8634ZM53.9594 45.2996C54.1444 47.489 54.7611 49.5859 55.5629 50.7885C56.1488 51.7137 58.1223 52.7004 59.8492 52.9471C60.6201 53.0396 61.2369 53.2247 61.2369 53.348C61.2369 53.4714 60.3118 53.8106 59.1708 54.1189C55.6554 55.0749 54.4527 56.8326 53.9285 61.674C53.836 62.6916 53.651 63.5242 53.5585 63.5242C53.466 63.5242 53.1576 62.1057 52.8801 60.4097C52.5408 58.4361 52.14 56.9868 51.7699 56.4626C50.9682 55.3833 49.2413 54.4581 47.1752 53.9648C46.2501 53.7489 45.51 53.4714 45.51 53.348C45.51 53.2247 46.2501 53.0088 47.1444 52.9163C50.814 52.4537 52.325 50.6344 52.9726 46.0088C53.1884 44.4361 53.4351 43.1718 53.5585 43.1718C53.651 43.1718 53.836 44.1277 53.9594 45.2996ZM119.21 47.489C119.735 47.7973 119.951 46.6255 116.651 61.7357C115.572 66.6079 114.554 70.7709 114.369 70.9559C113.845 71.4802 113.043 71.0485 113.043 70.3084C113.043 69.9383 114.092 64.9736 115.356 59.2379C116.62 53.5022 117.669 48.5991 117.669 48.3524C117.669 47.9207 118.255 47.1806 118.594 47.1806C118.686 47.1806 118.964 47.3348 119.21 47.489ZM92.9682 47.9207C93.1532 48.1366 93.7083 50.2643 94.2325 52.6079C94.7259 54.9515 95.7743 59.793 96.5452 63.37C98.0871 70.4934 98.0871 70.6476 97.5629 71.1718C97.2853 71.4493 97.0695 71.4185 96.6378 71.0176C96.3294 70.7401 96.0827 70.3084 96.0827 70.0617C96.0827 69.815 95.1268 65.0661 93.9241 59.4846C92.7523 53.9339 91.7655 49.0617 91.7655 48.63C91.7655 47.489 92.3206 47.1498 92.9682 47.9207ZM152.514 52.1454C152.514 54.1498 154.426 56.4934 156.677 57.2952C157.603 57.6035 157.603 57.6035 156.801 57.6344C155.074 57.696 152.545 60.3788 152.514 62.1982C152.514 62.5683 152.391 62.9692 152.206 63.0617C152.052 63.1542 151.898 63.0308 151.898 62.7533C151.898 61.2731 149.77 58.652 147.92 57.8811L146.871 57.4493L147.951 57.0793C149.893 56.4317 151.898 53.6872 151.898 51.652C151.898 51.1894 152.021 50.9119 152.206 51.0352C152.391 51.1277 152.514 51.652 152.514 52.1454ZM40.1752 58.9295C45.14 62.7533 52.0783 68.3348 60.4351 75.2115C70.7655 83.7225 70.6113 83.5683 69.7787 84.4009C69.4087 84.7709 68.8228 84.4009 65.6774 81.8414C63.673 80.1762 60.8977 77.8634 59.5408 76.6916C58.184 75.5198 55.9638 73.7004 54.6069 72.6828C53.2501 71.6344 49.5805 68.7048 46.4351 66.1454C43.2897 63.5859 39.3118 60.4097 37.5849 59.0529C34.6862 56.8634 34.0078 56 34.6245 55.4141C34.7171 55.2907 34.9329 55.1982 35.0563 55.1982C35.1796 55.1982 37.4616 56.8943 40.1752 58.9295ZM176.197 55.5683C176.413 55.7841 176.567 56.0308 176.567 56.1542C176.567 56.2775 175.488 57.2643 174.193 58.3128C172.867 59.3921 168.118 63.2467 163.616 66.9163C159.114 70.5551 154.673 74.1322 153.748 74.8414C152.823 75.5507 149.77 78.0176 146.964 80.2996C144.158 82.6123 141.629 84.4934 141.321 84.4934C140.889 84.4934 140.766 84.3084 140.858 83.6608C140.951 82.7974 141.506 82.3348 155.475 71.2026C159.021 68.3656 164.973 63.6167 168.704 60.6255C172.435 57.6344 175.55 55.1982 175.642 55.1982C175.766 55.1982 175.981 55.3524 176.197 55.5683ZM75.4836 69.1982C80.9726 76.4758 81.2809 76.9075 80.7875 77.4317C80.4792 77.7709 80.1091 77.8943 79.8933 77.7709C79.4307 77.5242 68.021 62.3524 68.021 62.0132C68.021 61.8899 68.1135 61.674 68.2369 61.5507C68.977 60.8414 70.0254 61.9515 75.4836 69.1982ZM143.171 61.8282C143.202 61.9824 140.642 65.5903 137.466 69.8458C133.334 75.3965 131.514 77.5859 130.99 77.6476C130.466 77.7401 130.312 77.5859 130.312 77.1234C130.312 76.7533 132.84 73.0837 135.924 68.9207C140.858 62.2907 141.66 61.3348 142.307 61.4273C142.708 61.489 143.109 61.6432 143.171 61.8282ZM115.047 80.4537C126.766 83.0132 136.818 88.6255 147.951 98.7709C152.761 103.15 160.84 112.863 160.84 114.22C160.84 114.837 160.594 114.96 158.651 115.33L156.431 115.7L151.25 120.696L146.039 125.661L147.21 126.648C147.827 127.203 149.492 128.529 150.88 129.577C153.378 131.458 153.964 132.414 152.977 132.784C152.391 133.031 151.959 132.722 147.766 129.392L144.435 126.709L142.986 128.066C142.184 128.837 140.796 129.947 139.933 130.595C139.039 131.211 138.329 131.859 138.329 132.013C138.329 132.198 139.44 133.709 140.796 135.405C142.153 137.101 143.263 138.767 143.263 139.106C143.263 140.093 142.338 140.216 141.598 139.322C141.228 138.89 139.871 137.225 138.545 135.59L136.171 132.599L134.536 133.648C133.673 134.203 132.039 135.128 130.929 135.683C129.818 136.238 128.893 136.7 128.832 136.762C128.801 136.793 129.294 137.718 129.942 138.797C132.933 143.793 133.149 144.225 132.625 144.749C132.347 144.996 131.946 145.15 131.73 145.057C131.514 144.965 130.466 143.3 129.417 141.388C128.369 139.445 127.413 137.78 127.29 137.718C126.92 137.502 119.827 140.123 119.827 140.463C119.827 140.617 120.351 142.529 121.03 144.687C122.202 148.573 122.232 149.559 121.215 149.559C120.629 149.559 120.382 149.035 119.21 144.934C118.655 142.991 118.039 141.203 117.823 140.956C117.484 140.617 116.959 140.617 114.369 141.048C112.704 141.295 110.237 141.634 108.88 141.758L106.413 142.004L106.259 146.784C106.105 151.317 106.074 151.564 105.488 151.564C104.902 151.564 104.871 151.317 104.779 146.753L104.717 141.943L100.924 141.573C98.858 141.388 96.2986 141.018 95.2193 140.802C92.9065 140.308 93.1532 139.969 91.7655 145.242C90.7171 149.159 90.2237 149.991 89.4527 149.22C89.021 148.819 89.1135 148.295 90.1928 144.471C90.8712 142.097 91.3338 140.093 91.2413 140C91.1796 139.907 89.4219 139.291 87.3867 138.581C83.0695 137.101 83.7787 136.731 81.4351 141.758C80.325 144.132 79.8008 144.934 79.369 144.934C78.2897 144.934 78.4748 144.101 80.2633 140.308L82.0827 136.546L78.5056 134.758L74.9285 132.969L72.6157 135.59C68.7303 140.093 68.6994 140.123 68.1752 139.692C67.9285 139.476 67.7127 139.137 67.7127 138.921C67.7127 138.736 68.9461 137.101 70.488 135.344C71.999 133.586 73.2633 132.075 73.2633 131.982C73.2633 131.89 72.2457 131.088 71.0122 130.225C69.8096 129.33 68.2986 128.189 67.6818 127.696L66.5717 126.771L64.4131 128.529C63.2104 129.485 61.5761 130.78 60.7743 131.366C59.9417 131.952 59.1091 132.568 58.9241 132.722C58.4307 133.093 57.5364 132.722 57.5364 132.137C57.5364 131.89 59.2016 130.348 61.2369 128.744C63.2721 127.141 64.9373 125.753 64.9373 125.661C64.9373 125.599 64.1972 124.859 63.3338 124.057C62.4395 123.256 60.1576 121.097 58.2765 119.308C55.1312 116.286 54.6994 115.978 53.0959 115.608C52.14 115.392 51.1223 115.053 50.814 114.837C50.3206 114.467 50.3206 114.344 50.999 113.11C53.3734 108.577 62.9638 98.1233 69.2545 93.2203C78.1664 86.3128 88.466 81.6564 98.5188 80.022C102.281 79.4053 111.316 79.6211 115.047 80.4537ZM61.4836 90.7533C61.7303 92.0176 60.466 91.6476 54.7303 88.7797C51.5232 87.207 48.8404 85.7269 48.7787 85.511C48.6862 85.2952 48.8404 84.9251 49.0871 84.6476C49.5188 84.2467 50.1664 84.4934 55.4704 87.207C59.3558 89.1498 61.4219 90.3833 61.4836 90.7533ZM162.228 85.141C162.228 85.7885 161.519 86.2511 156.153 88.9648C150.417 91.8634 150.047 92.0176 149.554 91.5242C149.092 91.0617 149.092 90.9383 149.462 90.4758C149.986 89.8282 161.426 84.1233 161.889 84.2775C162.074 84.3392 162.228 84.7401 162.228 85.141ZM35.303 94.6079C51.1223 99.141 52.4175 99.6035 51.4615 100.559C51.2149 100.806 47.206 99.7885 35.8889 96.5507C15.814 90.815 17.4483 91.3392 17.4483 90.6916C17.4483 89.8899 17.7875 89.674 18.6818 89.8899C19.1135 89.9824 26.5761 92.1101 35.303 94.6079ZM193.435 91.0308C193.343 91.2775 190.629 92.2026 186.867 93.2511C183.321 94.2379 175.858 96.3656 170.277 97.9383C164.726 99.5418 159.977 100.837 159.761 100.837C159.299 100.837 159.021 100.251 159.237 99.6652C159.391 99.2335 160.501 98.8943 174.871 94.8546C180.638 93.2511 187.021 91.4626 189.056 90.8766C192.078 90.0132 192.849 89.8899 193.188 90.2291C193.404 90.4449 193.528 90.815 193.435 91.0308ZM36.1356 111.63C36.7215 112.123 37.3999 112.555 37.6466 112.555C37.8933 112.555 38.1091 112.678 38.1091 112.863C38.1091 113.018 37.8933 113.172 37.6157 113.172C36.3206 113.172 34.4395 115.361 34.3779 116.934C34.3779 117.396 34.2237 117.181 33.9461 116.286C33.4527 114.744 32.5585 113.696 31.2942 113.141L30.369 112.771L31.5717 112.247C32.8668 111.661 34.0695 110.026 34.1312 108.824C34.1312 108.269 34.2545 108.423 34.5937 109.379C34.8712 110.088 35.5497 111.106 36.1356 111.63ZM178.232 112.802C178.818 113.943 180.607 115.238 182.056 115.515C183.105 115.731 183.136 116.256 182.087 116.256C181.1 116.256 179.127 117.396 178.448 118.383C178.078 118.877 177.616 119.987 177.4 120.881L176.999 122.454L176.629 120.881C176.413 119.987 175.981 118.877 175.611 118.383C174.933 117.396 172.959 116.256 171.973 116.256C170.801 116.256 171.047 115.762 172.435 115.392C174.47 114.837 176.105 113.079 176.598 110.828L176.999 109.04L177.338 110.427C177.554 111.167 177.924 112.247 178.232 112.802ZM52.2016 125.075C52.2942 125.322 52.1708 125.722 51.9549 125.938C51.7082 126.154 49.1796 126.987 46.2809 127.758C38.7567 129.793 33.0519 131.366 25.1576 133.648C18.2501 135.59 17.4483 135.714 17.4483 134.573C17.4483 134.326 17.7567 133.987 18.1576 133.833C18.5276 133.678 24.8801 131.89 32.2501 129.855C39.6201 127.819 46.7743 125.815 48.1312 125.383C51.0915 124.489 51.9549 124.427 52.2016 125.075ZM165.343 126.093C168.21 126.925 175.55 129.022 181.655 130.749C187.761 132.507 192.942 134.079 193.158 134.295C193.466 134.573 193.466 134.727 193.158 135.159C192.664 135.775 193.62 136.022 175.025 130.656C167.655 128.529 161.025 126.648 160.316 126.463C159.391 126.216 158.99 125.938 158.99 125.537C158.99 124.921 159.237 124.581 159.761 124.581C159.946 124.581 162.444 125.26 165.343 126.093ZM45.2325 145.088C45.4483 147 45.7875 148.665 46.0034 148.943C46.3734 149.313 46.5585 149.251 47.4219 148.48L48.4087 147.555L47.8845 148.388C47.0519 149.744 47.206 150.084 48.7787 150.3C49.5805 150.392 50.6906 150.485 51.2765 150.485C52.9726 150.485 52.1708 151.009 49.858 151.41C47.2369 151.841 46.7435 152.304 47.5144 153.476L48.0695 154.339L47.2369 153.568C46.4351 152.828 46.3734 152.828 45.9726 153.352C45.5717 153.907 44.8933 157.731 44.8933 159.427C44.8933 159.921 44.7699 160.383 44.6157 160.476C44.3382 160.661 44.1532 159.674 43.7831 156.128C43.5364 153.692 43.0431 153.198 41.9021 154.216L41.0695 154.956L41.7479 153.969C42.1179 153.445 42.4263 152.859 42.4263 152.643C42.4263 152.15 40.6994 151.533 38.7259 151.286C36.0739 150.947 36.0122 150.639 38.4792 150.238C41.9329 149.683 43.0431 149.313 43.3206 148.542C43.4748 148.141 43.6906 146.476 43.814 144.78C43.9373 143.084 44.1223 141.573 44.184 141.449C44.5541 140.802 44.8933 141.943 45.2325 145.088ZM69.1312 145.705C69.6862 146.167 69.6554 146.229 68.021 147.74C67.0959 148.604 60.5585 154.247 53.5276 160.291C46.4968 166.304 40.3294 171.608 39.8668 172.04C39.1884 172.656 38.9109 172.749 38.4792 172.502C38.2016 172.317 37.9549 172.009 37.9549 171.855C37.9549 171.546 40.5452 169.233 51.6774 159.581C54.6069 157.022 59.51 152.767 62.5629 150.084C65.6157 147.432 68.206 145.242 68.3294 145.242C68.4219 145.242 68.7919 145.458 69.1312 145.705ZM144.713 147.062C145.854 148.079 149.061 150.824 151.774 153.167C175.827 173.736 173.391 171.577 172.898 172.194C172.127 173.119 172.558 173.427 161.735 164.053C159.299 161.956 156.03 159.088 154.488 157.731C152.946 156.374 150.664 154.432 149.4 153.414C148.136 152.396 145.761 150.423 144.127 149.004C141.506 146.753 141.166 146.352 141.413 145.828C141.906 144.903 142.462 145.119 144.713 147.062ZM80.2942 152.921C80.5408 153.075 80.6642 153.383 80.6025 153.661C80.5717 153.907 78.2281 157.454 75.4219 161.524C71.5056 167.26 70.1796 168.956 69.6862 168.956C69.3162 168.987 68.9461 168.802 68.8536 168.555C68.6686 168.093 68.7611 167.938 74.1267 160.198C79.9241 151.872 79.4615 152.396 80.2942 152.921ZM135.677 157.978C138.73 162.696 139.008 163.189 138.576 163.652C138.299 163.93 137.929 164.022 137.713 163.899C137.497 163.775 135.801 161.37 133.981 158.564C131.391 154.586 130.713 153.352 130.99 153.044C131.175 152.797 131.545 152.643 131.823 152.705C132.069 152.767 133.827 155.141 135.677 157.978ZM90.2237 156.498C90.2237 156.652 79.5232 181.938 75.3294 191.652C73.0166 196.956 72.2765 198.436 71.8448 198.436C71.5364 198.436 71.2281 198.22 71.1664 197.912C71.1047 197.634 72.8316 193.348 74.9594 188.352C79.0915 178.793 83.347 168.802 85.2897 164.207C89.1135 154.956 88.7743 155.604 89.6378 156.066C89.9461 156.22 90.2237 156.436 90.2237 156.498ZM122.818 157.269C123.188 158.04 124.915 162.048 126.642 166.211C128.4 170.374 132.1 179.04 134.876 185.485C137.651 191.93 139.964 197.48 139.964 197.819C140.025 198.251 139.81 198.467 139.347 198.529C138.514 198.652 139.1 199.855 132.039 183.326C121.338 158.348 120.66 156.683 121.061 156.159C121.647 155.48 122.047 155.758 122.818 157.269ZM97.7171 158.996C97.6554 160.26 94.8492 175.74 94.14 178.7C93.8624 179.903 93.6157 180.273 93.1223 180.335C92.1972 180.458 92.0739 179.872 92.5673 177.59C92.7831 176.511 93.6774 171.855 94.5408 167.291C95.4043 162.696 96.1752 158.656 96.2677 158.256C96.3602 157.731 96.5761 157.577 97.1003 157.639C97.6862 157.731 97.7787 157.916 97.7171 158.996ZM106.105 157.855C106.413 158.379 106.29 203 105.981 203.308C105.827 203.463 105.457 203.524 105.21 203.432C104.779 203.247 104.717 200.872 104.717 180.581C104.717 157.762 104.717 157.7 105.704 157.608C105.827 157.577 105.981 157.7 106.105 157.855ZM116.62 168C118.933 180.366 118.933 180.211 118.162 180.335C117.854 180.396 117.484 180.335 117.299 180.15C116.929 179.78 112.981 158.225 113.228 157.824C113.321 157.67 113.691 157.577 114.061 157.639C114.616 157.731 114.862 158.595 116.62 168ZM151.003 170.097C151.898 171.053 153.779 172.07 154.673 172.07C155.043 172.07 155.228 172.194 155.136 172.379C155.043 172.533 154.642 172.687 154.272 172.687C153.224 172.687 151.219 173.982 150.448 175.123C150.078 175.678 149.585 177.004 149.4 178.022L148.999 179.934L148.598 178.145C148.382 177.189 148.012 175.987 147.735 175.463C147.149 174.322 145.484 173.057 144.25 172.811C142.986 172.564 143.017 172.286 144.373 171.793C145.669 171.33 147.457 169.819 148.012 168.709C148.259 168.278 148.536 167.291 148.66 166.52L148.906 165.132L149.554 167.198C149.955 168.339 150.572 169.665 151.003 170.097Z" fill="#10375A" />
-                        <path d="M97.4699 82.0263C88.4655 83.6299 78.1968 88.5638 69.5624 95.4713C63.3642 100.436 51.8311 113.11 52.7254 114.004C52.9721 114.251 53.7122 113.696 58.3069 110.088C70.8267 100.22 79.3686 95.1629 89.1439 91.9559C94.3554 90.229 98.0866 89.4889 103.391 89.1805C112.703 88.6255 120.413 90.3523 130.157 95.1321C135.646 97.8149 141.228 101.484 150.417 108.423C156.461 112.956 158.99 114.559 158.99 113.819C158.99 113.696 157.849 112.216 156.461 110.52C153.1 106.418 145.082 98.4625 141.166 95.3171C132.562 88.4096 122.417 83.599 113.104 82.0263C108.571 81.2246 101.818 81.2246 97.4699 82.0263Z" fill="#10375A" />
-                        <path d="M101.941 91.1542C100.368 91.4625 97.0998 92.6343 95.3112 93.5286C89.0822 96.6123 84.9808 101.546 83.254 107.929C82.4214 110.982 82.5139 116.656 83.4081 119.648C84.95 124.705 87.8178 128.837 92.0425 132.013C96.3905 135.313 101.294 136.793 106.875 136.485C108.664 136.392 110.822 136.115 111.655 135.899C118.316 134.018 123.866 129.7 126.58 124.181C128.461 120.388 128.893 118.322 128.893 113.634C128.893 108.916 128.461 106.85 126.549 102.996C125.501 100.868 124.761 99.8502 122.479 97.5991C117.791 92.9427 113.752 91.2775 106.875 91.1233C104.593 91.0617 102.373 91.0925 101.941 91.1542ZM108.386 97.6299C109.681 97.9075 109.589 98.185 108.047 98.6784C104.963 99.5727 101.479 102.687 99.9985 105.863C96.4522 113.326 100.43 122.731 108.078 125.013C111.408 126 115.633 125.445 118.717 123.626C120.413 122.639 120.135 123.564 118.223 125.414C113.166 130.163 106.258 131.335 100.245 128.467C92.0733 124.581 88.7738 114.652 92.8751 106.203C94.972 101.916 99.8134 98.37 104.408 97.7841C107.183 97.4141 107.307 97.4141 108.386 97.6299ZM115.88 105.308C116.805 107.035 119.087 108.546 120.752 108.546C121.091 108.546 121.368 108.67 121.368 108.855C121.368 109.009 120.998 109.163 120.536 109.163C119.179 109.163 117.082 110.366 116.25 111.63C115.818 112.247 115.324 113.665 115.078 114.744C114.769 116.317 114.646 116.533 114.492 115.947C114.368 115.515 114.276 114.899 114.276 114.529C114.276 114.189 113.906 113.203 113.474 112.339C112.857 111.044 112.395 110.581 111.1 109.965C110.236 109.533 109.126 109.163 108.664 109.163C107.245 109.163 107.677 108.67 109.496 108.269C112.179 107.652 113.567 105.956 114.461 102.225C114.646 101.33 114.677 101.361 115.016 102.841C115.232 103.674 115.633 104.784 115.88 105.308Z" fill="#10375A" />
-                        <path d="M89.7612 93.5594C85.2282 95.1629 80.4484 97.1981 78.1973 98.4625C72.2149 101.793 62.2854 108.885 56.1489 114.158C55.7788 114.467 57.4132 116.163 63.0872 121.313C70.7039 128.22 74.8053 131.15 80.8801 134.048C90.2546 138.489 98.0872 140.216 107.184 139.907C115.448 139.599 121.893 137.995 129.541 134.326C138.052 130.225 144.096 125.722 151.497 117.828L154.981 114.158L148.999 109.656C139.1 102.194 132.008 97.6607 126.611 95.3171C124.515 94.4228 120.043 92.8193 119.92 92.9118C119.889 92.9735 120.876 93.8369 122.109 94.8854C128.246 100.035 131.391 107.929 130.559 116.255C130.25 119.555 129.664 121.621 128.153 124.736C125.933 129.33 122.294 132.969 117.515 135.374C113.968 137.163 111.316 137.841 107.184 138.057C99.444 138.427 93.2458 136.053 87.911 130.595C84.4264 127.079 82.422 123.132 81.466 118.106C80.8493 114.929 80.8493 112.74 81.4352 109.317C82.2678 104.507 84.5806 100.035 87.7876 96.8898C89.3295 95.4096 92.4749 93.066 93.4 92.7268C93.585 92.6651 93.7083 92.5109 93.6158 92.4184C93.5233 92.3259 91.7964 92.8501 89.7612 93.5594Z" fill="#10375A" />
-                    </g>
-                </mask>
-                <g mask="url(#mask0_49_4114)">
-                    <rect x="-2.91724" y="-1.58667" width="213.173" height="213.173" fill="#f7f7f7" />
-                </g>
-            </g>
-            <defs>
-                <clipPath id="clip0_49_4114">
-                    <rect width="210" height="210" fill="#f7f7f7" />
-                </clipPath>
-                <clipPath id="clip1_49_4114">
-                    <rect width="281.542" height="210" fill="#f7f7f7" transform="translate(-35.5911)" />
-                </clipPath>
-            </defs>
-        </svg>
-
-    )
-}
\ No newline at end of file
+  return (
+    <svg
+      width="210"
+      height="210"
+      viewBox="0 0 210 210"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_49_4114)">
+        <rect x="0.00012207" width="210" height="210" fill="#D7A06B" />
+        <mask
+          id="mask0_49_4114"
+          style={{ maskType: "alpha" }}
+          maskUnits="userSpaceOnUse"
+          x="-36"
+          y="0"
+          width="282"
+          height="210"
+        >
+          <g clipPath="url(#clip1_49_4114)">
+            <path
+              d="M-35.5913 105V210H105.18H245.951V105V0H105.18H-35.5913V105ZM106.197 22.2643C106.321 22.6652 106.351 33.7357 106.259 46.8722C106.105 70.5242 106.105 70.7709 105.488 70.7709C104.871 70.7709 104.871 70.5242 104.779 46.5639C104.748 33.2423 104.779 22.1718 104.871 21.9559C105.087 21.3392 105.951 21.5242 106.197 22.2643ZM70.9505 29.8194C71.4131 30.8062 73.1091 34.5066 74.7127 38.0837C76.3162 41.63 79.0298 47.5815 80.695 51.2819C82.3911 54.9824 84.673 60.1013 85.7831 62.6916C86.8933 65.2511 88.2809 68.4581 88.8668 69.7533C89.4527 71.0793 89.9153 72.3436 89.9153 72.6211C89.9153 73.2996 89.021 73.5771 88.5276 73.0529C88.3118 72.8062 86.5541 68.9515 84.6113 64.4493C82.6686 59.9471 78.3206 50.141 74.9594 42.6476C71.629 35.1234 68.9461 28.7709 69.0695 28.5242C69.4087 27.5991 70.1488 28.0925 70.9505 29.8194ZM142.277 28.8634C142.338 29.2026 140.303 33.9824 137.774 39.5022C135.246 44.9912 131.977 52.1145 130.528 55.3524C129.078 58.5595 126.92 63.37 125.748 65.9912C124.576 68.6123 123.373 71.2952 123.127 71.9427C122.572 73.2379 121.832 73.6696 121.215 73.0529C120.845 72.6828 120.937 72.3128 121.647 70.6167C122.757 68.0881 139.008 32.6564 140.889 28.7401C141.29 27.9075 142.153 27.9692 142.277 28.8634ZM53.9594 45.2996C54.1444 47.489 54.7611 49.5859 55.5629 50.7885C56.1488 51.7137 58.1223 52.7004 59.8492 52.9471C60.6201 53.0396 61.2369 53.2247 61.2369 53.348C61.2369 53.4714 60.3118 53.8106 59.1708 54.1189C55.6554 55.0749 54.4527 56.8326 53.9285 61.674C53.836 62.6916 53.651 63.5242 53.5585 63.5242C53.466 63.5242 53.1576 62.1057 52.8801 60.4097C52.5408 58.4361 52.14 56.9868 51.7699 56.4626C50.9682 55.3833 49.2413 54.4581 47.1752 53.9648C46.2501 53.7489 45.51 53.4714 45.51 53.348C45.51 53.2247 46.2501 53.0088 47.1444 52.9163C50.814 52.4537 52.325 50.6344 52.9726 46.0088C53.1884 44.4361 53.4351 43.1718 53.5585 43.1718C53.651 43.1718 53.836 44.1277 53.9594 45.2996ZM119.21 47.489C119.735 47.7973 119.951 46.6255 116.651 61.7357C115.572 66.6079 114.554 70.7709 114.369 70.9559C113.845 71.4802 113.043 71.0485 113.043 70.3084C113.043 69.9383 114.092 64.9736 115.356 59.2379C116.62 53.5022 117.669 48.5991 117.669 48.3524C117.669 47.9207 118.255 47.1806 118.594 47.1806C118.686 47.1806 118.964 47.3348 119.21 47.489ZM92.9682 47.9207C93.1532 48.1366 93.7083 50.2643 94.2325 52.6079C94.7259 54.9515 95.7743 59.793 96.5452 63.37C98.0871 70.4934 98.0871 70.6476 97.5629 71.1718C97.2853 71.4493 97.0695 71.4185 96.6378 71.0176C96.3294 70.7401 96.0827 70.3084 96.0827 70.0617C96.0827 69.815 95.1268 65.0661 93.9241 59.4846C92.7523 53.9339 91.7655 49.0617 91.7655 48.63C91.7655 47.489 92.3206 47.1498 92.9682 47.9207ZM152.514 52.1454C152.514 54.1498 154.426 56.4934 156.677 57.2952C157.603 57.6035 157.603 57.6035 156.801 57.6344C155.074 57.696 152.545 60.3788 152.514 62.1982C152.514 62.5683 152.391 62.9692 152.206 63.0617C152.052 63.1542 151.898 63.0308 151.898 62.7533C151.898 61.2731 149.77 58.652 147.92 57.8811L146.871 57.4493L147.951 57.0793C149.893 56.4317 151.898 53.6872 151.898 51.652C151.898 51.1894 152.021 50.9119 152.206 51.0352C152.391 51.1277 152.514 51.652 152.514 52.1454ZM40.1752 58.9295C45.14 62.7533 52.0783 68.3348 60.4351 75.2115C70.7655 83.7225 70.6113 83.5683 69.7787 84.4009C69.4087 84.7709 68.8228 84.4009 65.6774 81.8414C63.673 80.1762 60.8977 77.8634 59.5408 76.6916C58.184 75.5198 55.9638 73.7004 54.6069 72.6828C53.2501 71.6344 49.5805 68.7048 46.4351 66.1454C43.2897 63.5859 39.3118 60.4097 37.5849 59.0529C34.6862 56.8634 34.0078 56 34.6245 55.4141C34.7171 55.2907 34.9329 55.1982 35.0563 55.1982C35.1796 55.1982 37.4616 56.8943 40.1752 58.9295ZM176.197 55.5683C176.413 55.7841 176.567 56.0308 176.567 56.1542C176.567 56.2775 175.488 57.2643 174.193 58.3128C172.867 59.3921 168.118 63.2467 163.616 66.9163C159.114 70.5551 154.673 74.1322 153.748 74.8414C152.823 75.5507 149.77 78.0176 146.964 80.2996C144.158 82.6123 141.629 84.4934 141.321 84.4934C140.889 84.4934 140.766 84.3084 140.858 83.6608C140.951 82.7974 141.506 82.3348 155.475 71.2026C159.021 68.3656 164.973 63.6167 168.704 60.6255C172.435 57.6344 175.55 55.1982 175.642 55.1982C175.766 55.1982 175.981 55.3524 176.197 55.5683ZM75.4836 69.1982C80.9726 76.4758 81.2809 76.9075 80.7875 77.4317C80.4792 77.7709 80.1091 77.8943 79.8933 77.7709C79.4307 77.5242 68.021 62.3524 68.021 62.0132C68.021 61.8899 68.1135 61.674 68.2369 61.5507C68.977 60.8414 70.0254 61.9515 75.4836 69.1982ZM143.171 61.8282C143.202 61.9824 140.642 65.5903 137.466 69.8458C133.334 75.3965 131.514 77.5859 130.99 77.6476C130.466 77.7401 130.312 77.5859 130.312 77.1234C130.312 76.7533 132.84 73.0837 135.924 68.9207C140.858 62.2907 141.66 61.3348 142.307 61.4273C142.708 61.489 143.109 61.6432 143.171 61.8282ZM115.047 80.4537C126.766 83.0132 136.818 88.6255 147.951 98.7709C152.761 103.15 160.84 112.863 160.84 114.22C160.84 114.837 160.594 114.96 158.651 115.33L156.431 115.7L151.25 120.696L146.039 125.661L147.21 126.648C147.827 127.203 149.492 128.529 150.88 129.577C153.378 131.458 153.964 132.414 152.977 132.784C152.391 133.031 151.959 132.722 147.766 129.392L144.435 126.709L142.986 128.066C142.184 128.837 140.796 129.947 139.933 130.595C139.039 131.211 138.329 131.859 138.329 132.013C138.329 132.198 139.44 133.709 140.796 135.405C142.153 137.101 143.263 138.767 143.263 139.106C143.263 140.093 142.338 140.216 141.598 139.322C141.228 138.89 139.871 137.225 138.545 135.59L136.171 132.599L134.536 133.648C133.673 134.203 132.039 135.128 130.929 135.683C129.818 136.238 128.893 136.7 128.832 136.762C128.801 136.793 129.294 137.718 129.942 138.797C132.933 143.793 133.149 144.225 132.625 144.749C132.347 144.996 131.946 145.15 131.73 145.057C131.514 144.965 130.466 143.3 129.417 141.388C128.369 139.445 127.413 137.78 127.29 137.718C126.92 137.502 119.827 140.123 119.827 140.463C119.827 140.617 120.351 142.529 121.03 144.687C122.202 148.573 122.232 149.559 121.215 149.559C120.629 149.559 120.382 149.035 119.21 144.934C118.655 142.991 118.039 141.203 117.823 140.956C117.484 140.617 116.959 140.617 114.369 141.048C112.704 141.295 110.237 141.634 108.88 141.758L106.413 142.004L106.259 146.784C106.105 151.317 106.074 151.564 105.488 151.564C104.902 151.564 104.871 151.317 104.779 146.753L104.717 141.943L100.924 141.573C98.858 141.388 96.2986 141.018 95.2193 140.802C92.9065 140.308 93.1532 139.969 91.7655 145.242C90.7171 149.159 90.2237 149.991 89.4527 149.22C89.021 148.819 89.1135 148.295 90.1928 144.471C90.8712 142.097 91.3338 140.093 91.2413 140C91.1796 139.907 89.4219 139.291 87.3867 138.581C83.0695 137.101 83.7787 136.731 81.4351 141.758C80.325 144.132 79.8008 144.934 79.369 144.934C78.2897 144.934 78.4748 144.101 80.2633 140.308L82.0827 136.546L78.5056 134.758L74.9285 132.969L72.6157 135.59C68.7303 140.093 68.6994 140.123 68.1752 139.692C67.9285 139.476 67.7127 139.137 67.7127 138.921C67.7127 138.736 68.9461 137.101 70.488 135.344C71.999 133.586 73.2633 132.075 73.2633 131.982C73.2633 131.89 72.2457 131.088 71.0122 130.225C69.8096 129.33 68.2986 128.189 67.6818 127.696L66.5717 126.771L64.4131 128.529C63.2104 129.485 61.5761 130.78 60.7743 131.366C59.9417 131.952 59.1091 132.568 58.9241 132.722C58.4307 133.093 57.5364 132.722 57.5364 132.137C57.5364 131.89 59.2016 130.348 61.2369 128.744C63.2721 127.141 64.9373 125.753 64.9373 125.661C64.9373 125.599 64.1972 124.859 63.3338 124.057C62.4395 123.256 60.1576 121.097 58.2765 119.308C55.1312 116.286 54.6994 115.978 53.0959 115.608C52.14 115.392 51.1223 115.053 50.814 114.837C50.3206 114.467 50.3206 114.344 50.999 113.11C53.3734 108.577 62.9638 98.1233 69.2545 93.2203C78.1664 86.3128 88.466 81.6564 98.5188 80.022C102.281 79.4053 111.316 79.6211 115.047 80.4537ZM61.4836 90.7533C61.7303 92.0176 60.466 91.6476 54.7303 88.7797C51.5232 87.207 48.8404 85.7269 48.7787 85.511C48.6862 85.2952 48.8404 84.9251 49.0871 84.6476C49.5188 84.2467 50.1664 84.4934 55.4704 87.207C59.3558 89.1498 61.4219 90.3833 61.4836 90.7533ZM162.228 85.141C162.228 85.7885 161.519 86.2511 156.153 88.9648C150.417 91.8634 150.047 92.0176 149.554 91.5242C149.092 91.0617 149.092 90.9383 149.462 90.4758C149.986 89.8282 161.426 84.1233 161.889 84.2775C162.074 84.3392 162.228 84.7401 162.228 85.141ZM35.303 94.6079C51.1223 99.141 52.4175 99.6035 51.4615 100.559C51.2149 100.806 47.206 99.7885 35.8889 96.5507C15.814 90.815 17.4483 91.3392 17.4483 90.6916C17.4483 89.8899 17.7875 89.674 18.6818 89.8899C19.1135 89.9824 26.5761 92.1101 35.303 94.6079ZM193.435 91.0308C193.343 91.2775 190.629 92.2026 186.867 93.2511C183.321 94.2379 175.858 96.3656 170.277 97.9383C164.726 99.5418 159.977 100.837 159.761 100.837C159.299 100.837 159.021 100.251 159.237 99.6652C159.391 99.2335 160.501 98.8943 174.871 94.8546C180.638 93.2511 187.021 91.4626 189.056 90.8766C192.078 90.0132 192.849 89.8899 193.188 90.2291C193.404 90.4449 193.528 90.815 193.435 91.0308ZM36.1356 111.63C36.7215 112.123 37.3999 112.555 37.6466 112.555C37.8933 112.555 38.1091 112.678 38.1091 112.863C38.1091 113.018 37.8933 113.172 37.6157 113.172C36.3206 113.172 34.4395 115.361 34.3779 116.934C34.3779 117.396 34.2237 117.181 33.9461 116.286C33.4527 114.744 32.5585 113.696 31.2942 113.141L30.369 112.771L31.5717 112.247C32.8668 111.661 34.0695 110.026 34.1312 108.824C34.1312 108.269 34.2545 108.423 34.5937 109.379C34.8712 110.088 35.5497 111.106 36.1356 111.63ZM178.232 112.802C178.818 113.943 180.607 115.238 182.056 115.515C183.105 115.731 183.136 116.256 182.087 116.256C181.1 116.256 179.127 117.396 178.448 118.383C178.078 118.877 177.616 119.987 177.4 120.881L176.999 122.454L176.629 120.881C176.413 119.987 175.981 118.877 175.611 118.383C174.933 117.396 172.959 116.256 171.973 116.256C170.801 116.256 171.047 115.762 172.435 115.392C174.47 114.837 176.105 113.079 176.598 110.828L176.999 109.04L177.338 110.427C177.554 111.167 177.924 112.247 178.232 112.802ZM52.2016 125.075C52.2942 125.322 52.1708 125.722 51.9549 125.938C51.7082 126.154 49.1796 126.987 46.2809 127.758C38.7567 129.793 33.0519 131.366 25.1576 133.648C18.2501 135.59 17.4483 135.714 17.4483 134.573C17.4483 134.326 17.7567 133.987 18.1576 133.833C18.5276 133.678 24.8801 131.89 32.2501 129.855C39.6201 127.819 46.7743 125.815 48.1312 125.383C51.0915 124.489 51.9549 124.427 52.2016 125.075ZM165.343 126.093C168.21 126.925 175.55 129.022 181.655 130.749C187.761 132.507 192.942 134.079 193.158 134.295C193.466 134.573 193.466 134.727 193.158 135.159C192.664 135.775 193.62 136.022 175.025 130.656C167.655 128.529 161.025 126.648 160.316 126.463C159.391 126.216 158.99 125.938 158.99 125.537C158.99 124.921 159.237 124.581 159.761 124.581C159.946 124.581 162.444 125.26 165.343 126.093ZM45.2325 145.088C45.4483 147 45.7875 148.665 46.0034 148.943C46.3734 149.313 46.5585 149.251 47.4219 148.48L48.4087 147.555L47.8845 148.388C47.0519 149.744 47.206 150.084 48.7787 150.3C49.5805 150.392 50.6906 150.485 51.2765 150.485C52.9726 150.485 52.1708 151.009 49.858 151.41C47.2369 151.841 46.7435 152.304 47.5144 153.476L48.0695 154.339L47.2369 153.568C46.4351 152.828 46.3734 152.828 45.9726 153.352C45.5717 153.907 44.8933 157.731 44.8933 159.427C44.8933 159.921 44.7699 160.383 44.6157 160.476C44.3382 160.661 44.1532 159.674 43.7831 156.128C43.5364 153.692 43.0431 153.198 41.9021 154.216L41.0695 154.956L41.7479 153.969C42.1179 153.445 42.4263 152.859 42.4263 152.643C42.4263 152.15 40.6994 151.533 38.7259 151.286C36.0739 150.947 36.0122 150.639 38.4792 150.238C41.9329 149.683 43.0431 149.313 43.3206 148.542C43.4748 148.141 43.6906 146.476 43.814 144.78C43.9373 143.084 44.1223 141.573 44.184 141.449C44.5541 140.802 44.8933 141.943 45.2325 145.088ZM69.1312 145.705C69.6862 146.167 69.6554 146.229 68.021 147.74C67.0959 148.604 60.5585 154.247 53.5276 160.291C46.4968 166.304 40.3294 171.608 39.8668 172.04C39.1884 172.656 38.9109 172.749 38.4792 172.502C38.2016 172.317 37.9549 172.009 37.9549 171.855C37.9549 171.546 40.5452 169.233 51.6774 159.581C54.6069 157.022 59.51 152.767 62.5629 150.084C65.6157 147.432 68.206 145.242 68.3294 145.242C68.4219 145.242 68.7919 145.458 69.1312 145.705ZM144.713 147.062C145.854 148.079 149.061 150.824 151.774 153.167C175.827 173.736 173.391 171.577 172.898 172.194C172.127 173.119 172.558 173.427 161.735 164.053C159.299 161.956 156.03 159.088 154.488 157.731C152.946 156.374 150.664 154.432 149.4 153.414C148.136 152.396 145.761 150.423 144.127 149.004C141.506 146.753 141.166 146.352 141.413 145.828C141.906 144.903 142.462 145.119 144.713 147.062ZM80.2942 152.921C80.5408 153.075 80.6642 153.383 80.6025 153.661C80.5717 153.907 78.2281 157.454 75.4219 161.524C71.5056 167.26 70.1796 168.956 69.6862 168.956C69.3162 168.987 68.9461 168.802 68.8536 168.555C68.6686 168.093 68.7611 167.938 74.1267 160.198C79.9241 151.872 79.4615 152.396 80.2942 152.921ZM135.677 157.978C138.73 162.696 139.008 163.189 138.576 163.652C138.299 163.93 137.929 164.022 137.713 163.899C137.497 163.775 135.801 161.37 133.981 158.564C131.391 154.586 130.713 153.352 130.99 153.044C131.175 152.797 131.545 152.643 131.823 152.705C132.069 152.767 133.827 155.141 135.677 157.978ZM90.2237 156.498C90.2237 156.652 79.5232 181.938 75.3294 191.652C73.0166 196.956 72.2765 198.436 71.8448 198.436C71.5364 198.436 71.2281 198.22 71.1664 197.912C71.1047 197.634 72.8316 193.348 74.9594 188.352C79.0915 178.793 83.347 168.802 85.2897 164.207C89.1135 154.956 88.7743 155.604 89.6378 156.066C89.9461 156.22 90.2237 156.436 90.2237 156.498ZM122.818 157.269C123.188 158.04 124.915 162.048 126.642 166.211C128.4 170.374 132.1 179.04 134.876 185.485C137.651 191.93 139.964 197.48 139.964 197.819C140.025 198.251 139.81 198.467 139.347 198.529C138.514 198.652 139.1 199.855 132.039 183.326C121.338 158.348 120.66 156.683 121.061 156.159C121.647 155.48 122.047 155.758 122.818 157.269ZM97.7171 158.996C97.6554 160.26 94.8492 175.74 94.14 178.7C93.8624 179.903 93.6157 180.273 93.1223 180.335C92.1972 180.458 92.0739 179.872 92.5673 177.59C92.7831 176.511 93.6774 171.855 94.5408 167.291C95.4043 162.696 96.1752 158.656 96.2677 158.256C96.3602 157.731 96.5761 157.577 97.1003 157.639C97.6862 157.731 97.7787 157.916 97.7171 158.996ZM106.105 157.855C106.413 158.379 106.29 203 105.981 203.308C105.827 203.463 105.457 203.524 105.21 203.432C104.779 203.247 104.717 200.872 104.717 180.581C104.717 157.762 104.717 157.7 105.704 157.608C105.827 157.577 105.981 157.7 106.105 157.855ZM116.62 168C118.933 180.366 118.933 180.211 118.162 180.335C117.854 180.396 117.484 180.335 117.299 180.15C116.929 179.78 112.981 158.225 113.228 157.824C113.321 157.67 113.691 157.577 114.061 157.639C114.616 157.731 114.862 158.595 116.62 168ZM151.003 170.097C151.898 171.053 153.779 172.07 154.673 172.07C155.043 172.07 155.228 172.194 155.136 172.379C155.043 172.533 154.642 172.687 154.272 172.687C153.224 172.687 151.219 173.982 150.448 175.123C150.078 175.678 149.585 177.004 149.4 178.022L148.999 179.934L148.598 178.145C148.382 177.189 148.012 175.987 147.735 175.463C147.149 174.322 145.484 173.057 144.25 172.811C142.986 172.564 143.017 172.286 144.373 171.793C145.669 171.33 147.457 169.819 148.012 168.709C148.259 168.278 148.536 167.291 148.66 166.52L148.906 165.132L149.554 167.198C149.955 168.339 150.572 169.665 151.003 170.097Z"
+              fill="#10375A"
+            />
+            <path
+              d="M97.4699 82.0263C88.4655 83.6299 78.1968 88.5638 69.5624 95.4713C63.3642 100.436 51.8311 113.11 52.7254 114.004C52.9721 114.251 53.7122 113.696 58.3069 110.088C70.8267 100.22 79.3686 95.1629 89.1439 91.9559C94.3554 90.229 98.0866 89.4889 103.391 89.1805C112.703 88.6255 120.413 90.3523 130.157 95.1321C135.646 97.8149 141.228 101.484 150.417 108.423C156.461 112.956 158.99 114.559 158.99 113.819C158.99 113.696 157.849 112.216 156.461 110.52C153.1 106.418 145.082 98.4625 141.166 95.3171C132.562 88.4096 122.417 83.599 113.104 82.0263C108.571 81.2246 101.818 81.2246 97.4699 82.0263Z"
+              fill="#10375A"
+            />
+            <path
+              d="M101.941 91.1542C100.368 91.4625 97.0998 92.6343 95.3112 93.5286C89.0822 96.6123 84.9808 101.546 83.254 107.929C82.4214 110.982 82.5139 116.656 83.4081 119.648C84.95 124.705 87.8178 128.837 92.0425 132.013C96.3905 135.313 101.294 136.793 106.875 136.485C108.664 136.392 110.822 136.115 111.655 135.899C118.316 134.018 123.866 129.7 126.58 124.181C128.461 120.388 128.893 118.322 128.893 113.634C128.893 108.916 128.461 106.85 126.549 102.996C125.501 100.868 124.761 99.8502 122.479 97.5991C117.791 92.9427 113.752 91.2775 106.875 91.1233C104.593 91.0617 102.373 91.0925 101.941 91.1542ZM108.386 97.6299C109.681 97.9075 109.589 98.185 108.047 98.6784C104.963 99.5727 101.479 102.687 99.9985 105.863C96.4522 113.326 100.43 122.731 108.078 125.013C111.408 126 115.633 125.445 118.717 123.626C120.413 122.639 120.135 123.564 118.223 125.414C113.166 130.163 106.258 131.335 100.245 128.467C92.0733 124.581 88.7738 114.652 92.8751 106.203C94.972 101.916 99.8134 98.37 104.408 97.7841C107.183 97.4141 107.307 97.4141 108.386 97.6299ZM115.88 105.308C116.805 107.035 119.087 108.546 120.752 108.546C121.091 108.546 121.368 108.67 121.368 108.855C121.368 109.009 120.998 109.163 120.536 109.163C119.179 109.163 117.082 110.366 116.25 111.63C115.818 112.247 115.324 113.665 115.078 114.744C114.769 116.317 114.646 116.533 114.492 115.947C114.368 115.515 114.276 114.899 114.276 114.529C114.276 114.189 113.906 113.203 113.474 112.339C112.857 111.044 112.395 110.581 111.1 109.965C110.236 109.533 109.126 109.163 108.664 109.163C107.245 109.163 107.677 108.67 109.496 108.269C112.179 107.652 113.567 105.956 114.461 102.225C114.646 101.33 114.677 101.361 115.016 102.841C115.232 103.674 115.633 104.784 115.88 105.308Z"
+              fill="#10375A"
+            />
+            <path
+              d="M89.7612 93.5594C85.2282 95.1629 80.4484 97.1981 78.1973 98.4625C72.2149 101.793 62.2854 108.885 56.1489 114.158C55.7788 114.467 57.4132 116.163 63.0872 121.313C70.7039 128.22 74.8053 131.15 80.8801 134.048C90.2546 138.489 98.0872 140.216 107.184 139.907C115.448 139.599 121.893 137.995 129.541 134.326C138.052 130.225 144.096 125.722 151.497 117.828L154.981 114.158L148.999 109.656C139.1 102.194 132.008 97.6607 126.611 95.3171C124.515 94.4228 120.043 92.8193 119.92 92.9118C119.889 92.9735 120.876 93.8369 122.109 94.8854C128.246 100.035 131.391 107.929 130.559 116.255C130.25 119.555 129.664 121.621 128.153 124.736C125.933 129.33 122.294 132.969 117.515 135.374C113.968 137.163 111.316 137.841 107.184 138.057C99.444 138.427 93.2458 136.053 87.911 130.595C84.4264 127.079 82.422 123.132 81.466 118.106C80.8493 114.929 80.8493 112.74 81.4352 109.317C82.2678 104.507 84.5806 100.035 87.7876 96.8898C89.3295 95.4096 92.4749 93.066 93.4 92.7268C93.585 92.6651 93.7083 92.5109 93.6158 92.4184C93.5233 92.3259 91.7964 92.8501 89.7612 93.5594Z"
+              fill="#10375A"
+            />
+          </g>
+        </mask>
+        <g mask="url(#mask0_49_4114)">
+          <rect
+            x="-2.91724"
+            y="-1.58667"
+            width="213.173"
+            height="213.173"
+            fill="#f7f7f7"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_49_4114">
+          <rect width="210" height="210" fill="#f7f7f7" />
+        </clipPath>
+        <clipPath id="clip1_49_4114">
+          <rect
+            width="281.542"
+            height="210"
+            fill="#f7f7f7"
+            transform="translate(-35.5911)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/components/domains/retaining/images/TopSellingSvg/TopSellingSvg.tsx b/src/components/domains/retaining/images/TopSellingSvg/TopSellingSvg.tsx
index df8a0cb..e8315a9 100644
--- a/src/components/domains/retaining/images/TopSellingSvg/TopSellingSvg.tsx
+++ b/src/components/domains/retaining/images/TopSellingSvg/TopSellingSvg.tsx
@@ -1,33 +1,100 @@
-import { SVGProps } from "react"
+import { SVGProps } from "react";
 
-
-type TopSellingSvgProps = SVGProps<SVGSVGElement>
+type TopSellingSvgProps = SVGProps<SVGSVGElement>;
 
 function TopSellingSVG(props: TopSellingSvgProps) {
-    return (
-        <svg width="227" height="232" viewBox="0 0 227 232" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M106.726 9.28711C110.069 5.74435 115.632 5.63391 119.114 8.95508L119.445 9.28711L127.9 18.249C131.185 21.7297 136.185 22.9673 140.695 21.4541L141.13 21.2988L152.467 17.0156C156.994 15.3055 162.015 17.5996 163.722 22.0654L163.876 22.5049L167.828 34.7246C169.28 39.2125 173.174 42.4539 177.821 43.0869L178.273 43.1406L190.601 44.3564C195.345 44.8246 198.81 48.9952 198.463 53.6943L198.417 54.1514L196.757 67.334C196.178 71.9304 198.243 76.4461 202.065 79.0186L202.44 79.2607L213.414 86.0811C217.415 88.5672 218.707 93.7524 216.414 97.8057L216.181 98.1943L209.041 109.438C206.578 113.318 206.5 118.238 208.81 122.183L209.041 122.562L216.181 133.806C218.705 137.782 217.618 143.014 213.793 145.67L213.414 145.919L202.44 152.739C198.506 155.185 196.3 159.633 196.709 164.222L196.757 164.666L198.417 177.849C199.013 182.579 195.715 186.882 191.056 187.586L190.601 187.644L178.273 188.859C173.579 189.323 169.584 192.439 167.977 196.845L167.828 197.275L163.876 209.495C162.387 214.099 157.461 216.591 152.906 215.138L152.467 214.984L141.13 210.701C136.653 209.01 131.616 210.086 128.224 213.422L127.9 213.751L119.445 222.713C116.102 226.256 110.539 226.366 107.057 223.045L106.726 222.713L98.2695 213.751C94.9851 210.271 89.986 209.033 85.4756 210.546L85.041 210.701L73.7041 214.984C69.1774 216.694 64.1562 214.4 62.4492 209.935L62.2949 209.495L58.3428 197.275C56.8914 192.787 52.9967 189.546 48.3496 188.913L47.8975 188.859L35.5703 187.644C30.8261 187.175 27.361 183.005 27.708 178.306L27.7539 177.849L29.4141 164.666C29.993 160.07 27.9279 155.554 24.1055 152.981L23.7305 152.739L12.7568 145.919C8.75633 143.433 7.46427 138.248 9.75684 134.194L9.99023 133.806L17.1299 122.562C19.5932 118.682 19.6697 113.762 17.3604 109.817L17.1299 109.438L9.99023 98.1943C7.46557 94.2181 8.55326 88.9864 12.3779 86.3301L12.7568 86.0811L23.7305 79.2607C27.6651 76.8154 29.8713 72.3675 29.4619 67.7783L29.4141 67.334L27.7539 54.1514C27.1581 49.4213 30.456 45.1178 35.1152 44.4141L35.5703 44.3564L47.8975 43.1406C52.5915 42.6774 56.5871 39.5615 58.1943 35.1553L58.3428 34.7246L62.2949 22.5049C63.784 17.9006 68.7099 15.4086 73.2646 16.8623L73.7041 17.0156L85.041 21.2988C89.5179 22.99 94.5546 21.9138 97.9473 18.5781L98.2695 18.249L106.726 9.28711Z" fill="#1849A8" stroke="#6B8CD1" strokeWidth="3.49749" />
-            <circle cx="112.503" cy="116" r="83.3568" stroke="white" strokeWidth="2.33166" />
-            <circle cx="112.502" cy="116" r="51.2965" stroke="white" strokeWidth="1.16583" />
-            <path d="M112.876 39.6382L116.206 45.5468L122.855 46.8883L118.264 51.8815L119.043 58.6192L112.876 55.7966L106.708 58.6192L107.487 51.8815L102.897 46.8883L109.545 45.5468L112.876 39.6382Z" fill="white" />
-            <path d="M113.732 194.434L110.402 188.525L103.753 187.184L108.344 182.191L107.565 175.453L113.732 178.275L119.899 175.453L119.121 182.191L123.711 187.184L117.062 188.525L113.732 194.434Z" fill="white" />
-            <path d="M71.8148 53.8492L76.7585 56.7721L82.2018 54.9409L80.9497 60.5459L84.3733 65.157L78.6558 65.6982L75.3283 70.3791L73.0468 65.1087L67.5667 63.3905L71.8741 59.592L71.8148 53.8492Z" fill="white" />
-            <path d="M154.793 180.223L149.849 177.3L144.406 179.131L145.658 173.526L142.235 168.915L147.952 168.374L151.28 163.693L153.561 168.963L159.041 170.682L154.734 174.48L154.793 180.223Z" fill="white" />
-            <path d="M143.64 55.5067L149.172 57.0504L153.956 53.8729L154.197 59.6109L158.697 63.1788L153.315 65.1814L151.312 70.564L147.744 66.0636L142.006 65.8224L145.184 61.0384L143.64 55.5067Z" fill="white" />
-            <path d="M82.9673 178.565L77.4355 177.022L72.6516 180.199L72.4103 174.461L67.91 170.893L73.2926 168.891L75.2952 163.508L78.8631 168.008L84.6011 168.25L81.4236 173.034L82.9673 178.565Z" fill="white" />
-            <path d="M34.368 128.77H30.7349V107.177H24.4824V103.23H40.6346V107.177H34.368V128.77Z" fill="white" />
-            <path d="M51.5842 102.593C54.532 102.593 56.865 103.796 58.583 106.204C60.3104 108.611 61.1741 111.873 61.1741 115.991C61.1741 120.109 60.3151 123.378 58.5971 125.796C56.8791 128.203 54.5414 129.407 51.5842 129.407C48.6082 129.407 46.2565 128.203 44.5291 125.796C42.8111 123.389 41.9521 120.121 41.9521 115.991C41.9521 111.873 42.8158 108.611 44.5432 106.204C46.28 103.796 48.627 102.593 51.5842 102.593ZM51.5842 106.646C49.7723 106.646 48.3312 107.49 47.261 109.177C46.2002 110.864 45.6697 113.136 45.6697 115.991C45.6697 118.858 46.1955 121.136 47.2469 122.823C48.3078 124.51 49.7535 125.354 51.5842 125.354C53.3867 125.354 54.8137 124.51 55.8651 122.823C56.926 121.124 57.4564 118.847 57.4564 115.991C57.4564 113.136 56.926 110.864 55.8651 109.177C54.8137 107.49 53.3867 106.646 51.5842 106.646Z" fill="white" />
-            <path d="M64.4772 103.23H72.6729C74.7008 103.23 76.3437 104.027 77.6017 105.619C78.869 107.212 79.5027 109.295 79.5027 111.867C79.5027 114.392 78.8503 116.445 77.5453 118.027C76.2498 119.608 74.574 120.398 72.518 120.398H68.1103V128.77H64.4772V103.23ZM68.1103 107.053V116.611H71.7013C73.0062 116.611 74.0154 116.198 74.7289 115.372C75.4518 114.546 75.8132 113.378 75.8132 111.867C75.8132 110.31 75.4565 109.118 74.743 108.292C74.0389 107.466 73.0297 107.053 71.7154 107.053H68.1103Z" fill="white" />
-            <path d="M88.5451 121.832H92.0938C92.2064 122.976 92.6805 123.891 93.5161 124.575C94.3516 125.248 95.4125 125.584 96.6986 125.584C97.9003 125.584 98.886 125.242 99.6559 124.557C100.435 123.861 100.825 122.976 100.825 121.903C100.825 120.982 100.529 120.233 99.9375 119.655C99.3554 119.077 98.4119 118.599 97.107 118.221L94.4737 117.46C92.6336 116.941 91.2676 116.097 90.3758 114.929C89.4933 113.749 89.0521 112.209 89.0521 110.31C89.0521 107.985 89.7421 106.121 91.1221 104.717C92.5116 103.301 94.3422 102.593 96.6141 102.593C98.7452 102.593 100.51 103.289 101.909 104.681C103.308 106.074 104.049 107.867 104.134 110.062H100.656C100.534 108.941 100.106 108.05 99.3742 107.389C98.6419 106.729 97.7172 106.398 96.6 106.398C95.4265 106.398 94.483 106.729 93.7696 107.389C93.0654 108.038 92.7134 108.906 92.7134 109.991C92.7134 110.853 92.9903 111.555 93.5442 112.097C94.0981 112.628 95.0041 113.077 96.2621 113.442L98.5997 114.115C100.656 114.693 102.144 115.555 103.064 116.699C103.993 117.844 104.458 119.389 104.458 121.336C104.458 123.826 103.74 125.796 102.303 127.248C100.876 128.687 98.933 129.407 96.4733 129.407C94.1451 129.407 92.2628 128.723 90.8264 127.354C89.3994 125.985 88.639 124.145 88.5451 121.832Z" fill="white" />
-            <path d="M120.829 124.823V128.77H107.676V103.23H120.829V107.177H111.31V113.956H120.308V117.673H111.31V124.823H120.829Z" fill="white" />
-            <path d="M137.426 124.77V128.77H124.47V103.23H128.103V124.77H137.426Z" fill="white" />
-            <path d="M153.431 124.77V128.77H140.475V103.23H144.108V124.77H153.431Z" fill="white" />
-            <path d="M160.114 128.77H156.48V103.23H160.114V128.77Z" fill="white" />
-            <path d="M167.768 128.77H164.262V103.23H167.416L177.386 120.593H177.625V103.23H181.118V128.77H177.977L168.007 111.389H167.768V128.77Z" fill="white" />
-            <path d="M202.854 118.54C202.854 121.855 202.052 124.498 200.446 126.469C198.841 128.428 196.682 129.407 193.969 129.407C191.021 129.407 188.692 128.209 186.984 125.814C185.275 123.407 184.421 120.133 184.421 115.991C184.421 111.909 185.28 108.658 186.998 106.239C188.716 103.808 191.021 102.593 193.912 102.593C196.259 102.593 198.226 103.372 199.813 104.929C201.399 106.487 202.357 108.569 202.685 111.177H199.066C198.7 109.726 198.071 108.611 197.179 107.832C196.297 107.053 195.208 106.664 193.912 106.664C192.138 106.664 190.73 107.496 189.688 109.159C188.655 110.823 188.139 113.088 188.139 115.956C188.139 118.858 188.664 121.147 189.716 122.823C190.777 124.498 192.213 125.336 194.025 125.336C195.574 125.336 196.832 124.793 197.799 123.708C198.766 122.622 199.263 121.201 199.292 119.442L199.306 118.911H194.419V115.336H202.854V118.54Z" fill="white" />
-        </svg>
-
-    )
+  return (
+    <svg
+      width="227"
+      height="232"
+      viewBox="0 0 227 232"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M106.726 9.28711C110.069 5.74435 115.632 5.63391 119.114 8.95508L119.445 9.28711L127.9 18.249C131.185 21.7297 136.185 22.9673 140.695 21.4541L141.13 21.2988L152.467 17.0156C156.994 15.3055 162.015 17.5996 163.722 22.0654L163.876 22.5049L167.828 34.7246C169.28 39.2125 173.174 42.4539 177.821 43.0869L178.273 43.1406L190.601 44.3564C195.345 44.8246 198.81 48.9952 198.463 53.6943L198.417 54.1514L196.757 67.334C196.178 71.9304 198.243 76.4461 202.065 79.0186L202.44 79.2607L213.414 86.0811C217.415 88.5672 218.707 93.7524 216.414 97.8057L216.181 98.1943L209.041 109.438C206.578 113.318 206.5 118.238 208.81 122.183L209.041 122.562L216.181 133.806C218.705 137.782 217.618 143.014 213.793 145.67L213.414 145.919L202.44 152.739C198.506 155.185 196.3 159.633 196.709 164.222L196.757 164.666L198.417 177.849C199.013 182.579 195.715 186.882 191.056 187.586L190.601 187.644L178.273 188.859C173.579 189.323 169.584 192.439 167.977 196.845L167.828 197.275L163.876 209.495C162.387 214.099 157.461 216.591 152.906 215.138L152.467 214.984L141.13 210.701C136.653 209.01 131.616 210.086 128.224 213.422L127.9 213.751L119.445 222.713C116.102 226.256 110.539 226.366 107.057 223.045L106.726 222.713L98.2695 213.751C94.9851 210.271 89.986 209.033 85.4756 210.546L85.041 210.701L73.7041 214.984C69.1774 216.694 64.1562 214.4 62.4492 209.935L62.2949 209.495L58.3428 197.275C56.8914 192.787 52.9967 189.546 48.3496 188.913L47.8975 188.859L35.5703 187.644C30.8261 187.175 27.361 183.005 27.708 178.306L27.7539 177.849L29.4141 164.666C29.993 160.07 27.9279 155.554 24.1055 152.981L23.7305 152.739L12.7568 145.919C8.75633 143.433 7.46427 138.248 9.75684 134.194L9.99023 133.806L17.1299 122.562C19.5932 118.682 19.6697 113.762 17.3604 109.817L17.1299 109.438L9.99023 98.1943C7.46557 94.2181 8.55326 88.9864 12.3779 86.3301L12.7568 86.0811L23.7305 79.2607C27.6651 76.8154 29.8713 72.3675 29.4619 67.7783L29.4141 67.334L27.7539 54.1514C27.1581 49.4213 30.456 45.1178 35.1152 44.4141L35.5703 44.3564L47.8975 43.1406C52.5915 42.6774 56.5871 39.5615 58.1943 35.1553L58.3428 34.7246L62.2949 22.5049C63.784 17.9006 68.7099 15.4086 73.2646 16.8623L73.7041 17.0156L85.041 21.2988C89.5179 22.99 94.5546 21.9138 97.9473 18.5781L98.2695 18.249L106.726 9.28711Z"
+        fill="#1849A8"
+        stroke="#6B8CD1"
+        strokeWidth="3.49749"
+      />
+      <circle
+        cx="112.503"
+        cy="116"
+        r="83.3568"
+        stroke="white"
+        strokeWidth="2.33166"
+      />
+      <circle
+        cx="112.502"
+        cy="116"
+        r="51.2965"
+        stroke="white"
+        strokeWidth="1.16583"
+      />
+      <path
+        d="M112.876 39.6382L116.206 45.5468L122.855 46.8883L118.264 51.8815L119.043 58.6192L112.876 55.7966L106.708 58.6192L107.487 51.8815L102.897 46.8883L109.545 45.5468L112.876 39.6382Z"
+        fill="white"
+      />
+      <path
+        d="M113.732 194.434L110.402 188.525L103.753 187.184L108.344 182.191L107.565 175.453L113.732 178.275L119.899 175.453L119.121 182.191L123.711 187.184L117.062 188.525L113.732 194.434Z"
+        fill="white"
+      />
+      <path
+        d="M71.8148 53.8492L76.7585 56.7721L82.2018 54.9409L80.9497 60.5459L84.3733 65.157L78.6558 65.6982L75.3283 70.3791L73.0468 65.1087L67.5667 63.3905L71.8741 59.592L71.8148 53.8492Z"
+        fill="white"
+      />
+      <path
+        d="M154.793 180.223L149.849 177.3L144.406 179.131L145.658 173.526L142.235 168.915L147.952 168.374L151.28 163.693L153.561 168.963L159.041 170.682L154.734 174.48L154.793 180.223Z"
+        fill="white"
+      />
+      <path
+        d="M143.64 55.5067L149.172 57.0504L153.956 53.8729L154.197 59.6109L158.697 63.1788L153.315 65.1814L151.312 70.564L147.744 66.0636L142.006 65.8224L145.184 61.0384L143.64 55.5067Z"
+        fill="white"
+      />
+      <path
+        d="M82.9673 178.565L77.4355 177.022L72.6516 180.199L72.4103 174.461L67.91 170.893L73.2926 168.891L75.2952 163.508L78.8631 168.008L84.6011 168.25L81.4236 173.034L82.9673 178.565Z"
+        fill="white"
+      />
+      <path
+        d="M34.368 128.77H30.7349V107.177H24.4824V103.23H40.6346V107.177H34.368V128.77Z"
+        fill="white"
+      />
+      <path
+        d="M51.5842 102.593C54.532 102.593 56.865 103.796 58.583 106.204C60.3104 108.611 61.1741 111.873 61.1741 115.991C61.1741 120.109 60.3151 123.378 58.5971 125.796C56.8791 128.203 54.5414 129.407 51.5842 129.407C48.6082 129.407 46.2565 128.203 44.5291 125.796C42.8111 123.389 41.9521 120.121 41.9521 115.991C41.9521 111.873 42.8158 108.611 44.5432 106.204C46.28 103.796 48.627 102.593 51.5842 102.593ZM51.5842 106.646C49.7723 106.646 48.3312 107.49 47.261 109.177C46.2002 110.864 45.6697 113.136 45.6697 115.991C45.6697 118.858 46.1955 121.136 47.2469 122.823C48.3078 124.51 49.7535 125.354 51.5842 125.354C53.3867 125.354 54.8137 124.51 55.8651 122.823C56.926 121.124 57.4564 118.847 57.4564 115.991C57.4564 113.136 56.926 110.864 55.8651 109.177C54.8137 107.49 53.3867 106.646 51.5842 106.646Z"
+        fill="white"
+      />
+      <path
+        d="M64.4772 103.23H72.6729C74.7008 103.23 76.3437 104.027 77.6017 105.619C78.869 107.212 79.5027 109.295 79.5027 111.867C79.5027 114.392 78.8503 116.445 77.5453 118.027C76.2498 119.608 74.574 120.398 72.518 120.398H68.1103V128.77H64.4772V103.23ZM68.1103 107.053V116.611H71.7013C73.0062 116.611 74.0154 116.198 74.7289 115.372C75.4518 114.546 75.8132 113.378 75.8132 111.867C75.8132 110.31 75.4565 109.118 74.743 108.292C74.0389 107.466 73.0297 107.053 71.7154 107.053H68.1103Z"
+        fill="white"
+      />
+      <path
+        d="M88.5451 121.832H92.0938C92.2064 122.976 92.6805 123.891 93.5161 124.575C94.3516 125.248 95.4125 125.584 96.6986 125.584C97.9003 125.584 98.886 125.242 99.6559 124.557C100.435 123.861 100.825 122.976 100.825 121.903C100.825 120.982 100.529 120.233 99.9375 119.655C99.3554 119.077 98.4119 118.599 97.107 118.221L94.4737 117.46C92.6336 116.941 91.2676 116.097 90.3758 114.929C89.4933 113.749 89.0521 112.209 89.0521 110.31C89.0521 107.985 89.7421 106.121 91.1221 104.717C92.5116 103.301 94.3422 102.593 96.6141 102.593C98.7452 102.593 100.51 103.289 101.909 104.681C103.308 106.074 104.049 107.867 104.134 110.062H100.656C100.534 108.941 100.106 108.05 99.3742 107.389C98.6419 106.729 97.7172 106.398 96.6 106.398C95.4265 106.398 94.483 106.729 93.7696 107.389C93.0654 108.038 92.7134 108.906 92.7134 109.991C92.7134 110.853 92.9903 111.555 93.5442 112.097C94.0981 112.628 95.0041 113.077 96.2621 113.442L98.5997 114.115C100.656 114.693 102.144 115.555 103.064 116.699C103.993 117.844 104.458 119.389 104.458 121.336C104.458 123.826 103.74 125.796 102.303 127.248C100.876 128.687 98.933 129.407 96.4733 129.407C94.1451 129.407 92.2628 128.723 90.8264 127.354C89.3994 125.985 88.639 124.145 88.5451 121.832Z"
+        fill="white"
+      />
+      <path
+        d="M120.829 124.823V128.77H107.676V103.23H120.829V107.177H111.31V113.956H120.308V117.673H111.31V124.823H120.829Z"
+        fill="white"
+      />
+      <path
+        d="M137.426 124.77V128.77H124.47V103.23H128.103V124.77H137.426Z"
+        fill="white"
+      />
+      <path
+        d="M153.431 124.77V128.77H140.475V103.23H144.108V124.77H153.431Z"
+        fill="white"
+      />
+      <path d="M160.114 128.77H156.48V103.23H160.114V128.77Z" fill="white" />
+      <path
+        d="M167.768 128.77H164.262V103.23H167.416L177.386 120.593H177.625V103.23H181.118V128.77H177.977L168.007 111.389H167.768V128.77Z"
+        fill="white"
+      />
+      <path
+        d="M202.854 118.54C202.854 121.855 202.052 124.498 200.446 126.469C198.841 128.428 196.682 129.407 193.969 129.407C191.021 129.407 188.692 128.209 186.984 125.814C185.275 123.407 184.421 120.133 184.421 115.991C184.421 111.909 185.28 108.658 186.998 106.239C188.716 103.808 191.021 102.593 193.912 102.593C196.259 102.593 198.226 103.372 199.813 104.929C201.399 106.487 202.357 108.569 202.685 111.177H199.066C198.7 109.726 198.071 108.611 197.179 107.832C196.297 107.053 195.208 106.664 193.912 106.664C192.138 106.664 190.73 107.496 189.688 109.159C188.655 110.823 188.139 113.088 188.139 115.956C188.139 118.858 188.664 121.147 189.716 122.823C190.777 124.498 192.213 125.336 194.025 125.336C195.574 125.336 196.832 124.793 197.799 123.708C198.766 122.622 199.263 121.201 199.292 119.442L199.306 118.911H194.419V115.336H202.854V118.54Z"
+        fill="white"
+      />
+    </svg>
+  );
 }
 
-export default TopSellingSVG
\ No newline at end of file
+export default TopSellingSVG;
diff --git a/src/components/domains/retaining/images/index.ts b/src/components/domains/retaining/images/index.ts
index 0224517..9da86a3 100644
--- a/src/components/domains/retaining/images/index.ts
+++ b/src/components/domains/retaining/images/index.ts
@@ -1,2 +1,2 @@
 export { default as EyeSvg } from "./EyeSvg/EyeSvg";
-export { default as TopSellingSvg } from "./TopSellingSvg/TopSellingSvg";
\ No newline at end of file
+export { default as TopSellingSvg } from "./TopSellingSvg/TopSellingSvg";
diff --git a/src/components/domains/retaining/index.ts b/src/components/domains/retaining/index.ts
index 9903149..a7002e1 100644
--- a/src/components/domains/retaining/index.ts
+++ b/src/components/domains/retaining/index.ts
@@ -1,4 +1,4 @@
-export { default as RetainingButton } from "./Button/Button"
-export { default as CheckMark } from "./CheckMark/CheckMark"
-export { default as Offer } from "./Offer/Offer"
-export { default as RetainingStepper } from "./RetainingStepper/RetainingStepper"
\ No newline at end of file
+export { default as RetainingButton } from "./Button/Button";
+export { default as CheckMark } from "./CheckMark/CheckMark";
+export { default as Offer } from "./Offer/Offer";
+export { default as RetainingStepper } from "./RetainingStepper/RetainingStepper";
diff --git a/src/components/domains/retaining/plan-cancelled/Button/Button.module.scss b/src/components/domains/retaining/plan-cancelled/Button/Button.module.scss
index 8ec2023..98bfbf8 100644
--- a/src/components/domains/retaining/plan-cancelled/Button/Button.module.scss
+++ b/src/components/domains/retaining/plan-cancelled/Button/Button.module.scss
@@ -1,4 +1,4 @@
 .button {
-    width: 100%;
-    margin-top: 36px;
-}
\ No newline at end of file
+  width: 100%;
+  margin-top: 36px;
+}
diff --git a/src/components/domains/retaining/plan-cancelled/Button/Button.tsx b/src/components/domains/retaining/plan-cancelled/Button/Button.tsx
index f30aecf..92c6a42 100644
--- a/src/components/domains/retaining/plan-cancelled/Button/Button.tsx
+++ b/src/components/domains/retaining/plan-cancelled/Button/Button.tsx
@@ -10,16 +10,20 @@ import { RetainingButton } from "../..";
 import styles from "./Button.module.scss";
 
 export default function Button() {
-    const t = useTranslations("PlanCancelled");
-    const router = useRouter();
+  const t = useTranslations("PlanCancelled");
+  const router = useRouter();
 
-    const handleButtonClick = () => {
-        router.push(ROUTES.home());
-    }
+  const handleButtonClick = () => {
+    router.push(ROUTES.home());
+  };
 
-    return (
-        <RetainingButton className={styles.button} active={true} onClick={handleButtonClick}>
-            {t("button")}
-        </RetainingButton>
-    )
-}
\ No newline at end of file
+  return (
+    <RetainingButton
+      className={styles.button}
+      active={true}
+      onClick={handleButtonClick}
+    >
+      {t("button")}
+    </RetainingButton>
+  );
+}
diff --git a/src/components/domains/retaining/plan-cancelled/index.ts b/src/components/domains/retaining/plan-cancelled/index.ts
index 9beaf65..1335a29 100644
--- a/src/components/domains/retaining/plan-cancelled/index.ts
+++ b/src/components/domains/retaining/plan-cancelled/index.ts
@@ -1 +1 @@
-export { default as PlanCancelledButton } from "./Button/Button";
\ No newline at end of file
+export { default as PlanCancelledButton } from "./Button/Button";
diff --git a/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.module.scss b/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.module.scss
index 703d3c2..fe1c2ac 100644
--- a/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.module.scss
+++ b/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.module.scss
@@ -1,63 +1,63 @@
 .offers {
-    display: flex;
-    flex-direction: column;
-    gap: 29px;
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
 }
 
 .buttonOfferContainer {
-    width: 100%;
-    position: sticky;
-    bottom: calc(0dvh + 16px);
-    pointer-events: none;
-    margin-top: 211px;
-    overflow-x: clip;
-    z-index: 9999;
+  width: 100%;
+  position: sticky;
+  bottom: calc(0dvh + 16px);
+  pointer-events: none;
+  margin-top: 211px;
+  overflow-x: clip;
+  z-index: 9999;
 
-    &>.blur {
-        padding-top: 40px;
-    }
-
-    & .buttonOffer {
-        position: relative;
-        line-height: 25px;
-        padding: 15px 20px;
-        font-size: 28px;
-        position: relative;
-        z-index: 1000;
-        pointer-events: all;
-
-        &>.loaderContainer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: rgba(0, 0, 0, 0.2);
-            border-radius: inherit;
-            backdrop-filter: blur(3px);
-            transition: background-color 0.3s ease-in-out;
-        }
+  & > .blur {
+    padding-top: 40px;
+  }
+
+  & .buttonOffer {
+    position: relative;
+    line-height: 25px;
+    padding: 15px 20px;
+    font-size: 28px;
+    position: relative;
+    z-index: 1000;
+    pointer-events: all;
+
+    & > .loaderContainer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: inherit;
+      backdrop-filter: blur(3px);
+      transition: background-color 0.3s ease-in-out;
     }
+  }
 }
 
 .offerImageEYE {
-    margin-top: -72px;
+  margin-top: -72px;
 }
 
 .offerImageVIP {
-    margin-top: -72px;
-    width: calc(100% - 84px);
-    max-width: 236px;
+  margin-top: -72px;
+  width: calc(100% - 84px);
+  max-width: 236px;
 }
 
 .buttonCancel {
-    line-height: 20px;
-    color: #5D5D5D;
-    background: none;
-    outline: 2px solid #9A9797;
-    font-size: 28px;
-    margin-top: 22px;
-}
\ No newline at end of file
+  line-height: 20px;
+  color: #5d5d5d;
+  background: none;
+  outline: 2px solid #9a9797;
+  font-size: 28px;
+  margin-top: 22px;
+}
diff --git a/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx b/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx
index e2b6d0c..9587c5f 100644
--- a/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx
+++ b/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx
@@ -18,107 +18,110 @@ import { ERetainingFunnel } from "@/types";
 import styles from "./SecondChancePage.module.scss";
 
 export default function SecondChancePage() {
-    const router = useRouter();
-    const t = useTranslations("SecondChance");
-    useLottie({
-        preloadKey: ELottieKeys.loaderCheckMark2,
-    });
-    useLottie({
-        preloadKey: ELottieKeys.confetti,
-    });
+  const router = useRouter();
+  const t = useTranslations("SecondChance");
+  useLottie({
+    preloadKey: ELottieKeys.loaderCheckMark2,
+  });
+  useLottie({
+    preloadKey: ELottieKeys.confetti,
+  });
 
-    const [activeOffer, setActiveOffer] = useState<"pause_30" | "free_chat_30">("pause_30");
-    const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
-    // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
-    // const token = useSelector(selectors.selectToken);
-    // const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
+  const [activeOffer, setActiveOffer] = useState<"pause_30" | "free_chat_30">(
+    "pause_30"
+  );
+  const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
+  // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
+  // const token = useSelector(selectors.selectToken);
+  // const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
 
-    const retainingFunnel = ERetainingFunnel.Red;
+  const retainingFunnel = ERetainingFunnel.Red;
 
-    const handleOfferClick = (offer: "pause_30" | "free_chat_30") => {
-        if (isLoadingButton) return;
-        setActiveOffer(offer);
+  const handleOfferClick = (offer: "pause_30" | "free_chat_30") => {
+    if (isLoadingButton) return;
+    setActiveOffer(offer);
+  };
+
+  const handleGetOfferClick = async () => {
+    if (isLoadingButton) return;
+    setIsLoadingButton(true);
+
+    // const response = await api.userSubscriptionAction({
+    //     subscriptionId: cancellingSubscriptionId,
+    //     action: activeOffer,
+    //     token
+    // });
+    // if (response.status === "success") {
+    //     navigate(routes.client.retainingFunnelPlanCancelled());
+    // }
+  };
+
+  const handleCancelClick = () => {
+    if (isLoadingButton) return;
+    if (retainingFunnel === ERetainingFunnel.Red) {
+      router.push(ROUTES.retainingFunnelChangeMind());
     }
+    // if (retainingFunnel === ERetainingFunnel.Green) {
+    //     return navigate(routes.client.retainingFunnelCancellationOfSubscription());
+    // }
+    // if (retainingFunnel === ERetainingFunnel.Purple) {
+    //     return navigate(routes.client.retainingFunnelStopFor30Days());
+  };
 
-    const handleGetOfferClick = async () => {
-        if (isLoadingButton) return;
-        setIsLoadingButton(true);
+  return (
+    <>
+      <div className={styles.offers}>
+        <Offer
+          title={t.rich("offers.1.title", { br: () => <br /> })}
+          description={t("offers.1.description")}
+          oldPrice={t("offers.1.old-price")}
+          newPrice={t("offers.1.new-price")}
+          onClick={() => handleOfferClick("pause_30")}
+          active={activeOffer === "pause_30"}
+          image={<EyeSvg className={styles.offerImageEYE} />}
+        />
+        <Offer
+          title={t("offers.2.title")}
+          description={t("offers.2.description")}
+          oldPrice={t("offers.2.old-price")}
+          newPrice={t("offers.2.new-price")}
+          onClick={() => handleOfferClick("free_chat_30")}
+          active={activeOffer === "free_chat_30"}
+          image={
+            // <img className={styles.offerImageVIP} src={images("vip_member.png")} alt="vip member" />
+            <Image
+              src={retainingImages("vip_member.png")}
+              alt="vip member"
+              className={styles.offerImageVIP}
+              width={711}
+              height={609}
+            />
+          }
+        />
+      </div>
 
-        // const response = await api.userSubscriptionAction({
-        //     subscriptionId: cancellingSubscriptionId,
-        //     action: activeOffer,
-        //     token
-        // });
-        // if (response.status === "success") {
-        //     navigate(routes.client.retainingFunnelPlanCancelled());
-        // }
-    }
-
-    const handleCancelClick = () => {
-        if (isLoadingButton) return;
-        if (retainingFunnel === ERetainingFunnel.Red) {
-            router.push(ROUTES.retainingFunnelChangeMind());
-        }
-        // if (retainingFunnel === ERetainingFunnel.Green) {
-        //     return navigate(routes.client.retainingFunnelCancellationOfSubscription());
-        // }
-        // if (retainingFunnel === ERetainingFunnel.Purple) {
-        //     return navigate(routes.client.retainingFunnelStopFor30Days());
-
-    }
-
-    return (
-        <>
-            <div className={styles.offers}>
-                <Offer
-                    title={t.rich("offers.1.title", { br: () => <br /> })}
-                    description={t("offers.1.description")}
-                    oldPrice={t("offers.1.old-price")}
-                    newPrice={t("offers.1.new-price")}
-                    onClick={() => handleOfferClick("pause_30")}
-                    active={activeOffer === "pause_30"}
-                    image={<EyeSvg className={styles.offerImageEYE} />}
-                />
-                <Offer
-                    title={t("offers.2.title")}
-                    description={t("offers.2.description")}
-                    oldPrice={t("offers.2.old-price")}
-                    newPrice={t("offers.2.new-price")}
-                    onClick={() => handleOfferClick("free_chat_30")}
-                    active={activeOffer === "free_chat_30"}
-                    image={
-                        // <img className={styles.offerImageVIP} src={images("vip_member.png")} alt="vip member" />
-                        <Image
-                            src={retainingImages("vip_member.png")}
-                            alt="vip member"
-                            className={styles.offerImageVIP}
-                            width={711}
-                            height={609}
-                        />
-                    }
-                />
-            </div>
-
-            <div className={styles.buttonOfferContainer}>
-                <BlurComponent className={styles.blur} isActiveBlur={true}>
-                    <RetainingButton
-                        className={styles.buttonOffer}
-                        active={true}
-                        onClick={handleGetOfferClick}
-                    >
-                        {isLoadingButton && <div className={styles.loaderContainer}>
-                            <Spinner />
-                        </div>}
-                        {t("get_offer")}
-                    </RetainingButton>
-                </BlurComponent>
-            </div>
-            <RetainingButton
-                className={styles.buttonCancel}
-                onClick={handleCancelClick}
-            >
-                {t("cancel")}
-            </RetainingButton>
-        </>
-    )
-}
\ No newline at end of file
+      <div className={styles.buttonOfferContainer}>
+        <BlurComponent className={styles.blur} isActiveBlur={true}>
+          <RetainingButton
+            className={styles.buttonOffer}
+            active={true}
+            onClick={handleGetOfferClick}
+          >
+            {isLoadingButton && (
+              <div className={styles.loaderContainer}>
+                <Spinner />
+              </div>
+            )}
+            {t("get_offer")}
+          </RetainingButton>
+        </BlurComponent>
+      </div>
+      <RetainingButton
+        className={styles.buttonCancel}
+        onClick={handleCancelClick}
+      >
+        {t("cancel")}
+      </RetainingButton>
+    </>
+  );
+}
diff --git a/src/components/domains/retaining/second-chance/index.ts b/src/components/domains/retaining/second-chance/index.ts
index 5411fda..66d7409 100644
--- a/src/components/domains/retaining/second-chance/index.ts
+++ b/src/components/domains/retaining/second-chance/index.ts
@@ -1 +1 @@
-export { default as SecondChancePage } from "./SecondChancePage/SecondChancePage";
\ No newline at end of file
+export { default as SecondChancePage } from "./SecondChancePage/SecondChancePage";
diff --git a/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.module.scss b/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.module.scss
index a4771eb..8d892a7 100644
--- a/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.module.scss
+++ b/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.module.scss
@@ -1,32 +1,32 @@
 .buttonsContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 32px;
-    margin-top: 188px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  margin-top: 188px;
 
-    &>.button {
-        position: relative;
+  & > .button {
+    position: relative;
 
-        &>.loaderContainer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: rgba(0, 0, 0, 0.2);
-            border-radius: inherit;
-            backdrop-filter: blur(3px);
-            transition: background-color 0.3s ease-in-out;
-        }
+    & > .loaderContainer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: inherit;
+      backdrop-filter: blur(3px);
+      transition: background-color 0.3s ease-in-out;
     }
+  }
 
-    &>.buttonCancel {
-        background: none;
-        color: #5D5D5D;
-        outline: 2px solid #9A9797;
-    }
-}
\ No newline at end of file
+  & > .buttonCancel {
+    background: none;
+    color: #5d5d5d;
+    outline: 2px solid #9a9797;
+  }
+}
diff --git a/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.tsx b/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.tsx
index d5c064a..9121b54 100644
--- a/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.tsx
+++ b/src/components/domains/retaining/stop-for-30-days/Buttons/Buttons.tsx
@@ -13,60 +13,62 @@ import { ELottieKeys } from "@/shared/constants/lottie";
 import styles from "./Buttons.module.scss";
 
 export default function Buttons() {
-    const t = useTranslations("StopFor30Days");
-    const router = useRouter();
-    // const api = useApi();
-    // const token = useSelector(selectors.selectToken);
-    // const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
-    useLottie({
-        preloadKey: ELottieKeys.loaderCheckMark2,
-    });
-    useLottie({
-        preloadKey: ELottieKeys.confetti,
-    });
-    // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
-    // const retainingFunnel = ERetainingFunnel.Red;
-    const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
+  const t = useTranslations("StopFor30Days");
+  const router = useRouter();
+  // const api = useApi();
+  // const token = useSelector(selectors.selectToken);
+  // const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
+  useLottie({
+    preloadKey: ELottieKeys.loaderCheckMark2,
+  });
+  useLottie({
+    preloadKey: ELottieKeys.confetti,
+  });
+  // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
+  // const retainingFunnel = ERetainingFunnel.Red;
+  const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
 
-    const handleStopClick = async () => {
-        if (isLoadingButton) return;
-        setIsLoadingButton(true);
-        // const response = await api.userSubscriptionAction({
-        //     subscriptionId: cancellingSubscriptionId,
-        //     action: "pause_30",
-        //     token
-        // });
-        // if (response.status === "success") {
-        //     navigate(routes.client.retainingFunnelSubscriptionStopped());
-        // }
-    }
+  const handleStopClick = async () => {
+    if (isLoadingButton) return;
+    setIsLoadingButton(true);
+    // const response = await api.userSubscriptionAction({
+    //     subscriptionId: cancellingSubscriptionId,
+    //     action: "pause_30",
+    //     token
+    // });
+    // if (response.status === "success") {
+    //     navigate(routes.client.retainingFunnelSubscriptionStopped());
+    // }
+  };
 
-    const handleCancelClick = () => {
-        if (isLoadingButton) return;
-        // if (retainingFunnel === ERetainingFunnel.Green) {
-        //     return navigate(routes.client.retainingFunnelChangeMind());
-        // }
-        router.push(ROUTES.retainingFunnelCancellationOfSubscription());
-    }
+  const handleCancelClick = () => {
+    if (isLoadingButton) return;
+    // if (retainingFunnel === ERetainingFunnel.Green) {
+    //     return navigate(routes.client.retainingFunnelChangeMind());
+    // }
+    router.push(ROUTES.retainingFunnelCancellationOfSubscription());
+  };
 
-    return (
-        <div className={styles.buttonsContainer}>
-            <RetainingButton
-                className={styles.button}
-                active={true}
-                onClick={handleStopClick}
-            >
-                {isLoadingButton && <div className={styles.loaderContainer}>
-                    <Spinner />
-                </div>}
-                {t("stop")}
-            </RetainingButton>
-            <RetainingButton
-                className={styles.buttonCancel}
-                onClick={handleCancelClick}
-            >
-                {t("cancel")}
-            </RetainingButton>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.buttonsContainer}>
+      <RetainingButton
+        className={styles.button}
+        active={true}
+        onClick={handleStopClick}
+      >
+        {isLoadingButton && (
+          <div className={styles.loaderContainer}>
+            <Spinner />
+          </div>
+        )}
+        {t("stop")}
+      </RetainingButton>
+      <RetainingButton
+        className={styles.buttonCancel}
+        onClick={handleCancelClick}
+      >
+        {t("cancel")}
+      </RetainingButton>
+    </div>
+  );
+}
diff --git a/src/components/domains/retaining/stop-for-30-days/index.ts b/src/components/domains/retaining/stop-for-30-days/index.ts
index 2b56371..479666e 100644
--- a/src/components/domains/retaining/stop-for-30-days/index.ts
+++ b/src/components/domains/retaining/stop-for-30-days/index.ts
@@ -1 +1 @@
-export { default as StopFor30DaysButtons } from "./Buttons/Buttons";
\ No newline at end of file
+export { default as StopFor30DaysButtons } from "./Buttons/Buttons";
diff --git a/src/components/domains/retaining/subscription-stopped/Button/Button.module.scss b/src/components/domains/retaining/subscription-stopped/Button/Button.module.scss
index 8ec2023..98bfbf8 100644
--- a/src/components/domains/retaining/subscription-stopped/Button/Button.module.scss
+++ b/src/components/domains/retaining/subscription-stopped/Button/Button.module.scss
@@ -1,4 +1,4 @@
 .button {
-    width: 100%;
-    margin-top: 36px;
-}
\ No newline at end of file
+  width: 100%;
+  margin-top: 36px;
+}
diff --git a/src/components/domains/retaining/subscription-stopped/Button/Button.tsx b/src/components/domains/retaining/subscription-stopped/Button/Button.tsx
index f30aecf..92c6a42 100644
--- a/src/components/domains/retaining/subscription-stopped/Button/Button.tsx
+++ b/src/components/domains/retaining/subscription-stopped/Button/Button.tsx
@@ -10,16 +10,20 @@ import { RetainingButton } from "../..";
 import styles from "./Button.module.scss";
 
 export default function Button() {
-    const t = useTranslations("PlanCancelled");
-    const router = useRouter();
+  const t = useTranslations("PlanCancelled");
+  const router = useRouter();
 
-    const handleButtonClick = () => {
-        router.push(ROUTES.home());
-    }
+  const handleButtonClick = () => {
+    router.push(ROUTES.home());
+  };
 
-    return (
-        <RetainingButton className={styles.button} active={true} onClick={handleButtonClick}>
-            {t("button")}
-        </RetainingButton>
-    )
-}
\ No newline at end of file
+  return (
+    <RetainingButton
+      className={styles.button}
+      active={true}
+      onClick={handleButtonClick}
+    >
+      {t("button")}
+    </RetainingButton>
+  );
+}
diff --git a/src/components/domains/retaining/subscription-stopped/index.ts b/src/components/domains/retaining/subscription-stopped/index.ts
index da19bf4..9f5b992 100644
--- a/src/components/domains/retaining/subscription-stopped/index.ts
+++ b/src/components/domains/retaining/subscription-stopped/index.ts
@@ -1 +1 @@
-export { default as SubscriptionStoppedButton } from "./Button/Button";
\ No newline at end of file
+export { default as SubscriptionStoppedButton } from "./Button/Button";
diff --git a/src/components/domains/retaining/what-reason/Buttons/Buttons.module.scss b/src/components/domains/retaining/what-reason/Buttons/Buttons.module.scss
index 57fb845..9031f7d 100644
--- a/src/components/domains/retaining/what-reason/Buttons/Buttons.module.scss
+++ b/src/components/domains/retaining/what-reason/Buttons/Buttons.module.scss
@@ -1,10 +1,10 @@
 .answers {
-    display: flex;
-    flex-direction: column;
-    margin-top: 24px;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 24px;
+  gap: 16px;
 
-    &>.answer {
-        border-radius: 21px;
-    }
-}
\ No newline at end of file
+  & > .answer {
+    border-radius: 21px;
+  }
+}
diff --git a/src/components/domains/retaining/what-reason/Buttons/Buttons.tsx b/src/components/domains/retaining/what-reason/Buttons/Buttons.tsx
index fac1f96..b51b92b 100644
--- a/src/components/domains/retaining/what-reason/Buttons/Buttons.tsx
+++ b/src/components/domains/retaining/what-reason/Buttons/Buttons.tsx
@@ -4,58 +4,58 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { ROUTES } from "@/shared/constants/client-routes";
-import { ERetainingFunnel } from "@/types"
+import { ERetainingFunnel } from "@/types";
 
 import { RetainingButton } from "../..";
 
-import styles from './Buttons.module.scss'
+import styles from "./Buttons.module.scss";
 
 export interface WhatReasonAnswer {
-    id: number;
-    title: string;
-    funnel: ERetainingFunnel;
+  id: number;
+  title: string;
+  funnel: ERetainingFunnel;
 }
 
 interface ButtonsProps {
-    answers: WhatReasonAnswer[]
+  answers: WhatReasonAnswer[];
 }
 
-export default function Buttons({
-    answers
-}: ButtonsProps) {
-    const router = useRouter()
+export default function Buttons({ answers }: ButtonsProps) {
+  const router = useRouter();
 
-    const [activeAnswer, setActiveAnswer] = useState<WhatReasonAnswer | null>(null);
+  const [activeAnswer, setActiveAnswer] = useState<WhatReasonAnswer | null>(
+    null
+  );
 
-    const handleNext = (answer: WhatReasonAnswer) => {
-        setActiveAnswer(answer);
-        // dispatch(actions.retainingFunnel.setFunnel(answer.funnel));
-        const timer = setTimeout(() => {
-            if (answer.funnel === ERetainingFunnel.Red) {
-                router.push(ROUTES.retainingFunnelSecondChance());
-            }
-            if (answer.funnel === ERetainingFunnel.Green) {
-                router.push(ROUTES.retainingFunnelStopFor30Days());
-            }
-            if (answer.funnel === ERetainingFunnel.Purple) {
-                router.push(ROUTES.retainingFunnelChangeMind());
-            }
-        }, 1000);
-        return () => clearTimeout(timer);
-    }
+  const handleNext = (answer: WhatReasonAnswer) => {
+    setActiveAnswer(answer);
+    // dispatch(actions.retainingFunnel.setFunnel(answer.funnel));
+    const timer = setTimeout(() => {
+      if (answer.funnel === ERetainingFunnel.Red) {
+        router.push(ROUTES.retainingFunnelSecondChance());
+      }
+      if (answer.funnel === ERetainingFunnel.Green) {
+        router.push(ROUTES.retainingFunnelStopFor30Days());
+      }
+      if (answer.funnel === ERetainingFunnel.Purple) {
+        router.push(ROUTES.retainingFunnelChangeMind());
+      }
+    }, 1000);
+    return () => clearTimeout(timer);
+  };
 
-    return (
-        <div className={styles.answers}>
-            {answers.map((answer) => (
-                <RetainingButton
-                    key={answer.id}
-                    className={styles.answer}
-                    active={activeAnswer?.id === answer.id}
-                    onClick={() => handleNext(answer)}
-                >
-                    {answer.title}
-                </RetainingButton>
-            ))}
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.answers}>
+      {answers.map(answer => (
+        <RetainingButton
+          key={answer.id}
+          className={styles.answer}
+          active={activeAnswer?.id === answer.id}
+          onClick={() => handleNext(answer)}
+        >
+          {answer.title}
+        </RetainingButton>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/domains/retaining/what-reason/index.tsx b/src/components/domains/retaining/what-reason/index.tsx
index a5a83ca..34e11d0 100644
--- a/src/components/domains/retaining/what-reason/index.tsx
+++ b/src/components/domains/retaining/what-reason/index.tsx
@@ -1 +1,4 @@
-export { type WhatReasonAnswer,default as WhatReasonsButtons } from "./Buttons/Buttons"
\ No newline at end of file
+export {
+  type WhatReasonAnswer,
+  default as WhatReasonsButtons,
+} from "./Buttons/Buttons";
diff --git a/src/components/layout/Drawer/Drawer.module.scss b/src/components/layout/Drawer/Drawer.module.scss
index 2745607..a7e0889 100644
--- a/src/components/layout/Drawer/Drawer.module.scss
+++ b/src/components/layout/Drawer/Drawer.module.scss
@@ -1,51 +1,51 @@
 .overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 8888;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 8888;
 }
 
 .drawer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100vw;
+  max-width: var(--drawer-max-width, 320px);
+  background: #fff;
+  z-index: 8889;
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease;
+
+  &.open {
+    transform: translateX(0);
+  }
+
+  @media (max-width: 640px) {
     width: 100vw;
-    max-width: var(--drawer-max-width, 320px);
-    background: #fff;
-    z-index: 8889;
-    overflow-y: auto;
-    transform: translateX(-100%);
-    transition: transform 0.25s ease;
-
-    &.open {
-        transform: translateX(0);
-    }
-
-    @media (max-width: 640px) {
-        width: 100vw;
-        max-width: 100vw;
-    }
+    max-width: 100vw;
+  }
 }
 
 @keyframes slide-in {
-    to {
-        transform: translateX(0);
-    }
+  to {
+    transform: translateX(0);
+  }
 }
 
-.close {
-    position: absolute;
-    top: 24px;
-    right: 24px;
-    width: 18px;
-    height: 18px;
-    background: none;
-    padding: 0;
+.close.close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 18px;
+  height: 18px;
+  background: none;
+  padding: 0;
 }
 
 .content {
-    padding: 64px 24px 24px;
-    display: flex;
-    flex-direction: column;
-}
\ No newline at end of file
+  padding: 64px 24px 24px;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/layout/Drawer/Drawer.tsx b/src/components/layout/Drawer/Drawer.tsx
index dbd4f42..cbfbb1a 100644
--- a/src/components/layout/Drawer/Drawer.tsx
+++ b/src/components/layout/Drawer/Drawer.tsx
@@ -1,39 +1,39 @@
-'use client';
+"use client";
 
-import Link from 'next/link';
-import clsx from 'clsx';
+import Link from "next/link";
+import clsx from "clsx";
 
-import { Button, Icon, Typography } from '@/components/ui';
-import { IconName } from '@/components/ui/Icon/Icon';
-import { ROUTES } from '@/shared/constants/client-routes';
+import { Button, Icon, Typography } from "@/components/ui";
+import { IconName } from "@/components/ui/Icon/Icon";
+import { ROUTES } from "@/shared/constants/client-routes";
 
-import styles from './Drawer.module.scss';
+import styles from "./Drawer.module.scss";
 
 interface DrawerProps {
-    isOpen: boolean;
-    onClose: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
 export default function Drawer({ isOpen, onClose }: DrawerProps) {
-    return (
-        <>
-            {isOpen && <div className={styles.overlay} onClick={onClose} />}
-            <aside className={clsx(styles.drawer, isOpen && styles.open)}>
-                <Button className={styles.close} onClick={onClose} aria-label="Close">
-                    <Icon
-                        size={{
-                            height: 18,
-                            width: 18
-                        }}
-                        name={IconName.Cross}
-                    />
-                </Button>
-                <nav className={styles.content}>
-                    <Link href={ROUTES.profile()}>
-                        <Typography weight='medium'>Profile</Typography>
-                    </Link>
-                </nav>
-            </aside>
-        </>
-    );
-}
\ No newline at end of file
+  return (
+    <>
+      {isOpen && <div className={styles.overlay} onClick={onClose} />}
+      <aside className={clsx(styles.drawer, isOpen && styles.open)}>
+        <Button className={styles.close} onClick={onClose} aria-label="Close">
+          <Icon
+            size={{
+              height: 18,
+              width: 18,
+            }}
+            name={IconName.Cross}
+          />
+        </Button>
+        <nav className={styles.content}>
+          <Link href={ROUTES.profile()}>
+            <Typography weight="medium">Profile</Typography>
+          </Link>
+        </nav>
+      </aside>
+    </>
+  );
+}
diff --git a/src/components/layout/Drawer/DrawerContext.tsx b/src/components/layout/Drawer/DrawerContext.tsx
index cd4198a..e0ce831 100644
--- a/src/components/layout/Drawer/DrawerContext.tsx
+++ b/src/components/layout/Drawer/DrawerContext.tsx
@@ -1,39 +1,46 @@
-'use client';
+"use client";
 
-import { createContext, ReactNode, useCallback, useContext, useEffect,useState } from 'react';
-import { usePathname } from 'next/navigation';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { usePathname } from "next/navigation";
 
-import Drawer from './Drawer';
+import Drawer from "./Drawer";
 
 type DrawerCtx = {
-    isOpen: boolean;
-    open: () => void;
-    close: () => void;
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
 };
 
 const DrawerContext = createContext<DrawerCtx | null>(null);
 
 export function useDrawer() {
-    const ctx = useContext(DrawerContext);
-    if (!ctx) throw new Error('useDrawer must be used within DrawerProvider');
-    return ctx;
+  const ctx = useContext(DrawerContext);
+  if (!ctx) throw new Error("useDrawer must be used within DrawerProvider");
+  return ctx;
 }
 
 export function DrawerProvider({ children }: { children: ReactNode }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
 
-    const open = useCallback(() => setIsOpen(true), []);
-    const close = useCallback(() => setIsOpen(false), []);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
 
-    useEffect(() => {
-        setIsOpen(false);
-    }, [pathname]);
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
 
-    return (
-        <DrawerContext.Provider value={{ isOpen, open, close }}>
-            {children}
-            <Drawer isOpen={isOpen} onClose={close} />
-        </DrawerContext.Provider>
-    );
-}
\ No newline at end of file
+  return (
+    <DrawerContext.Provider value={{ isOpen, open, close }}>
+      {children}
+      <Drawer isOpen={isOpen} onClose={close} />
+    </DrawerContext.Provider>
+  );
+}
diff --git a/src/components/layout/Logo/Logo.tsx b/src/components/layout/Logo/Logo.tsx
index 7b02252..c48fb8f 100644
--- a/src/components/layout/Logo/Logo.tsx
+++ b/src/components/layout/Logo/Logo.tsx
@@ -1,5 +1,9 @@
 import { Typography } from "@/components/ui";
 
 export default function Logo() {
-    return <Typography size="xl" weight="medium">WIT</Typography>
-}
\ No newline at end of file
+  return (
+    <Typography size="xl" weight="medium">
+      WIT
+    </Typography>
+  );
+}
diff --git a/src/components/layout/NavigationBar/NavigationBar.module.scss b/src/components/layout/NavigationBar/NavigationBar.module.scss
index 16a8097..0f6fd6c 100644
--- a/src/components/layout/NavigationBar/NavigationBar.module.scss
+++ b/src/components/layout/NavigationBar/NavigationBar.module.scss
@@ -1,29 +1,29 @@
 .header {
-    width: 100%;
-    min-height: 56px;
-    height: fit-content;
-    padding: 16px;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
+  width: 100%;
+  min-height: 56px;
+  height: fit-content;
+  padding: 16px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
 }
 
-.header> :first-child {
-    justify-self: start;
+.header > :first-child {
+  justify-self: start;
 }
 
-.header> :nth-child(2) {
-    justify-self: center;
+.header > :nth-child(2) {
+  justify-self: center;
 }
 
-.header> :nth-child(n+3) {
-    justify-self: end;
-    display: inline-flex;
-    gap: 16px;
+.header > :nth-child(n + 3) {
+  justify-self: end;
+  display: inline-flex;
+  gap: 16px;
 }
 
 .menuButton.menuButton {
-    padding: 0;
-    width: fit-content;
-    background: none;
-}
\ No newline at end of file
+  padding: 0;
+  width: fit-content;
+  background: none;
+}
diff --git a/src/components/layout/NavigationBar/NavigationBar.tsx b/src/components/layout/NavigationBar/NavigationBar.tsx
index 58b646f..6cf28a5 100644
--- a/src/components/layout/NavigationBar/NavigationBar.tsx
+++ b/src/components/layout/NavigationBar/NavigationBar.tsx
@@ -14,24 +14,24 @@ import styles from "./NavigationBar.module.scss";
 import { useDrawer } from "..";
 
 interface NavigationBarProps {
-    className?: string;
+  className?: string;
 }
 
-export default function NavigationBar({
-    className
-}: NavigationBarProps) {
-    const { open } = useDrawer();
+export default function NavigationBar({ className }: NavigationBarProps) {
+  const { open } = useDrawer();
 
-    return (
-        <header className={clsx(styles.header, className)}>
-            <Button className={styles.menuButton} onClick={open}>
-                <Icon name={IconName.Menu} />
-            </Button>
-            <Link href={ROUTES.home()}><Logo /></Link>
-            <div>
-                <Icon name={IconName.Notification} />
-                <Icon name={IconName.Search} />
-            </div>
-        </header>
-    )
-}
\ No newline at end of file
+  return (
+    <header className={clsx(styles.header, className)}>
+      <Button className={styles.menuButton} onClick={open}>
+        <Icon name={IconName.Menu} />
+      </Button>
+      <Link href={ROUTES.home()}>
+        <Logo />
+      </Link>
+      <div>
+        <Icon name={IconName.Notification} />
+        <Icon name={IconName.Search} />
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
index ac1c600..24f5dfa 100644
--- a/src/components/layout/index.ts
+++ b/src/components/layout/index.ts
@@ -1,4 +1,4 @@
-export { DrawerProvider, useDrawer } from './Drawer/DrawerContext';
-export { default as Logo } from './Logo/Logo';
-export { default as NavigationBar } from './NavigationBar/NavigationBar';
-export { default as StepperBar } from './StepperBar/StepperBar';
\ No newline at end of file
+export { DrawerProvider, useDrawer } from "./Drawer/DrawerContext";
+export { default as Logo } from "./Logo/Logo";
+export { default as NavigationBar } from "./NavigationBar/NavigationBar";
+export { default as StepperBar } from "./StepperBar/StepperBar";
diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss
index d10044b..df24bf7 100644
--- a/src/components/ui/Button/Button.module.scss
+++ b/src/components/ui/Button/Button.module.scss
@@ -1,20 +1,23 @@
 .button {
-    font: inherit;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 24px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.2s, color 0.2s, border 0.2s;
-    outline: none;
-    user-select: none;
-    width: 100%;
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 24px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border 0.2s;
+  outline: none;
+  user-select: none;
+  width: 100%;
 }
 
 .primary {
-    background: #1694F7;
+  background: #1694f7;
 }
 
 // .primary:hover:not(:disabled) {
@@ -22,7 +25,7 @@
 // }
 
 .secondary {
-    background: #f3f4f6;
+  background: #f3f4f6;
 }
 
 // .secondary:hover:not(:disabled) {
@@ -30,8 +33,8 @@
 // }
 
 .outline {
-    background: #fff;
-    border: 1.5px solid #3490ec;
+  background: #fff;
+  border: 1.5px solid #3490ec;
 }
 
 // .outline:hover:not(:disabled) {
@@ -39,7 +42,7 @@
 // }
 
 .ghost {
-    background: transparent;
+  background: transparent;
 }
 
 // .ghost:hover:not(:disabled) {
@@ -47,19 +50,19 @@
 // }
 
 .sm {
-    padding: 0px 16px;
-    min-height: 35px;
+  padding: 0px 16px;
+  min-height: 35px;
 }
 
 .md {
-    padding: 10px 20px;
+  padding: 10px 20px;
 }
 
 .lg {
-    padding: 14px 28px;
+  padding: 14px 28px;
 }
 
 .button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
\ No newline at end of file
+  opacity: 0.6;
+  cursor: not-allowed;
+}
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
index 910a933..a822db4 100644
--- a/src/components/ui/Button/Button.tsx
+++ b/src/components/ui/Button/Button.tsx
@@ -22,15 +22,10 @@ export default function Button({
 }: ButtonProps) {
   return (
     <button
-      className={clsx(
-        styles.button,
-        styles[variant],
-        styles[size],
-        className
-      )}
+      className={clsx(styles.button, styles[variant], styles[size], className)}
       {...rest}
     >
       {children}
     </button>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/ui/Card/Card.module.scss b/src/components/ui/Card/Card.module.scss
index 19dfa05..8b9b4fc 100644
--- a/src/components/ui/Card/Card.module.scss
+++ b/src/components/ui/Card/Card.module.scss
@@ -1,7 +1,9 @@
 .card {
-    background: #fff;
-    border-radius: 24px;
-    border: 1px solid rgba(229, 231, 235, 1);
-    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1), 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-    padding: 16px;
-}
\ No newline at end of file
+  background: #fff;
+  border-radius: 24px;
+  border: 1px solid rgba(229, 231, 235, 1);
+  box-shadow:
+    0px 10px 15px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 6px 0px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+}
diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx
index 7533bcb..bf16fa5 100644
--- a/src/components/ui/Card/Card.tsx
+++ b/src/components/ui/Card/Card.tsx
@@ -4,15 +4,15 @@ import clsx from "clsx";
 import styles from "./Card.module.scss";
 
 type CardProps = {
-    children: ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
 export default function Card({ children, className, style }: CardProps) {
-    return (
-        <div className={clsx(styles.card, className)} style={style}>
-            {children}
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className={clsx(styles.card, className)} style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/EmailInput/EmailInput.module.scss b/src/components/ui/EmailInput/EmailInput.module.scss
index 379fd60..831c5af 100644
--- a/src/components/ui/EmailInput/EmailInput.module.scss
+++ b/src/components/ui/EmailInput/EmailInput.module.scss
@@ -1,48 +1,51 @@
 .input-container {
+  width: 100%;
+  position: relative;
+  text-align: center;
+  margin-bottom: 20px;
+  max-width: 400px;
+  min-width: 250px;
+
+  & > input {
+    appearance: none;
+    border-radius: 14px;
+    color: #121620;
+    font-size: 15px;
+    height: 48px;
+    line-height: 125%;
+    outline: none;
+    padding: 16px 24px 5px;
+    transition: border-color 0.3s ease;
     width: 100%;
-    position: relative;
-    text-align: center;
-    margin-bottom: 20px;
-    max-width: 400px;
-    min-width: 250px;
 
-    &>input {
-        appearance: none;
-        border-radius: 14px;
-        color: #121620;
-        font-size: 15px;
-        height: 48px;
-        line-height: 125%;
-        outline: none;
-        padding: 16px 24px 5px;
-        transition: border-color 0.3s ease;
-        width: 100%;
-
-        &:focus {
-            border-color: #000;
-            transition-delay: 0.1s;
-        }
+    &:focus {
+      border-color: #000;
+      transition-delay: 0.1s;
     }
+  }
 }
 
 .input__placeholder {
-    color: #8e8e93;
-    font-size: 16px;
-    left: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
-    white-space: nowrap;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    user-select: none;
-    pointer-events: none;
+  color: #8e8e93;
+  font-size: 16px;
+  left: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    top 0.3s ease,
+    color 0.3s ease,
+    font-size 0.3s ease;
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  user-select: none;
+  pointer-events: none;
 }
 
-.input-container>input:focus+.input__placeholder,
-.input-container>input:not(:placeholder-shown)+.input__placeholder {
-    font-size: 12px;
-    top: 12px;
-    width: auto;
-}
\ No newline at end of file
+.input-container > input:focus + .input__placeholder,
+.input-container > input:not(:placeholder-shown) + .input__placeholder {
+  font-size: 12px;
+  top: 12px;
+  width: auto;
+}
diff --git a/src/components/ui/EmailInput/EmailInput.tsx b/src/components/ui/EmailInput/EmailInput.tsx
index 269dafa..fa769ea 100644
--- a/src/components/ui/EmailInput/EmailInput.tsx
+++ b/src/components/ui/EmailInput/EmailInput.tsx
@@ -18,7 +18,9 @@ interface IEmailInputProps {
   readonly?: boolean;
 }
 
-function EmailInput(props: FormField<string> & IEmailInputProps): React.ReactNode {
+function EmailInput(
+  props: FormField<string> & IEmailInputProps
+): React.ReactNode {
   const {
     name,
     value,
diff --git a/src/components/ui/GPTAnimationText/GPTAnimationText.module.scss b/src/components/ui/GPTAnimationText/GPTAnimationText.module.scss
index 07c9356..e68f69f 100644
--- a/src/components/ui/GPTAnimationText/GPTAnimationText.module.scss
+++ b/src/components/ui/GPTAnimationText/GPTAnimationText.module.scss
@@ -1,77 +1,82 @@
 .list {
-    position: relative;
+  position: relative;
+  width: 100%;
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // gap: 32px;
+  font-size: 20px;
+  // color: #1A6697;
+  color: #acacac;
+  line-height: 25px;
+  text-align: center;
+  overflow: hidden;
+
+  & > .item {
+    transition: margin-top 0.5s ease-in-out;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
     width: 100%;
-    margin-top: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    // gap: 32px;
-    font-size: 20px;
-    // color: #1A6697;
-    color: #acacac;
-    line-height: 25px;
-    text-align: center;
+    display: block;
+    background: var(--background);
+    // padding: 16px 0;
     overflow: hidden;
+    opacity: 0;
+    animation: list-item ease-in-out forwards;
 
-    &>.item {
-        transition: margin-top 0.5s ease-in-out;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 100%;
-        display: block;
-        background: var(--background);
-        // padding: 16px 0;
-        overflow: hidden;
-        opacity: 0;
-        animation: list-item ease-in-out forwards;
-
-        &>.line {
-            display: block;
-            height: 100%;
-            width: 64px;
-            background: linear-gradient(to right, #acacac 0%, #333333 50%, #acacac 100%);
-            top: 0;
-            left: 50%;
-            position: absolute;
-            mix-blend-mode: color-burn;
-            filter: blur(3px);
-            animation: line-move cubic-bezier(0.65, 0, 0.46, 1.02) infinite;
-        }
-
-        &>.text {
-            position: relative;
-            color: #000;
-            z-index: 1;
-        }
+    & > .line {
+      display: block;
+      height: 100%;
+      width: 64px;
+      background: linear-gradient(
+        to right,
+        #acacac 0%,
+        #333333 50%,
+        #acacac 100%
+      );
+      top: 0;
+      left: 50%;
+      position: absolute;
+      mix-blend-mode: color-burn;
+      filter: blur(3px);
+      animation: line-move cubic-bezier(0.65, 0, 0.46, 1.02) infinite;
     }
+
+    & > .text {
+      position: relative;
+      color: #000;
+      z-index: 1;
+    }
+  }
 }
 
 @keyframes line-move {
-    0% {
-        left: -64px;
-    }
+  0% {
+    left: -64px;
+  }
 
-    100% {
-        left: 100%;
-    }
+  100% {
+    left: 100%;
+  }
 }
 
 @keyframes list-item {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    10% {
-        opacity: 1;
-    }
+  10% {
+    opacity: 1;
+  }
 
-    90% {
-        opacity: 1;
-    }
+  90% {
+    opacity: 1;
+  }
 
-    100% {
-        opacity: 0;
-    }
-}
\ No newline at end of file
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/components/ui/GPTAnimationText/GPTAnimationText.tsx b/src/components/ui/GPTAnimationText/GPTAnimationText.tsx
index b49bd3c..24059d0 100644
--- a/src/components/ui/GPTAnimationText/GPTAnimationText.tsx
+++ b/src/components/ui/GPTAnimationText/GPTAnimationText.tsx
@@ -5,54 +5,57 @@ import { useEffect, useRef, useState } from "react";
 import styles from "./GPTAnimationText.module.scss";
 
 interface GPTAnimationTextProps {
-    points: Array<string>;
-    totalAnimationTime: number;
+  points: Array<string>;
+  totalAnimationTime: number;
 }
 
 function GPTAnimationText({
-    points,
-    totalAnimationTime
+  points,
+  totalAnimationTime,
 }: GPTAnimationTextProps) {
+  const listRef = useRef<Array<HTMLParagraphElement | null>>([]);
+  const [listHeight, setListHeight] = useState(0);
 
-    const listRef = useRef<Array<HTMLParagraphElement | null>>([]);
-    const [listHeight, setListHeight] = useState(0);
+  useEffect(() => {
+    let maxHeight = 0;
+    listRef.current.forEach(item => {
+      if (item?.offsetHeight && item.offsetHeight > maxHeight) {
+        maxHeight = item.offsetHeight;
+      }
+    });
+    setListHeight(maxHeight);
+  }, [listRef]);
 
-    useEffect(() => {
-        let maxHeight = 0;
-        listRef.current.forEach((item) => {
-            if (item?.offsetHeight && item.offsetHeight > maxHeight) {
-                maxHeight = item.offsetHeight;
-            }
-        });
-        setListHeight(maxHeight);
-    }, [listRef]);
-
-
-    return (
-        <div className={styles.list} style={{
-            height: `${listHeight}px`
-        }}>
-            {points.map((element, index) => (
-                <p
-                    key={index}
-                    className={styles.item}
-                    ref={(el) => { listRef.current[index] = el }}
-                    style={{
-                        animationDuration: `${totalAnimationTime / (points.length)}ms`,
-                        animationDelay: `${index * (totalAnimationTime / (points.length))}ms`
-                    }}
-                >
-                    {element}
-                    <span
-                        className={styles.line}
-                        style={{
-                            animationDuration: `${totalAnimationTime / (points.length)}ms`
-                        }}
-                    />
-                </p>
-            ))}
-        </div>
-    )
+  return (
+    <div
+      className={styles.list}
+      style={{
+        height: `${listHeight}px`,
+      }}
+    >
+      {points.map((element, index) => (
+        <p
+          key={element}
+          className={styles.item}
+          ref={el => {
+            listRef.current[index] = el;
+          }}
+          style={{
+            animationDuration: `${totalAnimationTime / points.length}ms`,
+            animationDelay: `${index * (totalAnimationTime / points.length)}ms`,
+          }}
+        >
+          {element}
+          <span
+            className={styles.line}
+            style={{
+              animationDuration: `${totalAnimationTime / points.length}ms`,
+            }}
+          />
+        </p>
+      ))}
+    </div>
+  );
 }
 
-export default GPTAnimationText
\ No newline at end of file
+export default GPTAnimationText;
diff --git a/src/components/ui/Grid/Grid.module.scss b/src/components/ui/Grid/Grid.module.scss
index 45aa0ab..2eceb45 100644
--- a/src/components/ui/Grid/Grid.module.scss
+++ b/src/components/ui/Grid/Grid.module.scss
@@ -1,5 +1,5 @@
 .grid {
-    display: grid;
-    width: 100%;
-    min-width: fit-content;
-}
\ No newline at end of file
+  display: grid;
+  width: 100%;
+  min-width: fit-content;
+}
diff --git a/src/components/ui/Grid/Grid.tsx b/src/components/ui/Grid/Grid.tsx
index 55e5334..19cebc4 100644
--- a/src/components/ui/Grid/Grid.tsx
+++ b/src/components/ui/Grid/Grid.tsx
@@ -4,26 +4,32 @@ import clsx from "clsx";
 import styles from "./Grid.module.scss";
 
 type GridProps = {
-    children: ReactNode;
-    columns?: number;
-    gap?: number | string;
-    className?: string;
-    style?: React.CSSProperties;
+  children: ReactNode;
+  columns?: number;
+  gap?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
-export default function Grid({ children, columns = 3, gap = 16, className, style }: GridProps) {
-    const gridTemplateColumns = `repeat(${columns}, 1fr)`
+export default function Grid({
+  children,
+  columns = 3,
+  gap = 16,
+  className,
+  style,
+}: GridProps) {
+  const gridTemplateColumns = `repeat(${columns}, 1fr)`;
 
-    return (
-        <div
-            className={clsx(styles.grid, className)}
-            style={{
-                gridTemplateColumns,
-                gap,
-                ...style,
-            }}
-        >
-            {children}
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div
+      className={clsx(styles.grid, className)}
+      style={{
+        gridTemplateColumns,
+        gap,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/Icon/Icon.tsx b/src/components/ui/Icon/Icon.tsx
index f11b6af..8e11fcb 100644
--- a/src/components/ui/Icon/Icon.tsx
+++ b/src/components/ui/Icon/Icon.tsx
@@ -11,69 +11,82 @@ import StarIcon from "./icons/Star";
 import VideoIcon from "./icons/Video";
 
 export enum IconName {
-    Notification,
-    Search,
-    Menu,
-    Article,
-    Video,
-    Chevron,
-    Star,
-    Cross
-};
+  Notification,
+  Search,
+  Menu,
+  Article,
+  Video,
+  Chevron,
+  Star,
+  Cross,
+}
 
-const icons: Record<IconName, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
-    [IconName.Notification]: NotificationIcon,
-    [IconName.Search]: SearchIcon,
-    [IconName.Menu]: MenuIcon,
-    [IconName.Article]: ArticleIcon,
-    [IconName.Video]: VideoIcon,
-    [IconName.Chevron]: ChevronIcon,
-    [IconName.Star]: StarIcon,
-    [IconName.Cross]: CrossIcon,
+const icons: Record<
+  IconName,
+  React.ComponentType<React.SVGProps<SVGSVGElement>>
+> = {
+  [IconName.Notification]: NotificationIcon,
+  [IconName.Search]: SearchIcon,
+  [IconName.Menu]: MenuIcon,
+  [IconName.Article]: ArticleIcon,
+  [IconName.Video]: VideoIcon,
+  [IconName.Chevron]: ChevronIcon,
+  [IconName.Star]: StarIcon,
+  [IconName.Cross]: CrossIcon,
 };
 
 export type IconProps = {
-    name: IconName;
-    size?: {
-        height: number | string;
-        width: number | string;
-    };
-    color?: string;
-    className?: string;
-    children?: ReactNode;
-    cursor?: "pointer" | "auto"
-    iconStyle?: CSSProperties
-    style?: CSSProperties
+  name: IconName;
+  size?: {
+    height: number | string;
+    width: number | string;
+  };
+  color?: string;
+  className?: string;
+  children?: ReactNode;
+  cursor?: "pointer" | "auto";
+  iconStyle?: CSSProperties;
+  style?: CSSProperties;
 };
 
 export default function Icon({
-    name,
-    size = {
-        height: 24,
-        width: 24
-    },
-    color = "currentColor",
-    className,
-    children,
-    cursor = "pointer",
-    style,
-    ...rest
+  name,
+  size = {
+    height: 24,
+    width: 24,
+  },
+  color = "currentColor",
+  className,
+  children,
+  cursor = "pointer",
+  style,
+  ...rest
 }: IconProps) {
-    const Component = icons[name];
-    return (
-        <span style={{ position: "relative", display: "inline-block", cursor, width: size.width, height: size.height, ...style }} className={clsx(className)}>
-            <Component
-                width={size.width}
-                height={size.height}
-                color={color}
-                aria-hidden="true"
-                {...rest}
-                style={{
-                    display: "block",
-                    ...rest.iconStyle
-                }}
-            />
-            {children}
-        </span>
-    );
-}
\ No newline at end of file
+  const Component = icons[name];
+  return (
+    <span
+      style={{
+        position: "relative",
+        display: "inline-block",
+        cursor,
+        width: size.width,
+        height: size.height,
+        ...style,
+      }}
+      className={clsx(className)}
+    >
+      <Component
+        width={size.width}
+        height={size.height}
+        color={color}
+        aria-hidden="true"
+        {...rest}
+        style={{
+          display: "block",
+          ...rest.iconStyle,
+        }}
+      />
+      {children}
+    </span>
+  );
+}
diff --git a/src/components/ui/Icon/icons/Article.tsx b/src/components/ui/Icon/icons/Article.tsx
index 3acef59..29a71eb 100644
--- a/src/components/ui/Icon/icons/Article.tsx
+++ b/src/components/ui/Icon/icons/Article.tsx
@@ -1,8 +1,19 @@
 import { SVGProps } from "react";
 
 export default function ArticleIcon(props: SVGProps<SVGSVGElement>) {
-    return <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M7.66667 19.9166C7.36875 19.9166 7.125 19.6728 7.125 19.3749V6.37492C7.125 6.077 7.36875 5.83325 7.66667 5.83325H13.0833V8.54159C13.0833 9.1408 13.5674 9.62492 14.1667 9.62492H16.875V19.3749C16.875 19.6728 16.6313 19.9166 16.3333 19.9166H7.66667ZM7.66667 4.20825C6.47161 4.20825 5.5 5.17987 5.5 6.37492V19.3749C5.5 20.57 6.47161 21.5416 7.66667 21.5416H16.3333C17.5284 21.5416 18.5 20.57 18.5 19.3749V9.43872C18.5 8.8632 18.2732 8.31138 17.8669 7.90513L14.7997 4.84132C14.3935 4.43507 13.8451 4.20825 13.2695 4.20825H7.66667ZM9.5625 12.8749C9.11224 12.8749 8.75 13.2372 8.75 13.6874C8.75 14.1377 9.11224 14.4999 9.5625 14.4999H14.4375C14.8878 14.4999 15.25 14.1377 15.25 13.6874C15.25 13.2372 14.8878 12.8749 14.4375 12.8749H9.5625ZM9.5625 16.1249C9.11224 16.1249 8.75 16.4872 8.75 16.9374C8.75 17.3877 9.11224 17.7499 9.5625 17.7499H14.4375C14.8878 17.7499 15.25 17.3877 15.25 16.9374C15.25 16.4872 14.8878 16.1249 14.4375 16.1249H9.5625Z" fill="#6B7280" />
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.66667 19.9166C7.36875 19.9166 7.125 19.6728 7.125 19.3749V6.37492C7.125 6.077 7.36875 5.83325 7.66667 5.83325H13.0833V8.54159C13.0833 9.1408 13.5674 9.62492 14.1667 9.62492H16.875V19.3749C16.875 19.6728 16.6313 19.9166 16.3333 19.9166H7.66667ZM7.66667 4.20825C6.47161 4.20825 5.5 5.17987 5.5 6.37492V19.3749C5.5 20.57 6.47161 21.5416 7.66667 21.5416H16.3333C17.5284 21.5416 18.5 20.57 18.5 19.3749V9.43872C18.5 8.8632 18.2732 8.31138 17.8669 7.90513L14.7997 4.84132C14.3935 4.43507 13.8451 4.20825 13.2695 4.20825H7.66667ZM9.5625 12.8749C9.11224 12.8749 8.75 13.2372 8.75 13.6874C8.75 14.1377 9.11224 14.4999 9.5625 14.4999H14.4375C14.8878 14.4999 15.25 14.1377 15.25 13.6874C15.25 13.2372 14.8878 12.8749 14.4375 12.8749H9.5625ZM9.5625 16.1249C9.11224 16.1249 8.75 16.4872 8.75 16.9374C8.75 17.3877 9.11224 17.7499 9.5625 17.7499H14.4375C14.8878 17.7499 15.25 17.3877 15.25 16.9374C15.25 16.4872 14.8878 16.1249 14.4375 16.1249H9.5625Z"
+        fill="#6B7280"
+      />
     </svg>
-
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/Icon/icons/Chevron.tsx b/src/components/ui/Icon/icons/Chevron.tsx
index 76c6e52..02db30d 100644
--- a/src/components/ui/Icon/icons/Chevron.tsx
+++ b/src/components/ui/Icon/icons/Chevron.tsx
@@ -1,9 +1,20 @@
 import { SVGProps } from "react";
 
 export default function ChevronIcon(props: SVGProps<SVGSVGElement>) {
-    const color = props?.color || "#333333"
-    return <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M9.43074 12.001L17.7039 3.72301C18.0987 3.32834 18.0987 2.68992 17.7039 2.29525C17.309 1.90158 16.6699 1.90158 16.276 2.29525L7.28893 11.2866C6.90013 11.6743 6.90727 12.3318 7.28893 12.7134L16.276 21.7047C16.6709 22.0984 17.31 22.0984 17.7039 21.7047C18.0977 21.3111 18.0987 20.6717 17.7039 20.278L9.43074 12.001Z" fill={color} />
+  const color = props?.color || "#333333";
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9.43074 12.001L17.7039 3.72301C18.0987 3.32834 18.0987 2.68992 17.7039 2.29525C17.309 1.90158 16.6699 1.90158 16.276 2.29525L7.28893 11.2866C6.90013 11.6743 6.90727 12.3318 7.28893 12.7134L16.276 21.7047C16.6709 22.0984 17.31 22.0984 17.7039 21.7047C18.0977 21.3111 18.0987 20.6717 17.7039 20.278L9.43074 12.001Z"
+        fill={color}
+      />
     </svg>
-
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/Icon/icons/Cross.tsx b/src/components/ui/Icon/icons/Cross.tsx
index 4e59ebb..2e806ff 100644
--- a/src/components/ui/Icon/icons/Cross.tsx
+++ b/src/components/ui/Icon/icons/Cross.tsx
@@ -1,14 +1,16 @@
 import { SVGProps } from "react";
 
 export default function CrossIcon(props: SVGProps<SVGSVGElement>) {
-    return <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        {...props}
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
     >
-        <title>cross</title>
-        <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
+      <title>cross</title>
+      <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z" />
     </svg>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/Icon/icons/Menu.tsx b/src/components/ui/Icon/icons/Menu.tsx
index e7c626a..80cc3b9 100644
--- a/src/components/ui/Icon/icons/Menu.tsx
+++ b/src/components/ui/Icon/icons/Menu.tsx
@@ -1,8 +1,19 @@
 import { SVGProps } from "react";
 
 export default function MenuIcon(props: SVGProps<SVGSVGElement>) {
-    return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M1.5 4.5C1.5 3.67031 2.17031 3 3 3H21C21.8297 3 22.5 3.67031 22.5 4.5C22.5 5.32969 21.8297 6 21 6H3C2.17031 6 1.5 5.32969 1.5 4.5ZM1.5 12C1.5 11.1703 2.17031 10.5 3 10.5H21C21.8297 10.5 22.5 11.1703 22.5 12C22.5 12.8297 21.8297 13.5 21 13.5H3C2.17031 13.5 1.5 12.8297 1.5 12ZM22.5 19.5C22.5 20.3297 21.8297 21 21 21H3C2.17031 21 1.5 20.3297 1.5 19.5C1.5 18.6703 2.17031 18 3 18H21C21.8297 18 22.5 18.6703 22.5 19.5Z" fill="#333333" />
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.5 4.5C1.5 3.67031 2.17031 3 3 3H21C21.8297 3 22.5 3.67031 22.5 4.5C22.5 5.32969 21.8297 6 21 6H3C2.17031 6 1.5 5.32969 1.5 4.5ZM1.5 12C1.5 11.1703 2.17031 10.5 3 10.5H21C21.8297 10.5 22.5 11.1703 22.5 12C22.5 12.8297 21.8297 13.5 21 13.5H3C2.17031 13.5 1.5 12.8297 1.5 12ZM22.5 19.5C22.5 20.3297 21.8297 21 21 21H3C2.17031 21 1.5 20.3297 1.5 19.5C1.5 18.6703 2.17031 18 3 18H21C21.8297 18 22.5 18.6703 22.5 19.5Z"
+        fill="#333333"
+      />
     </svg>
-
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/Icon/icons/Notification.tsx b/src/components/ui/Icon/icons/Notification.tsx
index 7077bcf..9b045d7 100644
--- a/src/components/ui/Icon/icons/Notification.tsx
+++ b/src/components/ui/Icon/icons/Notification.tsx
@@ -1,25 +1,48 @@
 import { SVGProps } from "react";
 
 export default function NotificationIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <g clipPath="url(#clip0_20_1490)">
-                <g clipPath="url(#clip1_20_1490)">
-                    <path d="M9.99998 4C9.30858 4 8.74998 4.55859 8.74998 5.25V6C5.89842 6.57812 3.74998 9.10156 3.74998 12.125V12.8594C3.74998 14.6953 3.0742 16.4688 1.85545 17.8438L1.56639 18.168C1.23827 18.5352 1.16014 19.0625 1.35936 19.5117C1.55858 19.9609 2.0078 20.25 2.49998 20.25H17.5C17.9922 20.25 18.4375 19.9609 18.6406 19.5117C18.8437 19.0625 18.7617 18.5352 18.4336 18.168L18.1445 17.8438C16.9258 16.4688 16.25 14.6992 16.25 12.8594V12.125C16.25 9.10156 14.1015 6.57812 11.25 6V5.25C11.25 4.55859 10.6914 4 9.99998 4ZM11.7695 23.2695C12.2383 22.8008 12.5 22.1641 12.5 21.5H9.99998H7.49998C7.49998 22.1641 7.7617 22.8008 8.23045 23.2695C8.6992 23.7383 9.33592 24 9.99998 24C10.664 24 11.3008 23.7383 11.7695 23.2695Z" fill="#333333" />
-                </g>
-            </g>
-            <path d="M14.75 0C19.1683 0 22.75 3.58172 22.75 8C22.75 12.4183 19.1683 16 14.75 16C10.3317 16 6.75 12.4183 6.75 8C6.75 3.58172 10.3317 0 14.75 0Z" fill="#EF4444" />
-            <path d="M14.75 0C19.1683 0 22.75 3.58172 22.75 8C22.75 12.4183 19.1683 16 14.75 16C10.3317 16 6.75 12.4183 6.75 8C6.75 3.58172 10.3317 0 14.75 0Z" stroke="#E5E7EB" />
-            <path d="M14.7766 12.0994C14.3079 12.0994 13.89 12.0189 13.5231 11.858C13.1585 11.697 12.8685 11.4732 12.6531 11.1868C12.44 10.898 12.324 10.563 12.305 10.1818H13.1999C13.2189 10.4162 13.2994 10.6186 13.4414 10.7891C13.5835 10.9571 13.7693 11.0874 13.9989 11.1797C14.2286 11.272 14.4831 11.3182 14.7624 11.3182C15.0749 11.3182 15.3519 11.2637 15.5934 11.1548C15.8349 11.0459 16.0243 10.8944 16.1616 10.7003C16.2989 10.5062 16.3675 10.2812 16.3675 10.0256C16.3675 9.75805 16.3013 9.52249 16.1687 9.31889C16.0361 9.11293 15.842 8.95194 15.5863 8.83594C15.3306 8.71993 15.0181 8.66193 14.6488 8.66193H14.0664V7.88068H14.6488C14.9376 7.88068 15.1909 7.8286 15.4087 7.72443C15.6289 7.62026 15.8005 7.47348 15.9237 7.28409C16.0491 7.0947 16.1119 6.87216 16.1119 6.61648C16.1119 6.37026 16.0574 6.15601 15.9485 5.97372C15.8396 5.79143 15.6857 5.64938 15.4869 5.54759C15.2904 5.44579 15.0584 5.39489 14.7908 5.39489C14.5399 5.39489 14.3031 5.44105 14.0806 5.53338C13.8604 5.62334 13.6805 5.75473 13.5408 5.92756C13.4012 6.09801 13.3254 6.30398 13.3136 6.54545H12.4613C12.4755 6.1643 12.5903 5.83049 12.8058 5.54403C13.0212 5.25521 13.3029 5.0303 13.6509 4.86932C14.0013 4.70833 14.386 4.62784 14.805 4.62784C15.2549 4.62784 15.6407 4.71899 15.9627 4.90128C16.2847 5.0812 16.5321 5.31913 16.7049 5.61506C16.8777 5.91098 16.9641 6.23059 16.9641 6.57386C16.9641 6.98343 16.8564 7.33262 16.641 7.62145C16.4279 7.91027 16.1379 8.11032 15.771 8.22159V8.27841C16.2302 8.35417 16.5889 8.54948 16.8469 8.86435C17.105 9.17685 17.234 9.56392 17.234 10.0256C17.234 10.4209 17.1263 10.776 16.9109 11.0909C16.6978 11.4034 16.4066 11.6496 16.0373 11.8295C15.668 12.0095 15.2478 12.0994 14.7766 12.0994Z" fill="white" />
-            <defs>
-                <clipPath id="clip0_20_1490">
-                    <rect width="17.5" height="20" fill="white" transform="translate(1.25 4)" />
-                </clipPath>
-                <clipPath id="clip1_20_1490">
-                    <path d="M1.25 4H18.75V24H1.25V4Z" fill="white" />
-                </clipPath>
-            </defs>
-        </svg>
-
-    );
-}
\ No newline at end of file
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_20_1490)">
+        <g clipPath="url(#clip1_20_1490)">
+          <path
+            d="M9.99998 4C9.30858 4 8.74998 4.55859 8.74998 5.25V6C5.89842 6.57812 3.74998 9.10156 3.74998 12.125V12.8594C3.74998 14.6953 3.0742 16.4688 1.85545 17.8438L1.56639 18.168C1.23827 18.5352 1.16014 19.0625 1.35936 19.5117C1.55858 19.9609 2.0078 20.25 2.49998 20.25H17.5C17.9922 20.25 18.4375 19.9609 18.6406 19.5117C18.8437 19.0625 18.7617 18.5352 18.4336 18.168L18.1445 17.8438C16.9258 16.4688 16.25 14.6992 16.25 12.8594V12.125C16.25 9.10156 14.1015 6.57812 11.25 6V5.25C11.25 4.55859 10.6914 4 9.99998 4ZM11.7695 23.2695C12.2383 22.8008 12.5 22.1641 12.5 21.5H9.99998H7.49998C7.49998 22.1641 7.7617 22.8008 8.23045 23.2695C8.6992 23.7383 9.33592 24 9.99998 24C10.664 24 11.3008 23.7383 11.7695 23.2695Z"
+            fill="#333333"
+          />
+        </g>
+      </g>
+      <path
+        d="M14.75 0C19.1683 0 22.75 3.58172 22.75 8C22.75 12.4183 19.1683 16 14.75 16C10.3317 16 6.75 12.4183 6.75 8C6.75 3.58172 10.3317 0 14.75 0Z"
+        fill="#EF4444"
+      />
+      <path
+        d="M14.75 0C19.1683 0 22.75 3.58172 22.75 8C22.75 12.4183 19.1683 16 14.75 16C10.3317 16 6.75 12.4183 6.75 8C6.75 3.58172 10.3317 0 14.75 0Z"
+        stroke="#E5E7EB"
+      />
+      <path
+        d="M14.7766 12.0994C14.3079 12.0994 13.89 12.0189 13.5231 11.858C13.1585 11.697 12.8685 11.4732 12.6531 11.1868C12.44 10.898 12.324 10.563 12.305 10.1818H13.1999C13.2189 10.4162 13.2994 10.6186 13.4414 10.7891C13.5835 10.9571 13.7693 11.0874 13.9989 11.1797C14.2286 11.272 14.4831 11.3182 14.7624 11.3182C15.0749 11.3182 15.3519 11.2637 15.5934 11.1548C15.8349 11.0459 16.0243 10.8944 16.1616 10.7003C16.2989 10.5062 16.3675 10.2812 16.3675 10.0256C16.3675 9.75805 16.3013 9.52249 16.1687 9.31889C16.0361 9.11293 15.842 8.95194 15.5863 8.83594C15.3306 8.71993 15.0181 8.66193 14.6488 8.66193H14.0664V7.88068H14.6488C14.9376 7.88068 15.1909 7.8286 15.4087 7.72443C15.6289 7.62026 15.8005 7.47348 15.9237 7.28409C16.0491 7.0947 16.1119 6.87216 16.1119 6.61648C16.1119 6.37026 16.0574 6.15601 15.9485 5.97372C15.8396 5.79143 15.6857 5.64938 15.4869 5.54759C15.2904 5.44579 15.0584 5.39489 14.7908 5.39489C14.5399 5.39489 14.3031 5.44105 14.0806 5.53338C13.8604 5.62334 13.6805 5.75473 13.5408 5.92756C13.4012 6.09801 13.3254 6.30398 13.3136 6.54545H12.4613C12.4755 6.1643 12.5903 5.83049 12.8058 5.54403C13.0212 5.25521 13.3029 5.0303 13.6509 4.86932C14.0013 4.70833 14.386 4.62784 14.805 4.62784C15.2549 4.62784 15.6407 4.71899 15.9627 4.90128C16.2847 5.0812 16.5321 5.31913 16.7049 5.61506C16.8777 5.91098 16.9641 6.23059 16.9641 6.57386C16.9641 6.98343 16.8564 7.33262 16.641 7.62145C16.4279 7.91027 16.1379 8.11032 15.771 8.22159V8.27841C16.2302 8.35417 16.5889 8.54948 16.8469 8.86435C17.105 9.17685 17.234 9.56392 17.234 10.0256C17.234 10.4209 17.1263 10.776 16.9109 11.0909C16.6978 11.4034 16.4066 11.6496 16.0373 11.8295C15.668 12.0095 15.2478 12.0994 14.7766 12.0994Z"
+        fill="white"
+      />
+      <defs>
+        <clipPath id="clip0_20_1490">
+          <rect
+            width="17.5"
+            height="20"
+            fill="white"
+            transform="translate(1.25 4)"
+          />
+        </clipPath>
+        <clipPath id="clip1_20_1490">
+          <path d="M1.25 4H18.75V24H1.25V4Z" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/components/ui/Icon/icons/Search.tsx b/src/components/ui/Icon/icons/Search.tsx
index e4d612a..e7f1a7b 100644
--- a/src/components/ui/Icon/icons/Search.tsx
+++ b/src/components/ui/Icon/icons/Search.tsx
@@ -1,8 +1,19 @@
 import { SVGProps } from "react";
 
 export default function SearchIcon(props: SVGProps<SVGSVGElement>) {
-    return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M18.25 10.125C18.25 11.918 17.668 13.5742 16.6875 14.918L21.6328 19.8672C22.1211 20.3555 22.1211 21.1484 21.6328 21.6367C21.1445 22.125 20.3516 22.125 19.8633 21.6367L14.918 16.6875C13.5742 17.6719 11.918 18.25 10.125 18.25C5.63672 18.25 2 14.6133 2 10.125C2 5.63672 5.63672 2 10.125 2C14.6133 2 18.25 5.63672 18.25 10.125ZM10.125 15.75C10.8637 15.75 11.5951 15.6045 12.2776 15.3218C12.9601 15.0391 13.5801 14.6248 14.1025 14.1025C14.6248 13.5801 15.0391 12.9601 15.3218 12.2776C15.6045 11.5951 15.75 10.8637 15.75 10.125C15.75 9.38631 15.6045 8.65486 15.3218 7.97241C15.0391 7.28995 14.6248 6.66985 14.1025 6.14752C13.5801 5.62519 12.9601 5.21086 12.2776 4.92818C11.5951 4.64549 10.8637 4.5 10.125 4.5C9.38631 4.5 8.65486 4.64549 7.97241 4.92818C7.28995 5.21086 6.66985 5.62519 6.14752 6.14752C5.62519 6.66985 5.21086 7.28995 4.92818 7.97241C4.64549 8.65486 4.5 9.38631 4.5 10.125C4.5 10.8637 4.64549 11.5951 4.92818 12.2776C5.21086 12.9601 5.62519 13.5801 6.14752 14.1025C6.66985 14.6248 7.28995 15.0391 7.97241 15.3218C8.65486 15.6045 9.38631 15.75 10.125 15.75Z" fill="#333333" />
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.25 10.125C18.25 11.918 17.668 13.5742 16.6875 14.918L21.6328 19.8672C22.1211 20.3555 22.1211 21.1484 21.6328 21.6367C21.1445 22.125 20.3516 22.125 19.8633 21.6367L14.918 16.6875C13.5742 17.6719 11.918 18.25 10.125 18.25C5.63672 18.25 2 14.6133 2 10.125C2 5.63672 5.63672 2 10.125 2C14.6133 2 18.25 5.63672 18.25 10.125ZM10.125 15.75C10.8637 15.75 11.5951 15.6045 12.2776 15.3218C12.9601 15.0391 13.5801 14.6248 14.1025 14.1025C14.6248 13.5801 15.0391 12.9601 15.3218 12.2776C15.6045 11.5951 15.75 10.8637 15.75 10.125C15.75 9.38631 15.6045 8.65486 15.3218 7.97241C15.0391 7.28995 14.6248 6.66985 14.1025 6.14752C13.5801 5.62519 12.9601 5.21086 12.2776 4.92818C11.5951 4.64549 10.8637 4.5 10.125 4.5C9.38631 4.5 8.65486 4.64549 7.97241 4.92818C7.28995 5.21086 6.66985 5.62519 6.14752 6.14752C5.62519 6.66985 5.21086 7.28995 4.92818 7.97241C4.64549 8.65486 4.5 9.38631 4.5 10.125C4.5 10.8637 4.64549 11.5951 4.92818 12.2776C5.21086 12.9601 5.62519 13.5801 6.14752 14.1025C6.66985 14.6248 7.28995 15.0391 7.97241 15.3218C8.65486 15.6045 9.38631 15.75 10.125 15.75Z"
+        fill="#333333"
+      />
     </svg>
-
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/Icon/icons/Star.tsx b/src/components/ui/Icon/icons/Star.tsx
index 64c897c..bc77732 100644
--- a/src/components/ui/Icon/icons/Star.tsx
+++ b/src/components/ui/Icon/icons/Star.tsx
@@ -1,8 +1,19 @@
 import { SVGProps } from "react";
 
 export default function StarIcon(props: SVGProps<SVGSVGElement>) {
-    return <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M4.57382 0.781219C4.49102 0.609363 4.31603 0.5 4.12387 0.5C3.9317 0.5 3.75828 0.609363 3.67392 0.781219L2.66934 2.84817L0.425835 3.17939C0.238356 3.20751 0.082123 3.33874 0.0243168 3.51841C-0.0334894 3.69808 0.0133805 3.8965 0.147741 4.02929L1.77569 5.64005L1.39135 7.91636C1.36011 8.10384 1.43822 8.29444 1.5929 8.40537C1.74757 8.51629 1.95223 8.53035 2.12096 8.4413L4.12543 7.37111L6.1299 8.4413C6.29863 8.53035 6.5033 8.51785 6.65797 8.40537C6.81264 8.29288 6.89075 8.10384 6.85951 7.91636L6.47361 5.64005L8.10156 4.02929C8.23592 3.8965 8.28435 3.69808 8.22498 3.51841C8.16561 3.33874 8.01094 3.20751 7.82346 3.17939L5.5784 2.84817L4.57382 0.781219Z" fill="currentColor" />
+  return (
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.57382 0.781219C4.49102 0.609363 4.31603 0.5 4.12387 0.5C3.9317 0.5 3.75828 0.609363 3.67392 0.781219L2.66934 2.84817L0.425835 3.17939C0.238356 3.20751 0.082123 3.33874 0.0243168 3.51841C-0.0334894 3.69808 0.0133805 3.8965 0.147741 4.02929L1.77569 5.64005L1.39135 7.91636C1.36011 8.10384 1.43822 8.29444 1.5929 8.40537C1.74757 8.51629 1.95223 8.53035 2.12096 8.4413L4.12543 7.37111L6.1299 8.4413C6.29863 8.53035 6.5033 8.51785 6.65797 8.40537C6.81264 8.29288 6.89075 8.10384 6.85951 7.91636L6.47361 5.64005L8.10156 4.02929C8.23592 3.8965 8.28435 3.69808 8.22498 3.51841C8.16561 3.33874 8.01094 3.20751 7.82346 3.17939L5.5784 2.84817L4.57382 0.781219Z"
+        fill="currentColor"
+      />
     </svg>
-
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/Icon/icons/Video.tsx b/src/components/ui/Icon/icons/Video.tsx
index c2d5bfc..3be6249 100644
--- a/src/components/ui/Icon/icons/Video.tsx
+++ b/src/components/ui/Icon/icons/Video.tsx
@@ -1,9 +1,20 @@
 import { SVGProps } from "react";
 
 export default function VideoIcon(props: SVGProps<SVGSVGElement>) {
-    const color = props?.color || "#A0A7B5";
-    return <svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M18.5 13C18.5 11.2761 17.8152 9.62279 16.5962 8.40381C15.3772 7.18482 13.7239 6.5 12 6.5C10.2761 6.5 8.62279 7.18482 7.40381 8.40381C6.18482 9.62279 5.5 11.2761 5.5 13C5.5 14.7239 6.18482 16.3772 7.40381 17.5962C8.62279 18.8152 10.2761 19.5 12 19.5C13.7239 19.5 15.3772 18.8152 16.5962 17.5962C17.8152 16.3772 18.5 14.7239 18.5 13ZM4 13C4 10.8783 4.84285 8.84344 6.34315 7.34315C7.84344 5.84285 9.87827 5 12 5C14.1217 5 16.1566 5.84285 17.6569 7.34315C19.1571 8.84344 20 10.8783 20 13C20 15.1217 19.1571 17.1566 17.6569 18.6569C16.1566 20.1571 14.1217 21 12 21C9.87827 21 7.84344 20.1571 6.34315 18.6569C4.84285 17.1566 4 15.1217 4 13ZM9.88438 9.59688C10.1219 9.46563 10.4094 9.46875 10.6438 9.6125L15.1438 12.3625C15.3656 12.5 15.5031 12.7406 15.5031 13.0031C15.5031 13.2656 15.3656 13.5063 15.1438 13.6438L10.6438 16.3938C10.4125 16.5344 10.1219 16.5406 9.88438 16.4094C9.64688 16.2781 9.5 16.0281 9.5 15.7563V10.25C9.5 9.97813 9.64688 9.72813 9.88438 9.59688Z" fill={color} />
+  const color = props?.color || "#A0A7B5";
+  return (
+    <svg
+      width="25"
+      height="26"
+      viewBox="0 0 25 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.5 13C18.5 11.2761 17.8152 9.62279 16.5962 8.40381C15.3772 7.18482 13.7239 6.5 12 6.5C10.2761 6.5 8.62279 7.18482 7.40381 8.40381C6.18482 9.62279 5.5 11.2761 5.5 13C5.5 14.7239 6.18482 16.3772 7.40381 17.5962C8.62279 18.8152 10.2761 19.5 12 19.5C13.7239 19.5 15.3772 18.8152 16.5962 17.5962C17.8152 16.3772 18.5 14.7239 18.5 13ZM4 13C4 10.8783 4.84285 8.84344 6.34315 7.34315C7.84344 5.84285 9.87827 5 12 5C14.1217 5 16.1566 5.84285 17.6569 7.34315C19.1571 8.84344 20 10.8783 20 13C20 15.1217 19.1571 17.1566 17.6569 18.6569C16.1566 20.1571 14.1217 21 12 21C9.87827 21 7.84344 20.1571 6.34315 18.6569C4.84285 17.1566 4 15.1217 4 13ZM9.88438 9.59688C10.1219 9.46563 10.4094 9.46875 10.6438 9.6125L15.1438 12.3625C15.3656 12.5 15.5031 12.7406 15.5031 13.0031C15.5031 13.2656 15.3656 13.5063 15.1438 13.6438L10.6438 16.3938C10.4125 16.5344 10.1219 16.5406 9.88438 16.4094C9.64688 16.2781 9.5 16.0281 9.5 15.7563V10.25C9.5 9.97813 9.64688 9.72813 9.88438 9.59688Z"
+        fill={color}
+      />
     </svg>
-
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/ui/IconLabel/IconLabel.module.scss b/src/components/ui/IconLabel/IconLabel.module.scss
index 768241a..66afe8c 100644
--- a/src/components/ui/IconLabel/IconLabel.module.scss
+++ b/src/components/ui/IconLabel/IconLabel.module.scss
@@ -13,4 +13,4 @@
 .label {
   font-size: 16px;
   color: #6b7280;
-} 
\ No newline at end of file
+}
diff --git a/src/components/ui/IconLabel/IconLabel.tsx b/src/components/ui/IconLabel/IconLabel.tsx
index f8ab2af..6c0c568 100644
--- a/src/components/ui/IconLabel/IconLabel.tsx
+++ b/src/components/ui/IconLabel/IconLabel.tsx
@@ -11,11 +11,15 @@ export type IconLabelProps = {
   className?: string;
 };
 
-export default function IconLabel({ iconProps, children, className }: IconLabelProps) {
+export default function IconLabel({
+  iconProps,
+  children,
+  className,
+}: IconLabelProps) {
   return (
     <span className={clsx(styles.iconLabel, className)}>
       <Icon {...iconProps} />
       <span className={styles.label}>{children}</span>
     </span>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/ui/MetaLabel/MetaLabel.module.scss b/src/components/ui/MetaLabel/MetaLabel.module.scss
index d612aa3..6d82a81 100644
--- a/src/components/ui/MetaLabel/MetaLabel.module.scss
+++ b/src/components/ui/MetaLabel/MetaLabel.module.scss
@@ -2,4 +2,4 @@
   display: flex;
   align-items: center;
   gap: 4px;
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/MetaLabel/MetaLabel.tsx b/src/components/ui/MetaLabel/MetaLabel.tsx
index a3e9505..1331b18 100644
--- a/src/components/ui/MetaLabel/MetaLabel.tsx
+++ b/src/components/ui/MetaLabel/MetaLabel.tsx
@@ -10,16 +10,15 @@ export type MetaLabelProps = {
   children: ReactNode;
 };
 
-export default function MetaLabel({ iconLabelProps, children }: MetaLabelProps) {
+export default function MetaLabel({
+  iconLabelProps,
+  children,
+}: MetaLabelProps) {
   return (
     <div className={styles.metaLabel}>
       <IconLabel {...iconLabelProps} />
-      <Typography color="secondary">
-        •
-      </Typography>
-      <Typography color="secondary">
-        {children}
-      </Typography>
+      <Typography color="secondary">•</Typography>
+      <Typography color="secondary">{children}</Typography>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/ui/Modal/Modal.module.scss b/src/components/ui/Modal/Modal.module.scss
index e90d83d..48a9ac7 100644
--- a/src/components/ui/Modal/Modal.module.scss
+++ b/src/components/ui/Modal/Modal.module.scss
@@ -1,39 +1,39 @@
 .overlay {
-    background: rgba(85, 84, 85, 0.8);
-    height: 100dvh;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    z-index: 8888;
+  background: rgba(85, 84, 85, 0.8);
+  height: 100dvh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  z-index: 8888;
 }
 
 .modal {
-    position: absolute;
-    background: #fff;
-    width: 100%;
-    max-width: 375px;
-    max-height: calc(100vh - 200px);
-    overflow: scroll;
-    top: 50%;
-    left: 50%;
-    z-index: 3;
-    border-radius: 16px;
-    padding: 64px 24px 16px;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  background: #fff;
+  width: 100%;
+  max-width: 375px;
+  max-height: calc(100vh - 200px);
+  overflow: scroll;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  border-radius: 16px;
+  padding: 64px 24px 16px;
+  transform: translate(-50%, -50%);
 }
 
 .modal::-webkit-scrollbar {
-    width: 0;
+  width: 0;
 }
 
 .crossButton {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    background: none;
-    left: 15px;
-    top: 16px;
-    z-index: 4;
-}
\ No newline at end of file
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  background: none;
+  left: 15px;
+  top: 16px;
+  z-index: 4;
+}
diff --git a/src/components/ui/Modal/Modal.tsx b/src/components/ui/Modal/Modal.tsx
index 95bcf3e..d9af9b9 100644
--- a/src/components/ui/Modal/Modal.tsx
+++ b/src/components/ui/Modal/Modal.tsx
@@ -10,104 +10,104 @@ import styles from "./Modal.module.scss";
 import { Button, Icon } from "..";
 
 interface ModalProps {
-    children: ReactNode;
-    open?: boolean;
-    isCloseButtonVisible?: boolean;
-    className?: string;
-    modalClassName?: string;
-    onClose: () => void;
-    removeNoScroll?: boolean;
+  children: ReactNode;
+  open?: boolean;
+  isCloseButtonVisible?: boolean;
+  className?: string;
+  modalClassName?: string;
+  onClose: () => void;
+  removeNoScroll?: boolean;
 }
 
 function Modal({
-    open,
-    children,
-    isCloseButtonVisible = true,
-    className = "",
-    modalClassName = "",
-    onClose,
-    removeNoScroll = true
+  open,
+  children,
+  isCloseButtonVisible = true,
+  className = "",
+  modalClassName = "",
+  onClose,
+  removeNoScroll = true,
 }: ModalProps): React.ReactNode {
-    const modalContentRef = useRef<HTMLDivElement>(null);
+  const modalContentRef = useRef<HTMLDivElement>(null);
 
-    const handleClose = (event: React.MouseEvent) => {
-        if (event.target !== event.currentTarget) return;
-        document.body.classList.remove("no-scroll");
-        onClose?.();
+  const handleClose = (event: React.MouseEvent) => {
+    if (event.target !== event.currentTarget) return;
+    document.body.classList.remove("no-scroll");
+    onClose?.();
+  };
+
+  useEffect(() => {
+    if (!removeNoScroll) {
+      return;
+    }
+
+    if (open) {
+      document.body.classList.add("no-scroll");
+    }
+
+    return () => {
+      document.body.classList.remove("no-scroll");
+    };
+  }, [open, removeNoScroll]);
+
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  const getModalContentPosition = useCallback(() => {
+    const modalContent = modalContentRef.current;
+    if (!modalContent)
+      return {
+        top: 0,
+        left: 0,
+      };
+    const { top, left } = modalContent.getBoundingClientRect();
+    return { top, left };
+  }, [modalContentRef]);
+
+  useEffect(() => {
+    const updatePosition = () => {
+      requestAnimationFrame(() => {
+        setPosition(getModalContentPosition());
+      });
     };
 
-    useEffect(() => {
-        if (!removeNoScroll) {
-            return;
-        }
+    if (open) {
+      updatePosition();
+    }
 
-        if (open) {
-            document.body.classList.add("no-scroll");
-        }
+    window.addEventListener("resize", updatePosition);
 
-        return () => {
-            document.body.classList.remove("no-scroll");
-        };
-    }, [open, removeNoScroll]);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [getModalContentPosition, open]);
 
-    const [position, setPosition] = useState({ top: 0, left: 0 });
+  if (!open) return <></>;
 
-    const getModalContentPosition = useCallback(() => {
-        const modalContent = modalContentRef.current;
-        if (!modalContent) return {
-            top: 0,
-            left: 0
-        };
-        const { top, left } = modalContent.getBoundingClientRect();
-        return { top, left };
-    }, [modalContentRef]);
-
-    useEffect(() => {
-        const updatePosition = () => {
-            requestAnimationFrame(() => {
-                setPosition(getModalContentPosition());
-            });
-        };
-
-        if (open) {
-            updatePosition();
-        }
-
-        window.addEventListener('resize', updatePosition);
-
-        return () => {
-            window.removeEventListener('resize', updatePosition);
-        };
-    }, [getModalContentPosition, open]);
-
-    if (!open) return <></>;
-
-    return (
-        <div
-            className={clsx(styles.overlay, className)}
-            onClick={handleClose}
+  return (
+    <div className={clsx(styles.overlay, className)} onClick={handleClose}>
+      {isCloseButtonVisible && (
+        <Button
+          className={styles.crossButton}
+          onClick={handleClose}
+          style={{
+            top: `${position.top + 16}px`,
+            left: `${position.left + 15}px`,
+          }}
         >
-            {isCloseButtonVisible && (
-                <Button className={styles.crossButton} onClick={handleClose}
-                    style={{
-                        top: `${position.top + 16}px`,
-                        left: `${position.left + 15}px`
-                    }}
-                >
-                    <Icon
-                        name={IconName.Cross}
-                        size={{
-                            height: 16,
-                            width: 16
-                        }}
-                    />
-                </Button>
-            )}
-            <div className={clsx(styles.modal, modalClassName)} ref={modalContentRef}>
-                {children}
-            </div>
-        </div>
-    );
+          <Icon
+            name={IconName.Cross}
+            size={{
+              height: 16,
+              width: 16,
+            }}
+          />
+        </Button>
+      )}
+      <div className={clsx(styles.modal, modalClassName)} ref={modalContentRef}>
+        {children}
+      </div>
+    </div>
+  );
 }
 
 export default Modal;
diff --git a/src/components/ui/NameInput/NameInput.module.scss b/src/components/ui/NameInput/NameInput.module.scss
index 379fd60..831c5af 100644
--- a/src/components/ui/NameInput/NameInput.module.scss
+++ b/src/components/ui/NameInput/NameInput.module.scss
@@ -1,48 +1,51 @@
 .input-container {
+  width: 100%;
+  position: relative;
+  text-align: center;
+  margin-bottom: 20px;
+  max-width: 400px;
+  min-width: 250px;
+
+  & > input {
+    appearance: none;
+    border-radius: 14px;
+    color: #121620;
+    font-size: 15px;
+    height: 48px;
+    line-height: 125%;
+    outline: none;
+    padding: 16px 24px 5px;
+    transition: border-color 0.3s ease;
     width: 100%;
-    position: relative;
-    text-align: center;
-    margin-bottom: 20px;
-    max-width: 400px;
-    min-width: 250px;
 
-    &>input {
-        appearance: none;
-        border-radius: 14px;
-        color: #121620;
-        font-size: 15px;
-        height: 48px;
-        line-height: 125%;
-        outline: none;
-        padding: 16px 24px 5px;
-        transition: border-color 0.3s ease;
-        width: 100%;
-
-        &:focus {
-            border-color: #000;
-            transition-delay: 0.1s;
-        }
+    &:focus {
+      border-color: #000;
+      transition-delay: 0.1s;
     }
+  }
 }
 
 .input__placeholder {
-    color: #8e8e93;
-    font-size: 16px;
-    left: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
-    white-space: nowrap;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    user-select: none;
-    pointer-events: none;
+  color: #8e8e93;
+  font-size: 16px;
+  left: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    top 0.3s ease,
+    color 0.3s ease,
+    font-size 0.3s ease;
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  user-select: none;
+  pointer-events: none;
 }
 
-.input-container>input:focus+.input__placeholder,
-.input-container>input:not(:placeholder-shown)+.input__placeholder {
-    font-size: 12px;
-    top: 12px;
-    width: auto;
-}
\ No newline at end of file
+.input-container > input:focus + .input__placeholder,
+.input-container > input:not(:placeholder-shown) + .input__placeholder {
+  font-size: 12px;
+  top: 12px;
+  width: auto;
+}
diff --git a/src/components/ui/NameInput/NameInput.tsx b/src/components/ui/NameInput/NameInput.tsx
index 4d2e703..ffb33b6 100644
--- a/src/components/ui/NameInput/NameInput.tsx
+++ b/src/components/ui/NameInput/NameInput.tsx
@@ -55,7 +55,11 @@ function NameInput({
         autoComplete="name"
         readOnly={readonly}
       />
-      <span className={`${styles["input__placeholder"]} ${placeholderClassName}`}>{placeholder}</span>
+      <span
+        className={`${styles["input__placeholder"]} ${placeholderClassName}`}
+      >
+        {placeholder}
+      </span>
     </div>
   );
 }
diff --git a/src/components/ui/Section/Section.module.scss b/src/components/ui/Section/Section.module.scss
index ab31559..e742c86 100644
--- a/src/components/ui/Section/Section.module.scss
+++ b/src/components/ui/Section/Section.module.scss
@@ -1,14 +1,14 @@
 .section {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
 }
 
 .content {
-    width: 100%;
+  width: 100%;
 
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
\ No newline at end of file
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/src/components/ui/Section/Section.tsx b/src/components/ui/Section/Section.tsx
index e9cea56..9e7b287 100644
--- a/src/components/ui/Section/Section.tsx
+++ b/src/components/ui/Section/Section.tsx
@@ -6,23 +6,33 @@ import Typography from "../Typography/Typography";
 import styles from "./Section.module.scss";
 
 interface SectionProps {
-    title?: string;
-    children: ReactNode;
-    className?: string;
-    titleClassName?: string;
-    contentClassName?: string;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+  titleClassName?: string;
+  contentClassName?: string;
 }
 
-export default function Section({ title, children, className, titleClassName, contentClassName }: SectionProps) {
-
-    return (
-        <section className={clsx(styles.section, className)}>
-            {title &&
-                <Typography className={clsx(styles.title, titleClassName)} as="h2" weight="medium" size="2xl">
-                    {title}
-                </Typography>
-            }
-            <div className={clsx(styles.content, contentClassName)}>{children}</div>
-        </section>
-    );
-}
\ No newline at end of file
+export default function Section({
+  title,
+  children,
+  className,
+  titleClassName,
+  contentClassName,
+}: SectionProps) {
+  return (
+    <section className={clsx(styles.section, className)}>
+      {title && (
+        <Typography
+          className={clsx(styles.title, titleClassName)}
+          as="h2"
+          weight="medium"
+          size="2xl"
+        >
+          {title}
+        </Typography>
+      )}
+      <div className={clsx(styles.content, contentClassName)}>{children}</div>
+    </section>
+  );
+}
diff --git a/src/components/ui/SelectInput/SelectInput.module.scss b/src/components/ui/SelectInput/SelectInput.module.scss
new file mode 100644
index 0000000..cc0bbab
--- /dev/null
+++ b/src/components/ui/SelectInput/SelectInput.module.scss
@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+}
+
+.select {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 24px;
+  border: solid 1px #e5e7eb;
+  font-size: 16px;
+  background-color: #f1f1f1;
+  outline: none;
+  appearance: none; // Removes default arrow
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:focus {
+    border-color: #000;
+    transition-delay: 0.1s;
+  }
+}
+
+.selectError {
+  border-color: #ef4444;
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+  }
+}
+
+.errorText {
+  font-size: 12px;
+  color: #ef4444;
+  margin: 0;
+}
diff --git a/src/components/ui/SelectInput/SelectInput.tsx b/src/components/ui/SelectInput/SelectInput.tsx
new file mode 100644
index 0000000..028dbae
--- /dev/null
+++ b/src/components/ui/SelectInput/SelectInput.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { type SelectHTMLAttributes, useId } from "react";
+import clsx from "clsx";
+
+import styles from "./SelectInput.module.scss";
+
+type Option = {
+  value: string | number;
+  label: string;
+};
+
+interface SelectInputProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  error?: string;
+  options: Option[];
+  placeholder?: string;
+  containerClassName?: string;
+}
+
+export const SelectInput = ({
+  error,
+  options,
+  placeholder,
+  className,
+  containerClassName,
+  ...props
+}: SelectInputProps) => {
+  const id = useId();
+
+  return (
+    <div className={clsx(styles.container, containerClassName)}>
+      <select
+        id={id}
+        className={clsx(styles.select, error && styles.selectError, className)}
+        {...props}
+      >
+        {placeholder && (
+          <option value="" hidden>
+            {placeholder}
+          </option>
+        )}
+        {options.map(option => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {error && <p className={styles.errorText}>{error}</p>}
+    </div>
+  );
+};
diff --git a/src/components/ui/Skeleton/Skeleton.module.scss b/src/components/ui/Skeleton/Skeleton.module.scss
index 7a86b4f..bb39efd 100644
--- a/src/components/ui/Skeleton/Skeleton.module.scss
+++ b/src/components/ui/Skeleton/Skeleton.module.scss
@@ -1,26 +1,28 @@
 .skeleton {
-    width: 100%;
-    height: 100%;
-    background-color: #e5e7eb;
-    border-radius: 24px;
-    position: relative;
-    overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background-color: #e5e7eb;
+  border-radius: 24px;
+  position: relative;
+  overflow: hidden;
 
-    &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(90deg,
-                transparent 0%,
-                rgba(255, 255, 255, 0.6) 50%,
-                transparent 100%);
-        transform: translateX(-100%);
-        animation: shimmer 1.6s infinite;
-    }
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: shimmer 1.6s infinite;
+  }
 }
 
 @keyframes shimmer {
-    100% {
-        transform: translateX(100%);
-    }
-}
\ No newline at end of file
+  100% {
+    transform: translateX(100%);
+  }
+}
diff --git a/src/components/ui/Skeleton/Skeleton.tsx b/src/components/ui/Skeleton/Skeleton.tsx
index 2335a55..2335e19 100644
--- a/src/components/ui/Skeleton/Skeleton.tsx
+++ b/src/components/ui/Skeleton/Skeleton.tsx
@@ -4,10 +4,10 @@ import clsx from "clsx";
 import styles from "./Skeleton.module.scss";
 
 interface SkeletonProps {
-    className?: string;
-    style?: CSSProperties;
+  className?: string;
+  style?: CSSProperties;
 }
 
 export default function Skeleton({ className, style }: SkeletonProps) {
-    return <div className={clsx(styles.skeleton, className)} style={style} />;
-}
\ No newline at end of file
+  return <div className={clsx(styles.skeleton, className)} style={style} />;
+}
diff --git a/src/components/ui/Spinner/Spinner.tsx b/src/components/ui/Spinner/Spinner.tsx
index 0a9a3af..e92184a 100644
--- a/src/components/ui/Spinner/Spinner.tsx
+++ b/src/components/ui/Spinner/Spinner.tsx
@@ -23,12 +23,14 @@ export default function Spinner({
   return (
     <span
       className={clsx(styles.spinner, className)}
-      style={{
-        "--spinner-size": resolvedSize,
-        "--spinner-color": color,
-        "--spinner-thickness": `${thickness}px`,
-        ...style,
-      } as CSSProperties}
+      style={
+        {
+          "--spinner-size": resolvedSize,
+          "--spinner-color": color,
+          "--spinner-thickness": `${thickness}px`,
+          ...style,
+        } as CSSProperties
+      }
     />
   );
 }
diff --git a/src/components/ui/Stars/Stars.module.scss b/src/components/ui/Stars/Stars.module.scss
index 5b56fdb..88e4535 100644
--- a/src/components/ui/Stars/Stars.module.scss
+++ b/src/components/ui/Stars/Stars.module.scss
@@ -1,17 +1,17 @@
 .stars {
-    display: flex;
-    align-items: center;
-    gap: 3px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
 }
 
 .star {
-    position: relative;
-    display: inline-block;
-    line-height: 0;
+  position: relative;
+  display: inline-block;
+  line-height: 0;
 }
 
 .starFill {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-}
\ No newline at end of file
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
diff --git a/src/components/ui/Stars/Stars.tsx b/src/components/ui/Stars/Stars.tsx
index 23ac914..92301d4 100644
--- a/src/components/ui/Stars/Stars.tsx
+++ b/src/components/ui/Stars/Stars.tsx
@@ -5,46 +5,46 @@ import Icon, { IconName } from "../Icon/Icon";
 import styles from "./Stars.module.scss";
 
 interface StarsProps {
-    rating?: number;
-    size?: number;
-    className?: string;
+  rating?: number;
+  size?: number;
+  className?: string;
 }
 
 export default function Stars({ rating = 5, size = 9, className }: StarsProps) {
-    const total = 5;
+  const total = 5;
 
-    const fills = Array.from({ length: total }).map((_, i) => {
-        const diff = rating - i;
-        return Math.max(Math.min(diff, 1), 0) * 100;
-    });
+  const fills = Array.from({ length: total }).map((_, i) => {
+    const diff = rating - i;
+    return Math.max(Math.min(diff, 1), 0) * 100;
+  });
 
-    return (
-        <div className={clsx(styles.stars, className)}>
-            {fills.map((fill, i) => (
-                <span
-                    key={i}
-                    className={styles.star}
-                    style={{ width: size, height: size }}
-                >
-                    <Icon
-                        name={IconName.Star}
-                        size={{ width: size, height: size }}
-                        color="#E5E7EB"
-                        cursor="auto"
-                    />
+  return (
+    <div className={clsx(styles.stars, className)}>
+      {fills.map((fill, i) => (
+        <span
+          key={`star-${i}`}
+          className={styles.star}
+          style={{ width: size, height: size }}
+        >
+          <Icon
+            name={IconName.Star}
+            size={{ width: size, height: size }}
+            color="#E5E7EB"
+            cursor="auto"
+          />
 
-                    {fill > 0 && (
-                        <span className={styles.starFill} style={{ width: `${fill}%` }}>
-                            <Icon
-                                name={IconName.Star}
-                                size={{ width: size, height: size }}
-                                color="#FFD600"
-                                cursor="auto"
-                            />
-                        </span>
-                    )}
-                </span>
-            ))}
-        </div>
-    );
-}
\ No newline at end of file
+          {fill > 0 && (
+            <span className={styles.starFill} style={{ width: `${fill}%` }}>
+              <Icon
+                name={IconName.Star}
+                size={{ width: size, height: size }}
+                color="#FFD600"
+                cursor="auto"
+              />
+            </span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ui/TabBar/TabBar.module.scss b/src/components/ui/TabBar/TabBar.module.scss
index 3a905fe..e871a63 100644
--- a/src/components/ui/TabBar/TabBar.module.scss
+++ b/src/components/ui/TabBar/TabBar.module.scss
@@ -1,32 +1,32 @@
 .tabBar {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 16px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 16px;
 }
 
 .tab {
-    position: relative;
-    padding: 14px 6px;
-    cursor: pointer;
-    transition: color 0.2s;
+  position: relative;
+  padding: 14px 6px;
+  cursor: pointer;
+  transition: color 0.2s;
 }
 
 .tab.active,
 .tab:focus {
-    color: #111;
-    font-weight: 700;
+  color: #111;
+  font-weight: 700;
 }
 
 .tab.active::after {
-    content: "";
-    display: block;
-    height: 2px;
-    width: 100%;
-    background: #000;
-    border-radius: 2px;
-    position: absolute;
-    left: 0;
-    bottom: -2px;
-}
\ No newline at end of file
+  content: "";
+  display: block;
+  height: 2px;
+  width: 100%;
+  background: #000;
+  border-radius: 2px;
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+}
diff --git a/src/components/ui/TabBar/TabBar.tsx b/src/components/ui/TabBar/TabBar.tsx
index a9ed9dc..bc075b1 100644
--- a/src/components/ui/TabBar/TabBar.tsx
+++ b/src/components/ui/TabBar/TabBar.tsx
@@ -5,35 +5,44 @@ import Typography from "../Typography/Typography";
 import styles from "./TabBar.module.scss";
 
 export type Tab<T extends string> = {
-    label: string;
-    value: T;
+  label: string;
+  value: T;
 };
 
 type TabBarProps<T extends string> = {
-    tabs: Tab<T>[];
-    active: T;
-    onChange: (value: T) => void;
-    className?: string;
+  tabs: Tab<T>[];
+  active: T;
+  onChange: (value: T) => void;
+  className?: string;
 };
 
-export default function TabBar<T extends string>({ tabs, active, onChange, className }: TabBarProps<T>) {
-    return (
-        <nav className={clsx(styles.tabBar, className)}>
-            {tabs.map((tab) => {
-                const isActive = tab.value === active;
-                return (
-                    <button
-                        key={tab.value}
-                        className={clsx(styles.tab, { [styles.active]: isActive })}
-                        onClick={() => onChange(tab.value)}
-                        type="button"
-                    >
-                        <Typography color={isActive ? "black" : "secondary"} size="md" weight="semiBold">
-                            {tab.label}
-                        </Typography>
-                    </button>
-                )
-            })}
-        </nav >
-    );
-}
\ No newline at end of file
+export default function TabBar<T extends string>({
+  tabs,
+  active,
+  onChange,
+  className,
+}: TabBarProps<T>) {
+  return (
+    <nav className={clsx(styles.tabBar, className)}>
+      {tabs.map(tab => {
+        const isActive = tab.value === active;
+        return (
+          <button
+            key={tab.value}
+            className={clsx(styles.tab, { [styles.active]: isActive })}
+            onClick={() => onChange(tab.value)}
+            type="button"
+          >
+            <Typography
+              color={isActive ? "black" : "secondary"}
+              size="md"
+              weight="semiBold"
+            >
+              {tab.label}
+            </Typography>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/src/components/ui/TextInput/TextInput.module.scss b/src/components/ui/TextInput/TextInput.module.scss
new file mode 100644
index 0000000..48ba6b5
--- /dev/null
+++ b/src/components/ui/TextInput/TextInput.module.scss
@@ -0,0 +1,70 @@
+.container {
+  width: 100%;
+  position: relative;
+  text-align: center;
+  min-width: 250px;
+
+  margin: 0;
+  max-width: 100%;
+
+  & > input {
+    appearance: none;
+    border-radius: 24px;
+    border: solid 1px #e5e7eb;
+    color: #121620;
+    line-height: 125%;
+    outline: none;
+    padding: 16px 24px 5px;
+    transition: border-color 0.3s ease;
+    width: 100%;
+
+    background-color: #f1f1f1;
+    min-height: 52px;
+
+    &:focus {
+      border-color: #000;
+      transition-delay: 0.1s;
+    }
+  }
+
+  & > .label {
+    left: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: top 0.3s ease;
+    white-space: nowrap;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    user-select: none;
+    pointer-events: none;
+
+    & > span {
+      transition:
+        color 0.3s ease,
+        font-size 0.3s ease;
+    }
+  }
+}
+
+.container > input:focus + .label,
+.container > input:not(:placeholder-shown) + .label {
+  top: 12px;
+  width: auto;
+
+  & > span {
+    font-size: 12px;
+  }
+}
+
+.inputError {
+  border-color: #ef4444 !important; // red-500
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+  }
+}
+
+.errorText {
+  position: absolute;
+  margin-top: 4px;
+}
diff --git a/src/components/ui/TextInput/TextInput.tsx b/src/components/ui/TextInput/TextInput.tsx
new file mode 100644
index 0000000..ac3501c
--- /dev/null
+++ b/src/components/ui/TextInput/TextInput.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { type InputHTMLAttributes, useId } from "react";
+import clsx from "clsx";
+
+import Typography from "../Typography/Typography";
+
+import styles from "./TextInput.module.scss";
+
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  containerClassName?: string;
+}
+
+export const TextInput = ({
+  label,
+  type = "text",
+  error,
+  className,
+  containerClassName,
+  ...props
+}: TextInputProps) => {
+  const id = useId();
+
+  return (
+    <div className={clsx(styles.container, containerClassName)}>
+      <input
+        id={id}
+        type={type}
+        className={clsx(styles.input, error && styles.inputError, className)}
+        {...props}
+        placeholder=""
+      />
+      {label && (
+        <label htmlFor={id} className={styles.label}>
+          <Typography color="secondary">{label}</Typography>
+        </label>
+      )}
+      {error && (
+        <Typography
+          as="p"
+          size="xs"
+          color="danger"
+          className={styles.errorText}
+        >
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/ui/Toast/Toast.module.scss b/src/components/ui/Toast/Toast.module.scss
index 7cab7c7..5b2bb53 100644
--- a/src/components/ui/Toast/Toast.module.scss
+++ b/src/components/ui/Toast/Toast.module.scss
@@ -1,31 +1,55 @@
 .toast {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 24px 1fr;
-    gap: 6px;
-    align-items: center;
-    padding: 16px;
-    border-radius: 12px;
-    font-size: 14px;
-    color: #000;
-    animation: appearance .8s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.08 10.03%, 0.15 14.25%, 0.2 14.34%, 0.31 14.14%, 0.41 17.21%, 0.49 19.04%, 0.58 20.56%, 0.66 22.07%, 0.76 23.87%, 0.84 26.07%, 0.93 28.04%, 1.03 31.14%, 1.09 37.31%, 1.09 44.28%, 1.02 49.41%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
-    animation-fill-mode: forwards;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 6px;
+  align-items: center;
+  padding: 16px;
+  border-radius: 12px;
+  font-size: 14px;
+  color: #000;
+  animation: appearance 0.8s
+    linear(
+      0 0%,
+      0 1.8%,
+      0.01 3.6%,
+      0.08 10.03%,
+      0.15 14.25%,
+      0.2 14.34%,
+      0.31 14.14%,
+      0.41 17.21%,
+      0.49 19.04%,
+      0.58 20.56%,
+      0.66 22.07%,
+      0.76 23.87%,
+      0.84 26.07%,
+      0.93 28.04%,
+      1.03 31.14%,
+      1.09 37.31%,
+      1.09 44.28%,
+      1.02 49.41%,
+      0.96 55%,
+      0.98 64%,
+      0.99 74.4%,
+      1 86.4%,
+      1 100%
+    );
+  animation-fill-mode: forwards;
 }
 
 .toast.error {
-    background-color: #ffdcdc;
+  background-color: #ffdcdc;
 }
 
 .toast.success {
-    background-color: #d9ffd9;
+  background-color: #d9ffd9;
 }
 
-
 @keyframes appearance {
-    0% {
-        transform: translateY(100%);
-    }
-    100% {
-        transform: translateY(0);
-    }
-}
\ No newline at end of file
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
diff --git a/src/components/ui/Typography/Typography.module.scss b/src/components/ui/Typography/Typography.module.scss
index 4f7e8ee..1f0b400 100644
--- a/src/components/ui/Typography/Typography.module.scss
+++ b/src/components/ui/Typography/Typography.module.scss
@@ -56,7 +56,7 @@
 }
 
 .typography-gray-600 {
-  color: #6B7280;
+  color: #6b7280;
 }
 
 .typography-red-600 {
@@ -69,4 +69,4 @@
 
 .typography-gray-400 {
   color: #9ca3af;
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/Typography/Typography.tsx b/src/components/ui/Typography/Typography.tsx
index 4ce55ee..4d92e15 100644
--- a/src/components/ui/Typography/Typography.tsx
+++ b/src/components/ui/Typography/Typography.tsx
@@ -1,67 +1,74 @@
-import { JSX, ReactNode } from 'react';
-import clsx from 'clsx';
+import { JSX, ReactNode } from "react";
+import clsx from "clsx";
 
-import styles from "./Typography.module.scss"
+import styles from "./Typography.module.scss";
 
 export type TypographyProps = {
-    as?: keyof JSX.IntrinsicElements;
-    children: ReactNode;
-    className?: string;
-    weight?: 'regular' | 'medium' | 'semiBold' | 'bold';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    color?: 'default' | 'black' | 'white' | 'secondary' | 'danger' | 'success' | 'muted';
-    align?: 'center' | 'left' | 'right';
+  as?: keyof JSX.IntrinsicElements;
+  children: ReactNode;
+  className?: string;
+  weight?: "regular" | "medium" | "semiBold" | "bold";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  color?:
+    | "default"
+    | "black"
+    | "white"
+    | "secondary"
+    | "danger"
+    | "success"
+    | "muted";
+  align?: "center" | "left" | "right";
 };
 
 const sizeMap = {
-    xs: 'typography-xs',
-    sm: 'typography-sm',
-    md: 'typography-base',
-    lg: 'typography-lg',
-    xl: 'typography-xl',
-    '2xl': 'typography-2xl',
+  xs: "typography-xs",
+  sm: "typography-sm",
+  md: "typography-base",
+  lg: "typography-lg",
+  xl: "typography-xl",
+  "2xl": "typography-2xl",
 };
 
 const weightMap = {
-    regular: 'font-normal',
-    medium: 'font-medium',
-    semiBold: 'font-semi-bold',
-    bold: 'font-bold',
+  regular: "font-normal",
+  medium: "font-medium",
+  semiBold: "font-semi-bold",
+  bold: "font-bold",
 };
 
 const colorMap = {
-    default: 'typography-default',
-    black: 'typography-black',
-    white: 'typography-white',
-    secondary: 'typography-gray-600',
-    danger: 'typography-red-600',
-    success: 'typography-green-600',
-    muted: 'typography-gray-400',
+  default: "typography-default",
+  black: "typography-black",
+  white: "typography-white",
+  secondary: "typography-gray-600",
+  danger: "typography-red-600",
+  success: "typography-green-600",
+  muted: "typography-gray-400",
 };
 
 export default function Typography({
-    as: Component = 'span',
-    children,
-    className,
-    weight = 'regular',
-    size = 'md',
-    color = 'default',
-    align = 'center',
+  as: Component = "span",
+  children,
+  className,
+  weight = "regular",
+  size = "md",
+  color = "default",
+  align = "center",
 }: TypographyProps) {
-    return (
-        <Component
-            className={clsx(
-                styles[sizeMap[size]],
-                styles[weightMap[weight]],
-                styles[colorMap[color]],
-                styles.typography,
-                className
-            )}
-            style={{
-                textAlign: align
-            }}
-        >
-            {children}
-        </Component>
-    );
+  return (
+    <Component
+      className={clsx(
+        styles[sizeMap[size]],
+        styles[weightMap[weight]],
+        styles[colorMap[color]],
+        styles.typography,
+        className
+      )}
+      style={{
+        textAlign: align,
+      }}
+    >
+      {children}
+    </Component>
+  );
 }
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index f238f10..0160b78 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,18 +1,18 @@
-export { default as Button } from './Button/Button';
-export { default as Card } from './Card/Card';
-export { default as CircleArrow } from './CircleArrow/CircleArrow';
-export { default as EmailInput } from './EmailInput/EmailInput';
-export { default as GPTAnimationText } from './GPTAnimationText/GPTAnimationText';
-export { default as Grid } from './Grid/Grid';
-export { default as Icon } from './Icon/Icon';
-export { default as IconLabel } from './IconLabel/IconLabel';
-export { default as MetaLabel } from './MetaLabel/MetaLabel';
-export { default as Modal } from './Modal/Modal';
-export { default as NameInput } from './NameInput/NameInput';
-export { default as Section } from './Section/Section';
-export { default as Skeleton } from './Skeleton/Skeleton';
-export { default as Spinner } from './Spinner/Spinner';
-export { default as Stars } from './Stars/Stars';
-export { default as TabBar } from './TabBar/TabBar';
-export { default as Toast } from './Toast/Toast';
-export { default as Typography } from './Typography/Typography';
\ No newline at end of file
+export { default as Button } from "./Button/Button";
+export { default as Card } from "./Card/Card";
+export { default as CircleArrow } from "./CircleArrow/CircleArrow";
+export { default as EmailInput } from "./EmailInput/EmailInput";
+export { default as GPTAnimationText } from "./GPTAnimationText/GPTAnimationText";
+export { default as Grid } from "./Grid/Grid";
+export { default as Icon } from "./Icon/Icon";
+export { default as IconLabel } from "./IconLabel/IconLabel";
+export { default as MetaLabel } from "./MetaLabel/MetaLabel";
+export { default as Modal } from "./Modal/Modal";
+export { default as NameInput } from "./NameInput/NameInput";
+export { default as Section } from "./Section/Section";
+export { default as Skeleton } from "./Skeleton/Skeleton";
+export { default as Spinner } from "./Spinner/Spinner";
+export { default as Stars } from "./Stars/Stars";
+export { default as TabBar } from "./TabBar/TabBar";
+export { default as Toast } from "./Toast/Toast";
+export { default as Typography } from "./Typography/Typography";
diff --git a/src/components/widgets/ActionFieldsForm/ActionFieldsForm.module.scss b/src/components/widgets/ActionFieldsForm/ActionFieldsForm.module.scss
new file mode 100644
index 0000000..d4da26f
--- /dev/null
+++ b/src/components/widgets/ActionFieldsForm/ActionFieldsForm.module.scss
@@ -0,0 +1,26 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; // Увеличим отступ между полями
+}
+
+.fieldWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  margin: 0;
+}
+
+.buttonWrapper {
+  margin-top: 8px; // Небольшой отступ перед кнопкой
+}
+
+.button {
+  padding: 16px;
+}
\ No newline at end of file
diff --git a/src/components/widgets/ActionFieldsForm/ActionFieldsForm.tsx b/src/components/widgets/ActionFieldsForm/ActionFieldsForm.tsx
new file mode 100644
index 0000000..11c6fb2
--- /dev/null
+++ b/src/components/widgets/ActionFieldsForm/ActionFieldsForm.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { Button, Spinner, Typography } from "@/components/ui";
+import { TextInput } from "@/components/ui/TextInput/TextInput";
+import { ActionField } from "@/types";
+
+import styles from "./ActionFieldsForm.module.scss";
+
+import { DatePicker, TimePicker } from "..";
+
+const validate = (fields: ActionField[], values: FormValues): FormErrors => {
+  const errors: FormErrors = {};
+
+  for (const field of fields) {
+    const value = values[field.key];
+    // Для примера добавим правило, что все поля обязательны
+    if (value === null || value === "" || value === undefined) {
+      errors[field.key] = "Это поле обязательно для заполнения";
+    }
+    // Можно добавлять более сложные правила
+    // if (field.key === 'your_name' && value && value.length < 2) {
+    //   errors[field.key] = 'Имя должно содержать минимум 2 символа';
+    // }
+  }
+
+  return errors;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type FormValues = Record<string, any>;
+type FormErrors = Record<string, string>;
+type TouchedFields = Record<string, boolean>;
+
+interface ActionFieldsFormProps {
+  fields: ActionField[];
+  onSubmit: (values: FormValues) => void;
+  isLoading?: boolean;
+  buttonText: string;
+}
+
+export default function ActionFieldsForm({
+  fields,
+  onSubmit,
+  isLoading,
+  buttonText,
+}: ActionFieldsFormProps) {
+  const initialValues = useMemo(() => {
+    return fields.reduce((acc, field) => {
+      acc[field.key] = field.value ?? null;
+      return acc;
+    }, {} as FormValues);
+  }, [fields]);
+
+  const [formValues, setFormValues] = useState<FormValues>(initialValues);
+  const [touched, setTouched] = useState<TouchedFields>({});
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  useEffect(() => {
+    const validationErrors = validate(fields, formValues);
+    setErrors(validationErrors);
+  }, [formValues, fields]);
+
+  const handleBlur = useCallback((key: string) => {
+    setTouched(prev => ({ ...prev, [key]: true }));
+  }, []);
+
+  const handleChange = (key: string, value: unknown) => {
+    setFormValues(prev => ({ ...prev, [key]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const allTouched = fields.reduce((acc, field) => {
+      acc[field.key] = true;
+      return acc;
+    }, {} as TouchedFields);
+    setTouched(allTouched);
+
+    const validationErrors = validate(fields, formValues);
+    if (Object.keys(validationErrors).length === 0) {
+      onSubmit(formValues);
+    }
+  };
+
+  const isFormValid = Object.keys(errors).length === 0;
+
+  const renderField = (field: ActionField) => {
+    const key = field.key;
+    const value = formValues[key];
+    const error = touched[key] ? errors[key] : undefined;
+
+    switch (field.inputType) {
+      case "text":
+        return (
+          <TextInput
+            value={value || ""}
+            onChange={e => handleChange(key, e.target.value)}
+            error={error}
+            label={field.title}
+            onBlur={() => handleBlur(key)}
+          />
+        );
+      case "date":
+        return (
+          <DatePicker
+            value={value}
+            onChange={newValue => handleChange(key, newValue)}
+            error={error}
+            label={field.title}
+            onBlur={() => handleBlur(key)}
+          />
+        );
+      case "time":
+        return (
+          <TimePicker
+            value={value}
+            onChange={newValue => handleChange(key, newValue)}
+            error={error}
+            label={field.title}
+            // onBlur={() => handleBlur(key)}
+          />
+        );
+      default:
+        return (
+          <TextInput
+            value={value || ""}
+            onChange={e => handleChange(key, e.target.value)}
+            label={field.title}
+            error={`Unsupported field type: ${field.inputType}`}
+            onBlur={() => handleBlur(key)}
+          />
+        );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.form} noValidate>
+      {fields.map(field => (
+        <div key={field.key} className={styles.fieldWrapper}>
+          {renderField(field)}
+        </div>
+      ))}
+      <div className={styles.buttonWrapper}>
+        <Button
+          className={styles.button}
+          type="submit"
+          disabled={!isFormValid || isLoading}
+        >
+          {!isLoading && (
+            <Typography size="xl" color="white">
+              {buttonText}
+            </Typography>
+          )}
+          {isLoading && <Spinner />}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.module.scss b/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.module.scss
index d124f57..abf8f2d 100644
--- a/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.module.scss
+++ b/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.module.scss
@@ -1,35 +1,35 @@
 .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-inline: 28px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-inline: 28px;
 }
 
 .title {
-    margin-top: 32px;
-    margin-bottom: 50px;
-    font-size: 27px;
-    line-height: 40px;
+  margin-top: 32px;
+  margin-bottom: 50px;
+  font-size: 27px;
+  line-height: 40px;
 }
 
 .link {
-    opacity: 0;
-    width: 100%;
-    margin-top: 126px;
-    position: sticky;
-    bottom: calc(0dvh + 16px);
-    animation: fadeIn 0.5s ease-in-out forwards;
-    pointer-events: none;
+  opacity: 0;
+  width: 100%;
+  margin-top: 126px;
+  position: sticky;
+  bottom: calc(0dvh + 16px);
+  animation: fadeIn 0.5s ease-in-out forwards;
+  pointer-events: none;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1;
-        pointer-events: all;
-    }
-}
\ No newline at end of file
+  to {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
diff --git a/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.tsx b/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.tsx
index 8b59ac1..e59d1a7 100644
--- a/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.tsx
+++ b/src/components/widgets/AnimatedInfoScreen/AnimatedInfoScreen.tsx
@@ -6,38 +6,45 @@ import { GPTAnimationText, Typography } from "@/components/ui";
 import styles from "./AnimatedInfoScreen.module.scss";
 
 interface AnimatedInfoScreenProps {
-    lottieAnimation: React.ReactNode;
-    title: string;
-    animationTime?: number;
-    animationTexts?: string[];
-    buttonText?: string;
-    nextRoute?: string;
+  lottieAnimation: React.ReactNode;
+  title: string;
+  animationTime?: number;
+  animationTexts?: string[];
+  buttonText?: string;
+  nextRoute?: string;
 }
 
 export default async function AnimatedInfoScreen({
-    lottieAnimation,
-    title,
-    animationTime,
-    animationTexts,
-    buttonText,
-    nextRoute
+  lottieAnimation,
+  title,
+  animationTime,
+  animationTexts,
+  buttonText,
+  nextRoute,
 }: AnimatedInfoScreenProps) {
-
-    return (
-        <div className={styles.container}>
-            {lottieAnimation}
-            <Typography as="h1" weight="bold" className={styles.title}>
-                {title}
-            </Typography>
-            {!!animationTexts?.length && animationTime && <GPTAnimationText
-                points={animationTexts}
-                totalAnimationTime={animationTime}
-            />}
-            {nextRoute && buttonText && <Link className={styles.link} style={{ animationDelay: `${animationTime}ms` }} href={nextRoute}>
-                <RetainingButton className={styles.button} active={true}>
-                    {buttonText}
-                </RetainingButton>
-            </Link>}
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.container}>
+      {lottieAnimation}
+      <Typography as="h1" weight="bold" className={styles.title}>
+        {title}
+      </Typography>
+      {!!animationTexts?.length && animationTime && (
+        <GPTAnimationText
+          points={animationTexts}
+          totalAnimationTime={animationTime}
+        />
+      )}
+      {nextRoute && buttonText && (
+        <Link
+          className={styles.link}
+          style={{ animationDelay: `${animationTime}ms` }}
+          href={nextRoute}
+        >
+          <RetainingButton className={styles.button} active={true}>
+            {buttonText}
+          </RetainingButton>
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/widgets/BlurComponent/BlurComponent.module.scss b/src/components/widgets/BlurComponent/BlurComponent.module.scss
index 7b761e0..0b5e7fd 100644
--- a/src/components/widgets/BlurComponent/BlurComponent.module.scss
+++ b/src/components/widgets/BlurComponent/BlurComponent.module.scss
@@ -16,7 +16,7 @@
     height: auto;
     pointer-events: none;
 
-    &>div,
+    & > div,
     &::before,
     &::after {
       position: absolute;
@@ -28,57 +28,138 @@
       z-index: 1;
       -webkit-backdrop-filter: blur(0.5px);
       backdrop-filter: blur(0.5px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 0%,
+        black 12.5%,
+        black 25%,
+        rgba(0, 0, 0, 0) 37.5%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 0%,
+        black 12.5%,
+        black 25%,
+        rgba(0, 0, 0, 0) 37.5%
+      );
     }
 
-
-    &>div:nth-of-type(1) {
+    & > div:nth-of-type(1) {
       z-index: 2;
       -webkit-backdrop-filter: blur(1px);
       backdrop-filter: blur(1px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 12.5%,
+        black 25%,
+        black 37.5%,
+        rgba(0, 0, 0, 0) 50%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 12.5%,
+        black 25%,
+        black 37.5%,
+        rgba(0, 0, 0, 0) 50%
+      );
     }
 
-    &>div:nth-of-type(2) {
+    & > div:nth-of-type(2) {
       z-index: 3;
       -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 25%,
+        black 37.5%,
+        black 50%,
+        rgba(0, 0, 0, 0) 62.5%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 25%,
+        black 37.5%,
+        black 50%,
+        rgba(0, 0, 0, 0) 62.5%
+      );
     }
 
-    &>div:nth-of-type(3) {
+    & > div:nth-of-type(3) {
       z-index: 4;
       -webkit-backdrop-filter: blur(4px);
       backdrop-filter: blur(4px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 37.5%,
+        black 50%,
+        black 62.5%,
+        rgba(0, 0, 0, 0) 75%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 37.5%,
+        black 50%,
+        black 62.5%,
+        rgba(0, 0, 0, 0) 75%
+      );
     }
 
-    &>div:nth-of-type(4) {
+    & > div:nth-of-type(4) {
       z-index: 5;
       -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 50%,
+        black 62.5%,
+        black 75%,
+        rgba(0, 0, 0, 0) 87.5%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 50%,
+        black 62.5%,
+        black 75%,
+        rgba(0, 0, 0, 0) 87.5%
+      );
     }
 
-    &>div:nth-of-type(5) {
+    & > div:nth-of-type(5) {
       z-index: 6;
       -webkit-backdrop-filter: blur(16px);
       backdrop-filter: blur(16px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 62.5%,
+        black 75%,
+        black 87.5%,
+        rgba(0, 0, 0, 0) 100%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 62.5%,
+        black 75%,
+        black 87.5%,
+        rgba(0, 0, 0, 0) 100%
+      );
     }
 
-    &>div:nth-of-type(6) {
+    & > div:nth-of-type(6) {
       z-index: 7;
       -webkit-backdrop-filter: blur(32px);
       backdrop-filter: blur(32px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 75%,
+        black 87.5%,
+        black 100%
+      );
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 75%,
+        black 87.5%,
+        black 100%
+      );
     }
 
     &::after {
@@ -86,8 +167,12 @@
       z-index: 8;
       -webkit-backdrop-filter: blur(64px);
       backdrop-filter: blur(64px);
-      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
+      -webkit-mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 87.5%,
+        black 100%
+      );
       mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/BlurComponent/BlurComponent.tsx b/src/components/widgets/BlurComponent/BlurComponent.tsx
index 37e9ae1..75d39e3 100644
--- a/src/components/widgets/BlurComponent/BlurComponent.tsx
+++ b/src/components/widgets/BlurComponent/BlurComponent.tsx
@@ -1,4 +1,4 @@
-import { forwardRef,ReactNode, Ref } from "react";
+import { forwardRef, ReactNode, Ref } from "react";
 import clsx from "clsx";
 
 import styles from "./BlurComponent.module.scss";
@@ -24,12 +24,12 @@ const BlurComponent = forwardRef(function BlurComponent(
       {children}
       {isActiveBlur && (
         <div className={clsx(styles.gradientBlur, gradientClassName)}>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
         </div>
       )}
     </div>
diff --git a/src/components/widgets/DatePicker/DatePicker.module.scss b/src/components/widgets/DatePicker/DatePicker.module.scss
new file mode 100644
index 0000000..9805c79
--- /dev/null
+++ b/src/components/widgets/DatePicker/DatePicker.module.scss
@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.inputsWrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
diff --git a/src/components/widgets/DatePicker/DatePicker.tsx b/src/components/widgets/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000..cabfaf8
--- /dev/null
+++ b/src/components/widgets/DatePicker/DatePicker.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
+
+import { Typography } from "@/components/ui";
+import { SelectInput } from "@/components/ui/SelectInput/SelectInput";
+
+import styles from "./DatePicker.module.scss";
+
+const isValidDate = (year: number, month: number, day: number) => {
+  if (!year || !month || !day) return false;
+  const date = new Date(year, month - 1, day);
+  return (
+    date.getFullYear() === year &&
+    date.getMonth() === month - 1 &&
+    date.getDate() === day
+  );
+};
+
+// Упрощенное определение порядка полей даты на основе локали.
+// В реальном приложении здесь лучше использовать данные из next-intl.
+const getDateInputLocaleFormat = (): ("d" | "m" | "y")[] => {
+  const locale =
+    typeof navigator !== "undefined" ? navigator.language : "en-US";
+  const format = new Intl.DateTimeFormat(locale).format(new Date(2001, 1, 3)); // Используем 3/Feb/2001
+  if (/^3.*2/.test(format)) return ["d", "m", "y"]; // 3/2/2001 -> d/m/y
+  if (/^2.*3/.test(format)) return ["m", "d", "y"]; // 2/3/2001 -> m/d/y
+  return ["y", "m", "d"]; // 2001/2/3 -> y/m/d
+};
+
+interface DatePickerProps {
+  label?: string;
+  value: string | null;
+  onChange: (value: string | null) => void;
+  error?: string;
+  maxYear?: number;
+  yearsRange?: number;
+  onBlur?: () => void;
+}
+
+export default function DatePicker({
+  label,
+  value,
+  onChange,
+  error,
+  maxYear = new Date().getFullYear() - 11,
+  yearsRange = 100,
+  onBlur,
+}: DatePickerProps) {
+  const t = useTranslations("DatePicker");
+  const [year, setYear] = useState("");
+  const [month, setMonth] = useState("");
+  const [day, setDay] = useState("");
+
+  useEffect(() => {
+    if (value && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      const [y, m, d] = value.split("-");
+      setYear(y);
+      setMonth(m);
+      setDay(d);
+    } else {
+      setYear("");
+      setMonth("");
+      setDay("");
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const numericYear = Number(year);
+    const numericMonth = Number(month);
+    const numericDay = Number(day);
+
+    if (isValidDate(numericYear, numericMonth, numericDay)) {
+      const formattedDate = `${year}-${month}-${day}`;
+      if (formattedDate !== value) {
+        onChange(formattedDate);
+      }
+    } else {
+      if (value !== null) {
+        onChange(null);
+      }
+    }
+  }, [year, month, day, onChange, value]);
+
+  const yearOptions = useMemo(
+    () =>
+      Array.from({ length: yearsRange }, (_, i) => ({
+        value: maxYear - i,
+        label: String(maxYear - i),
+      })),
+    [maxYear, yearsRange]
+  );
+
+  const monthOptions = useMemo(
+    () =>
+      Array.from({ length: 12 }, (_, i) => ({
+        value: String(i + 1).padStart(2, "0"),
+        label: String(i + 1),
+      })),
+    []
+  );
+
+  const dayOptions = useMemo(() => {
+    const daysInMonth =
+      year && month ? new Date(Number(year), Number(month), 0).getDate() : 31;
+    return Array.from({ length: daysInMonth }, (_, i) => ({
+      value: String(i + 1).padStart(2, "0"),
+      label: String(i + 1),
+    }));
+  }, [year, month]);
+
+  const localeFormat = useMemo(() => getDateInputLocaleFormat(), []);
+
+  const inputs = {
+    d: (
+      <SelectInput
+        key="d"
+        value={day}
+        onChange={e => setDay(e.target.value)}
+        options={dayOptions}
+        placeholder={t("day")}
+      />
+    ),
+    m: (
+      <SelectInput
+        key="m"
+        value={month}
+        onChange={e => setMonth(e.target.value)}
+        options={monthOptions}
+        placeholder={t("month")}
+      />
+    ),
+    y: (
+      <SelectInput
+        key="y"
+        value={year}
+        onChange={e => setYear(e.target.value)}
+        options={yearOptions}
+        placeholder={t("year")}
+      />
+    ),
+  };
+
+  return (
+    <div className={styles.container} onBlur={onBlur}>
+      {label && (
+        <Typography as="p" size="sm" align="left" className={styles.mainLabel}>
+          {label}
+        </Typography>
+      )}
+      <div className={styles.inputsWrapper}>
+        {localeFormat.map(format => inputs[format])}
+      </div>
+      {error && (
+        <Typography
+          as="p"
+          size="xs"
+          color="danger"
+          align="left"
+          className={styles.errorText}
+        >
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/widgets/Horoscope/Horoscope.module.scss b/src/components/widgets/Horoscope/Horoscope.module.scss
index 29ff406..7901476 100644
--- a/src/components/widgets/Horoscope/Horoscope.module.scss
+++ b/src/components/widgets/Horoscope/Horoscope.module.scss
@@ -1,36 +1,36 @@
 .horoscope {
-    background: #fff;
-    border-radius: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-    padding: 24px 16px 16px 16px;
-    max-width: 400px;
-    margin: 0 auto;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  padding: 24px 16px 16px 16px;
+  max-width: 400px;
+  margin: 0 auto;
 }
 
 .title,
 .text {
-    color: #2A74DD;
+  color: #2a74dd;
 }
 
 .card.card {
-    padding: 16px 0px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  padding: 16px 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .content {
-    display: flex;
-    flex-direction: column;
-    padding-inline: 8px;
-    gap: 20px;
-    transition: height 2s ease;
+  display: flex;
+  flex-direction: column;
+  padding-inline: 8px;
+  gap: 20px;
+  transition: height 2s ease;
 }
 
 .seeAllButton {
-    padding: 0 !important;
-    background: none !important;
-    border-radius: 0 !important;
-    width: fit-content !important;
-    margin-left: auto;
-}
\ No newline at end of file
+  padding: 0 !important;
+  background: none !important;
+  border-radius: 0 !important;
+  width: fit-content !important;
+  margin-left: auto;
+}
diff --git a/src/components/widgets/Horoscope/Horoscope.tsx b/src/components/widgets/Horoscope/Horoscope.tsx
index 5f4cedc..78ddafa 100644
--- a/src/components/widgets/Horoscope/Horoscope.tsx
+++ b/src/components/widgets/Horoscope/Horoscope.tsx
@@ -10,48 +10,60 @@ import styles from "./Horoscope.module.scss";
 type Period = "today" | "week" | "month" | "year";
 
 const TABS: Tab<Period>[] = [
-    { label: "Today", value: "today" },
-    { label: "Week", value: "week" },
-    { label: "Month", value: "month" },
-    { label: "Year", value: "year" },
+  { label: "Today", value: "today" },
+  { label: "Week", value: "week" },
+  { label: "Month", value: "month" },
+  { label: "Year", value: "year" },
 ];
 
 const HOROSCOPE_TEXT = {
-    today: "Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm. Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm.",
-    week: "Weekly horoscope text...",
-    month: "Monthly horoscope text...",
-    year: "Yearly horoscope text...",
+  today:
+    "Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm. Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm.",
+  week: "Weekly horoscope text...",
+  month: "Monthly horoscope text...",
+  year: "Yearly horoscope text...",
 };
 
 export default function Horoscope() {
-    const [active, setActive] = useState<Period>("today");
-    const [isCollapsed, setIscollapsed] = useState(true)
+  const [active, setActive] = useState<Period>("today");
+  const [isCollapsed, setIscollapsed] = useState(true);
 
-    const enableCollapse = useMemo(() => {
-        return HOROSCOPE_TEXT[active]?.split(" ")?.length > 30
-    }, [active])
+  const enableCollapse = useMemo(() => {
+    return HOROSCOPE_TEXT[active]?.split(" ")?.length > 30;
+  }, [active]);
 
-    const text = useMemo(() => {
-        if (!isCollapsed || !enableCollapse) return HOROSCOPE_TEXT[active];
-        return HOROSCOPE_TEXT[active]?.split(" ").slice(0, 31).join(" ") + " ..."
-    }, [isCollapsed, active, enableCollapse])
+  const text = useMemo(() => {
+    if (!isCollapsed || !enableCollapse) return HOROSCOPE_TEXT[active];
+    return HOROSCOPE_TEXT[active]?.split(" ").slice(0, 31).join(" ") + " ...";
+  }, [isCollapsed, active, enableCollapse]);
 
-    return (
-        <Card className={styles.card}>
-            <TabBar<Period> tabs={TABS} active={active} onChange={setActive} />
-            <div className={styles.content}>
-                <Typography as="h3" weight="regular" className={styles.title}>
-                    — Your Horoscope today —
-                </Typography>
-                <Typography as="p" weight="medium" className={styles.text}>
-                    {text}
-                </Typography>
-                {enableCollapse && <Button className={styles.seeAllButton} onClick={() => setIscollapsed((prev) => !prev)}>
-                    <Typography as="span" size="sm" weight="medium" color="secondary" align="right">
-                        {isCollapsed ? "See All" : "Hide"}
-                    </Typography>
-                </Button>}
-            </div>
-        </Card>
-    );
-}
\ No newline at end of file
+  return (
+    <Card className={styles.card}>
+      <TabBar<Period> tabs={TABS} active={active} onChange={setActive} />
+      <div className={styles.content}>
+        <Typography as="h3" weight="regular" className={styles.title}>
+          — Your Horoscope today —
+        </Typography>
+        <Typography as="p" weight="medium" className={styles.text}>
+          {text}
+        </Typography>
+        {enableCollapse && (
+          <Button
+            className={styles.seeAllButton}
+            onClick={() => setIscollapsed(prev => !prev)}
+          >
+            <Typography
+              as="span"
+              size="sm"
+              weight="medium"
+              color="secondary"
+              align="right"
+            >
+              {isCollapsed ? "See All" : "Hide"}
+            </Typography>
+          </Button>
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/widgets/LottieAnimation/LottieAnimation.tsx b/src/components/widgets/LottieAnimation/LottieAnimation.tsx
index 4fe5573..e409942 100644
--- a/src/components/widgets/LottieAnimation/LottieAnimation.tsx
+++ b/src/components/widgets/LottieAnimation/LottieAnimation.tsx
@@ -1,39 +1,46 @@
 "use client";
 
-import { DotLottieReact, DotLottieReactProps } from "@lottiefiles/dotlottie-react";
+import {
+  DotLottieReact,
+  DotLottieReactProps,
+} from "@lottiefiles/dotlottie-react";
 import clsx from "clsx";
 
 import { useLottie } from "@/hooks/lottie/useLottie";
 import { ELottieKeys } from "@/shared/constants/lottie";
 
 interface LottieAnimationProps {
-    loadKey: ELottieKeys;
-    width?: number | string;
-    height?: number | string;
-    className?: string;
-    animationProps?: DotLottieReactProps;
+  loadKey: ELottieKeys;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  animationProps?: DotLottieReactProps;
 }
 
-export default function LottieAnimation({ loadKey, width = 80, height = 80, className, animationProps }: LottieAnimationProps) {
-    const { animationData } = useLottie({
-        loadKey,
-    });
+export default function LottieAnimation({
+  loadKey,
+  width = 80,
+  height = 80,
+  className,
+  animationProps,
+}: LottieAnimationProps) {
+  const { animationData } = useLottie({
+    loadKey,
+  });
 
-    return (
-        <div
-            style={{ width: width, height: height }}
-            className={className}
-        >
-            {animationData &&
-                <DotLottieReact
-                    style={{ width: width, height: height }}
-                    data={animationData}
-                    autoplay
-                    width={width}
-                    height={height}
-                    {...animationProps}
-                    className={clsx(animationProps?.className, "ym-hide-content")}
-                />}
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div style={{ width: width, height: height }} className={className}>
+      {animationData && (
+        <DotLottieReact
+          style={{ width: width, height: height }}
+          data={animationData}
+          autoplay
+          width={width}
+          height={height}
+          {...animationProps}
+          className={clsx(animationProps?.className, "ym-hide-content")}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/widgets/Table/Table.module.scss b/src/components/widgets/Table/Table.module.scss
index 9d92177..02b59df 100644
--- a/src/components/widgets/Table/Table.module.scss
+++ b/src/components/widgets/Table/Table.module.scss
@@ -1,33 +1,33 @@
 .container {
-    width: 100%;
-    padding: 16px;
-    border-radius: 12px;
-    background-color: #f0f0f4;
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  padding: 16px;
+  border-radius: 12px;
+  background-color: #f0f0f4;
+  display: flex;
+  flex-direction: column;
 }
 
 .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 16px 8px;
-    border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px 8px;
+  border-bottom: 1px solid #e5e7eb;
 
-    &:last-child {
-        border-bottom: none;
-        padding-bottom: 0;
-    }
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
 }
 
 .cell {
-    width: 100%;
-    line-height: 1.5;
-    font-size: 16px;
-    color: #7d8785;
+  width: 100%;
+  line-height: 1.5;
+  font-size: 16px;
+  color: #7d8785;
 
-    &:nth-child(2) {
-        color: #090909;
-        font-weight: 600;
-    }
-}
\ No newline at end of file
+  &:nth-child(2) {
+    color: #090909;
+    font-weight: 600;
+  }
+}
diff --git a/src/components/widgets/Table/Table.tsx b/src/components/widgets/Table/Table.tsx
index 2dc2559..d71f22c 100644
--- a/src/components/widgets/Table/Table.tsx
+++ b/src/components/widgets/Table/Table.tsx
@@ -1,23 +1,23 @@
-import styles from "./Table.module.scss"
+import styles from "./Table.module.scss";
 
 interface ITableProps {
-    data: (string | React.ReactNode)[][];
+  data: (string | React.ReactNode)[][];
 }
 
 function Table({ data }: ITableProps) {
-    return (
-        <div className={styles.container}>
-            {data.map((row, index) => (
-                <div key={index} className={styles.row}>
-                    {row.map((cell, cellIndex) => (
-                        <div key={cellIndex} className={styles.cell}>
-                            {!!cell ? cell : "-"}
-                        </div>
-                    ))}
-                </div>
-            ))}
+  return (
+    <div className={styles.container}>
+      {data.map((row, index) => (
+        <div key={`table-row-${index}`} className={styles.row}>
+          {row.map((cell, cellIndex) => (
+            <div key={`table-cell-${cellIndex}`} className={styles.cell}>
+              {!!cell ? cell : "-"}
+            </div>
+          ))}
         </div>
-    )
+      ))}
+    </div>
+  );
 }
 
-export default Table
\ No newline at end of file
+export default Table;
diff --git a/src/components/widgets/TimePicker/TimePicker.module.scss b/src/components/widgets/TimePicker/TimePicker.module.scss
new file mode 100644
index 0000000..1c53604
--- /dev/null
+++ b/src/components/widgets/TimePicker/TimePicker.module.scss
@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mainLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  margin: 0;
+}
+
+.inputsWrapper {
+  display: grid;
+  // Делаем селектор AM/PM немного уже
+  grid-template-columns: 1fr 1fr 0.8fr;
+  gap: 12px;
+}
+
+.errorText {
+  font-size: 12px;
+  color: #ef4444; // red-500
+  margin: 0;
+  min-height: 1.2em;
+}
diff --git a/src/components/widgets/TimePicker/TimePicker.tsx b/src/components/widgets/TimePicker/TimePicker.tsx
new file mode 100644
index 0000000..40df898
--- /dev/null
+++ b/src/components/widgets/TimePicker/TimePicker.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
+
+import { SelectInput } from "@/components/ui/SelectInput/SelectInput";
+
+import styles from "./TimePicker.module.scss";
+
+// Конвертирует 12-часовой формат в 24-часовой "HH:mm"
+const to24HourFormat = (
+  h: string,
+  m: string,
+  p: "AM" | "PM"
+): string | null => {
+  const hour = parseInt(h, 10);
+  const minute = parseInt(m, 10);
+  if (isNaN(hour) || isNaN(minute)) return null;
+
+  let h24 = hour;
+  if (p === "PM" && h24 < 12) h24 += 12;
+  if (p === "AM" && h24 === 12) h24 = 0; // Полночь
+  return `${String(h24).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+};
+
+// Конвертирует 24-часовой "HH:mm" в объект {h, m, p}
+const from24HourFormat = (val: string | null) => {
+  if (!val || !/^\d{2}:\d{2}$/.test(val)) {
+    return { h: "", m: "", p: "AM" as const };
+  }
+  const [h24, m] = val.split(":").map(Number);
+  const p = h24 >= 12 ? ("PM" as const) : ("AM" as const);
+  const h12 = h24 % 12 || 12; // 0 и 12 становятся 12
+  return { h: String(h12), m: String(m).padStart(2, "0"), p };
+};
+
+interface TimePickerProps {
+  label?: string;
+  value: string | null; // Ожидается "HH:mm" (24h)
+  onChange: (value: string | null) => void;
+  error?: string;
+  onBlur?: () => void;
+}
+
+export default function TimePicker({
+  label,
+  value,
+  onChange,
+  error,
+  onBlur,
+}: TimePickerProps) {
+  const t = useTranslations("TimePicker");
+
+  const [{ h, m, p }, setState] = useState(from24HourFormat(value));
+
+  useEffect(() => {
+    if (value === null) {
+      onChange("12:00");
+    }
+  }, [value, onChange]);
+
+  useEffect(() => {
+    setState(from24HourFormat(value));
+  }, [value]);
+
+  const hourOptions = useMemo(
+    () =>
+      Array.from({ length: 12 }, (_, i) => ({
+        value: i + 1,
+        label: String(i + 1),
+      })),
+    []
+  );
+  const minuteOptions = useMemo(
+    () =>
+      Array.from({ length: 60 }, (_, i) => ({
+        value: String(i).padStart(2, "0"),
+        label: String(i).padStart(2, "0"),
+      })),
+    []
+  );
+  const periodOptions = [
+    { value: "AM", label: "AM" },
+    { value: "PM", label: "PM" },
+  ];
+
+  const handleStateChange = (newState: {
+    h: string;
+    m: string;
+    p: "AM" | "PM";
+  }) => {
+    setState(newState);
+    const formattedTime = to24HourFormat(newState.h, newState.m, newState.p);
+    if (formattedTime !== value) {
+      onChange(formattedTime);
+    }
+  };
+
+  return (
+    <div className={styles.container} onBlur={onBlur}>
+      {label && <p className={styles.mainLabel}>{label}</p>}
+      <div className={styles.inputsWrapper}>
+        <SelectInput
+          value={h}
+          onChange={e => handleStateChange({ h: e.target.value, m, p })}
+          options={hourOptions}
+          placeholder={t("hour")}
+          error={error}
+        />
+        <SelectInput
+          value={m}
+          onChange={e => handleStateChange({ h, m: e.target.value, p })}
+          options={minuteOptions}
+          placeholder={t("minute")}
+          error={error}
+        />
+        <SelectInput
+          value={p}
+          onChange={e =>
+            handleStateChange({ h, m, p: e.target.value as "AM" | "PM" })
+          }
+          options={periodOptions}
+          placeholder={t("period")}
+          error={error}
+        />
+      </div>
+      {error && <p className={styles.errorText}>{error}</p>}
+    </div>
+  );
+}
diff --git a/src/components/widgets/index.ts b/src/components/widgets/index.ts
index 7b88837..e810d34 100644
--- a/src/components/widgets/index.ts
+++ b/src/components/widgets/index.ts
@@ -1,5 +1,8 @@
-export { default as AnimatedInfoScreen } from './AnimatedInfoScreen/AnimatedInfoScreen';
-export { default as BlurComponent } from './BlurComponent/BlurComponent';
-export { default as Horoscope } from './Horoscope/Horoscope';
-export { default as LottieAnimation } from './LottieAnimation/LottieAnimation';
-export { default as Table } from './Table/Table';
\ No newline at end of file
+export { default as ActionFieldsForm } from "./ActionFieldsForm/ActionFieldsForm";
+export { default as AnimatedInfoScreen } from "./AnimatedInfoScreen/AnimatedInfoScreen";
+export { default as BlurComponent } from "./BlurComponent/BlurComponent";
+export { default as DatePicker } from "./DatePicker/DatePicker";
+export { default as Horoscope } from "./Horoscope/Horoscope";
+export { default as LottieAnimation } from "./LottieAnimation/LottieAnimation";
+export { default as Table } from "./Table/Table";
+export { default as TimePicker } from "./TimePicker/TimePicker";
diff --git a/src/entities/compatibilityActionFields/api.ts b/src/entities/compatibilityActionFields/api.ts
new file mode 100644
index 0000000..eaace84
--- /dev/null
+++ b/src/entities/compatibilityActionFields/api.ts
@@ -0,0 +1,18 @@
+import { http } from "@/shared/api/httpClient";
+import { API_ROUTES } from "@/shared/constants/api-routes";
+
+import {
+  CompatibilityActionFieldsData,
+  CompatibilityActionFieldsSchema,
+} from "./types";
+
+export const getCompatibilityActionFields = async (id: string) => {
+  return http.get<CompatibilityActionFieldsData>(
+    API_ROUTES.compatibilityActionFields(id),
+    {
+      tags: ["compatibility-action-fields"],
+      schema: CompatibilityActionFieldsSchema,
+      revalidate: 0,
+    }
+  );
+};
diff --git a/src/entities/compatibilityActionFields/loaders.ts b/src/entities/compatibilityActionFields/loaders.ts
new file mode 100644
index 0000000..8f18d35
--- /dev/null
+++ b/src/entities/compatibilityActionFields/loaders.ts
@@ -0,0 +1,7 @@
+import { cache } from "react";
+
+import { getCompatibilityActionFields } from "./api";
+
+export const loadCompatibilityActionFields = cache(
+  getCompatibilityActionFields
+);
diff --git a/src/entities/compatibilityActionFields/types.ts b/src/entities/compatibilityActionFields/types.ts
new file mode 100644
index 0000000..3f8a173
--- /dev/null
+++ b/src/entities/compatibilityActionFields/types.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+import { ActionFieldSchema } from "@/types";
+
+/* ---------- Итоговый ответ /compatibilityActionFields ---------- */
+export const CompatibilityActionFieldsSchema = z.array(ActionFieldSchema);
+export type CompatibilityActionFieldsData = z.infer<
+  typeof CompatibilityActionFieldsSchema
+>;
diff --git a/src/entities/dashboard/api.ts b/src/entities/dashboard/api.ts
index 9d3e34b..57643d1 100644
--- a/src/entities/dashboard/api.ts
+++ b/src/entities/dashboard/api.ts
@@ -1,11 +1,11 @@
 import { http } from "@/shared/api/httpClient";
 import { API_ROUTES } from "@/shared/constants/api-routes";
 
-import { DashboardData,DashboardSchema } from "./types";
+import { DashboardData, DashboardSchema } from "./types";
 
 export const getDashboard = async () => {
-    return http.get<DashboardData>(API_ROUTES.dashboard(), {
-        tags: ["dashboard"],
-        schema: DashboardSchema
-    });
-}
\ No newline at end of file
+  return http.get<DashboardData>(API_ROUTES.dashboard(), {
+    tags: ["dashboard"],
+    schema: DashboardSchema,
+  });
+};
diff --git a/src/entities/dashboard/loaders.ts b/src/entities/dashboard/loaders.ts
index 6113c65..aa840d6 100644
--- a/src/entities/dashboard/loaders.ts
+++ b/src/entities/dashboard/loaders.ts
@@ -5,14 +5,12 @@ import { getDashboard } from "./api";
 export const loadDashboard = cache(getDashboard);
 
 export const loadAssistants = cache(() =>
-    loadDashboard().then(d => d.assistants)
+  loadDashboard().then(d => d.assistants)
 );
 export const loadCompatibility = cache(() =>
-    loadDashboard().then(d => d.compatibilityActions)
+  loadDashboard().then(d => d.compatibilityActions)
 );
 export const loadMeditations = cache(() =>
-    loadDashboard().then(d => d.meditations)
+  loadDashboard().then(d => d.meditations)
 );
-export const loadPalms = cache(() =>
-    loadDashboard().then(d => d.palmActions)
-);
\ No newline at end of file
+export const loadPalms = cache(() => loadDashboard().then(d => d.palmActions));
diff --git a/src/entities/dashboard/types.ts b/src/entities/dashboard/types.ts
index 7f54c8a..0a8c9a2 100644
--- a/src/entities/dashboard/types.ts
+++ b/src/entities/dashboard/types.ts
@@ -2,82 +2,82 @@ import { z } from "zod";
 
 /* ---------- Assistant ---------- */
 export const AssistantSchema = z.object({
-    _id: z.string(),
-    name: z.string(),
-    description: z.string(),
-    rating: z.number(),
-    reviewCount: z.number(),
-    experience: z.number(),
-    readings: z.number(),
-    category: z.string(),
-    price: z.number(),
-    gender: z.enum(["male", "female"]),
-    photoUrl: z.string().url(),
-    externalId: z.string(),
-    clientSource: z.string(),
-    createdAt: z.string(),   // ISO-строка даты
-    updatedAt: z.string(),
+  _id: z.string(),
+  name: z.string(),
+  description: z.string(),
+  rating: z.number(),
+  reviewCount: z.number(),
+  experience: z.number(),
+  readings: z.number(),
+  category: z.string(),
+  price: z.number(),
+  gender: z.enum(["male", "female"]),
+  photoUrl: z.string().url(),
+  externalId: z.string(),
+  clientSource: z.string(),
+  createdAt: z.string(), // ISO-строка даты
+  updatedAt: z.string(),
 });
 export type Assistant = z.infer<typeof AssistantSchema>;
 
 /* ---------- Field (для compatibilityActions) ---------- */
 export const FieldSchema = z.object({
-    _id: z.string(),
-    actionId: z.string(),
-    key: z.string(),
-    title: z.string(),
-    inputType: z.string(),          // text | date | time …
-    model: z.string().optional(),   // присутствует не всегда
-    property: z.string().optional(),
-    createdAt: z.string(),
-    updatedAt: z.string(),
+  _id: z.string(),
+  actionId: z.string(),
+  key: z.string(),
+  title: z.string(),
+  inputType: z.string(), // text | date | time …
+  model: z.string().optional(), // присутствует не всегда
+  property: z.string().optional(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
 });
 export type Field = z.infer<typeof FieldSchema>;
 
 /* ---------- CompatibilityAction ---------- */
 export const CompatibilityActionSchema = z.object({
-    _id: z.string(),
-    title: z.string(),
-    minutes: z.number(),
-    type: z.string(),
-    imageUrl: z.string().url(),
-    prompt: z.string(),
-    fields: z.array(FieldSchema),
-    createdAt: z.string(),
-    updatedAt: z.string(),
+  _id: z.string(),
+  title: z.string(),
+  minutes: z.number(),
+  type: z.string(),
+  imageUrl: z.string().url(),
+  prompt: z.string(),
+  fields: z.array(FieldSchema),
+  createdAt: z.string(),
+  updatedAt: z.string(),
 });
 export type CompatibilityAction = z.infer<typeof CompatibilityActionSchema>;
 
 /* ---------- PalmAction ---------- */
 export const PalmActionSchema = z.object({
-    _id: z.string(),
-    title: z.string(),
-    minutes: z.number(),
-    type: z.string(),
-    imageUrl: z.string().url(),
-    prompt: z.string(),
-    createdAt: z.string(),
-    updatedAt: z.string(),
+  _id: z.string(),
+  title: z.string(),
+  minutes: z.number(),
+  type: z.string(),
+  imageUrl: z.string().url(),
+  prompt: z.string(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
 });
 export type PalmAction = z.infer<typeof PalmActionSchema>;
 
 /* ---------- Meditation ---------- */
 export const MeditationSchema = z.object({
-    _id: z.string(),
-    title: z.string(),
-    minutes: z.number(),
-    type: z.string(),
-    imageUrl: z.string().url(),
-    createdAt: z.string(),
-    updatedAt: z.string(),
+  _id: z.string(),
+  title: z.string(),
+  minutes: z.number(),
+  type: z.string(),
+  imageUrl: z.string().url(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
 });
 export type Meditation = z.infer<typeof MeditationSchema>;
 
 /* ---------- Итоговый ответ /dashboard ---------- */
 export const DashboardSchema = z.object({
-    assistants: z.array(AssistantSchema),
-    compatibilityActions: z.array(CompatibilityActionSchema),
-    palmActions: z.array(PalmActionSchema),
-    meditations: z.array(MeditationSchema),
+  assistants: z.array(AssistantSchema),
+  compatibilityActions: z.array(CompatibilityActionSchema),
+  palmActions: z.array(PalmActionSchema),
+  meditations: z.array(MeditationSchema),
 });
-export type DashboardData = z.infer<typeof DashboardSchema>;
\ No newline at end of file
+export type DashboardData = z.infer<typeof DashboardSchema>;
diff --git a/src/entities/generations/actions.ts b/src/entities/generations/actions.ts
new file mode 100644
index 0000000..199142b
--- /dev/null
+++ b/src/entities/generations/actions.ts
@@ -0,0 +1,54 @@
+/* eslint-disable no-console */
+"use server";
+
+import { http } from "@/shared/api/httpClient";
+import { API_ROUTES } from "@/shared/constants/api-routes";
+import { ActionResponse } from "@/types";
+
+import {
+  GenerationResponse,
+  GenerationResponseSchema,
+  StartGenerationRequest,
+} from "./types";
+
+export async function startGeneration(
+  payload: StartGenerationRequest
+): Promise<ActionResponse<GenerationResponse>> {
+  try {
+    const response = await http.post<GenerationResponse>(
+      API_ROUTES.startGeneration(),
+      payload,
+      {
+        schema: GenerationResponseSchema,
+        revalidate: 0,
+      }
+    );
+
+    return { data: response, error: null };
+  } catch (error) {
+    console.error("Failed to start generation:", error);
+    const errorMessage =
+      error instanceof Error ? error.message : "Произошла неизвестная ошибка.";
+    return { data: null, error: errorMessage };
+  }
+}
+
+export async function fetchGenerationStatus(
+  id: string
+): Promise<ActionResponse<GenerationResponse>> {
+  try {
+    const response = await http.get<GenerationResponse>(
+      API_ROUTES.statusGeneration(id),
+      {
+        schema: GenerationResponseSchema,
+        revalidate: 0, // Всегда запрашиваем свежие данные
+      }
+    );
+    return { data: response, error: null };
+  } catch (error) {
+    console.error("Failed to fetch generation status:", error);
+    const errorMessage =
+      error instanceof Error ? error.message : "Произошла неизвестная ошибка.";
+    return { data: null, error: errorMessage };
+  }
+}
diff --git a/src/entities/generations/api.ts b/src/entities/generations/api.ts
new file mode 100644
index 0000000..e6dae31
--- /dev/null
+++ b/src/entities/generations/api.ts
@@ -0,0 +1,16 @@
+import { http } from "@/shared/api/httpClient";
+import { API_ROUTES } from "@/shared/constants/api-routes";
+
+import {
+  GenerationResponse,
+  GenerationResponseSchema,
+  StartGenerationRequest,
+} from "./types";
+
+export const startGeneration = async (payload: StartGenerationRequest) => {
+  return http.post<GenerationResponse>(API_ROUTES.startGeneration(), payload, {
+    tags: ["generations"],
+    schema: GenerationResponseSchema,
+    revalidate: 0,
+  });
+};
diff --git a/src/entities/generations/loaders.ts b/src/entities/generations/loaders.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/entities/generations/types.ts b/src/entities/generations/types.ts
new file mode 100644
index 0000000..0a45d41
--- /dev/null
+++ b/src/entities/generations/types.ts
@@ -0,0 +1,26 @@
+import { z } from "zod";
+
+/* ---------- Start Generation Request ---------- */
+
+export const StartGenerationRequestSchema = z.object({
+  actionType: z.enum(["compatibility", "palm"]),
+  actionId: z.string(),
+  variables: z
+    .record(z.string().or(z.number()).or(z.null())) // Record<string, string>
+    .optional(),
+});
+
+export type StartGenerationRequest = z.infer<
+  typeof StartGenerationRequestSchema
+>;
+
+/* ---------- Start Generation Response ---------- */
+
+export const GenerationResponseSchema = z.object({
+  id: z.string(),
+  status: z.string(), // e.g., "queued", "processing", "completed", "failed"
+  locale: z.string(),
+  result: z.string().nullable(), // The result can be of any type when not null
+});
+
+export type GenerationResponse = z.infer<typeof GenerationResponseSchema>;
diff --git a/src/entities/payment/api.ts b/src/entities/payment/api.ts
index d72eb36..222880f 100644
--- a/src/entities/payment/api.ts
+++ b/src/entities/payment/api.ts
@@ -2,18 +2,14 @@ import { http } from "@/shared/api/httpClient";
 import { API_ROUTES } from "@/shared/constants/api-routes";
 
 import {
-    CheckoutRequest,
-    CheckoutResponse,
-    CheckoutResponseSchema,
+  CheckoutRequest,
+  CheckoutResponse,
+  CheckoutResponseSchema,
 } from "./types";
 
 export async function createPaymentCheckout(payload: CheckoutRequest) {
-    return http.post<CheckoutResponse>(
-        API_ROUTES.paymentCheckout(),
-        payload,
-        {
-            schema: CheckoutResponseSchema,
-            revalidate: 0,
-        }
-    );
-}
\ No newline at end of file
+  return http.post<CheckoutResponse>(API_ROUTES.paymentCheckout(), payload, {
+    schema: CheckoutResponseSchema,
+    revalidate: 0,
+  });
+}
diff --git a/src/entities/payment/types.ts b/src/entities/payment/types.ts
index d700df3..eeb0758 100644
--- a/src/entities/payment/types.ts
+++ b/src/entities/payment/types.ts
@@ -1,15 +1,15 @@
 import { z } from "zod";
 
 export const CheckoutRequestSchema = z.object({
-    productId: z.string(),
-    placementId: z.string(),
-    paywallId: z.string(),
+  productId: z.string(),
+  placementId: z.string(),
+  paywallId: z.string(),
 });
 export type CheckoutRequest = z.infer<typeof CheckoutRequestSchema>;
 
 export const CheckoutResponseSchema = z.object({
-    status: z.string(),       // "paid" | "pending" | …
-    invoiceId: z.string(),
-    paymentUrl: z.string().url(),
+  status: z.string(), // "paid" | "pending" | …
+  invoiceId: z.string(),
+  paymentUrl: z.string().url(),
 });
-export type CheckoutResponse = z.infer<typeof CheckoutResponseSchema>;
\ No newline at end of file
+export type CheckoutResponse = z.infer<typeof CheckoutResponseSchema>;
diff --git a/src/entities/subscriptions/api.ts b/src/entities/subscriptions/api.ts
index fb9e13d..3a7e811 100644
--- a/src/entities/subscriptions/api.ts
+++ b/src/entities/subscriptions/api.ts
@@ -1,12 +1,12 @@
 import { http } from "@/shared/api/httpClient";
 import { API_ROUTES } from "@/shared/constants/api-routes";
 
-import { SubscriptionsData,SubscriptionsSchema } from "./types";
+import { SubscriptionsData, SubscriptionsSchema } from "./types";
 
 export const getSubscriptions = async () => {
-    return http.get<SubscriptionsData>(API_ROUTES.subscriptions(), {
-        tags: ["subscriptions"],
-        schema: SubscriptionsSchema,
-        revalidate: 0
-    });
-}
\ No newline at end of file
+  return http.get<SubscriptionsData>(API_ROUTES.subscriptions(), {
+    tags: ["subscriptions"],
+    schema: SubscriptionsSchema,
+    revalidate: 0,
+  });
+};
diff --git a/src/entities/subscriptions/loaders.ts b/src/entities/subscriptions/loaders.ts
index 3c6d2f1..71cbabd 100644
--- a/src/entities/subscriptions/loaders.ts
+++ b/src/entities/subscriptions/loaders.ts
@@ -4,10 +4,8 @@ import { getSubscriptions } from "./api";
 
 export const loadSubscriptions = cache(getSubscriptions);
 
-export const loadStatus = cache(() =>
-    loadSubscriptions().then(d => d.status)
-);
+export const loadStatus = cache(() => loadSubscriptions().then(d => d.status));
 
 export const loadSubscriptionsData = cache(() =>
-    loadSubscriptions().then(d => d.data)
-);
\ No newline at end of file
+  loadSubscriptions().then(d => d.data)
+);
diff --git a/src/entities/subscriptions/types.ts b/src/entities/subscriptions/types.ts
index eef7bfc..6dc490e 100644
--- a/src/entities/subscriptions/types.ts
+++ b/src/entities/subscriptions/types.ts
@@ -5,7 +5,11 @@ import { Currency } from "@/types";
 export const SubscriptionTypeEnum = z.enum(["DAY", "WEEK", "MONTH", "YEAR"]);
 export type SubscriptionType = z.infer<typeof SubscriptionTypeEnum>;
 
-export const SubscriptionStatusEnum = z.enum(["ACTIVE", "CANCELLED"]);
+export const SubscriptionStatusEnum = z.enum([
+  "ACTIVE",
+  "CANCELLED",
+  "PAST_DUE",
+]);
 export type SubscriptionStatus = z.infer<typeof SubscriptionStatusEnum>;
 
 export const UserSubscriptionSchema = z.object({
diff --git a/src/entities/user/api.ts b/src/entities/user/api.ts
new file mode 100644
index 0000000..0dcacef
--- /dev/null
+++ b/src/entities/user/api.ts
@@ -0,0 +1,12 @@
+import { http } from "@/shared/api/httpClient";
+import { API_ROUTES } from "@/shared/constants/api-routes";
+
+import { IMeResponse, MeResponseSchema } from "./types";
+
+export const getMe = async (): Promise<IMeResponse> => {
+  return http.get<IMeResponse>(API_ROUTES.usersMe(), {
+    tags: ["user", "me"],
+    schema: MeResponseSchema,
+    revalidate: 0,
+  });
+};
diff --git a/src/entities/user/loaders.ts b/src/entities/user/loaders.ts
new file mode 100644
index 0000000..142326a
--- /dev/null
+++ b/src/entities/user/loaders.ts
@@ -0,0 +1,7 @@
+import { cache } from "react";
+
+import { getMe } from "./api";
+
+export const loadMe = cache(getMe);
+
+export const loadUser = cache(() => loadMe().then(d => d.user));
diff --git a/src/entities/user/types.ts b/src/entities/user/types.ts
new file mode 100644
index 0000000..300df0e
--- /dev/null
+++ b/src/entities/user/types.ts
@@ -0,0 +1,62 @@
+import { z } from "zod";
+
+const IpLookupSchema = z
+  .object({
+    country: z.string(),
+    region: z.string(),
+    eu: z.string(),
+    timezone: z.string(),
+    city: z.string(),
+  })
+  .optional();
+
+const ProfileSchema = z.object({
+  birthplace: z.object({
+    address: z.string(),
+  }).optional(),
+  name: z.string(),
+  birthdate: z.string(),
+  gender: z.string(),
+  age: z.number(),
+  sign: z.string(),
+});
+
+const PartnerSchema = z
+  .object({
+    birthplace: z.object({
+      address: z.string(),
+    }),
+    birthdate: z.string(),
+    gender: z.string(),
+    age: z.number(),
+    sign: z.string(),
+  })
+  .optional();
+
+export const UserSchema = z.object({
+  ipLookup: IpLookupSchema,
+  profile: ProfileSchema,
+  partner: PartnerSchema,
+  _id: z.string(),
+  initialIp: z.string().optional(),
+  sessionId: z.string().optional(),
+  email: z.string(),
+  locale: z.string(),
+  timezone: z.string(),
+  source: z.string(),
+  sign: z.boolean(),
+  signDate: z.string(),
+  password: z.string(),
+  externalId: z.string(),
+  klaviyoId: z.string(),
+  assistants: z.array(z.string()),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+});
+
+export const MeResponseSchema = z.object({
+  user: UserSchema,
+});
+
+export type IUser = z.infer<typeof UserSchema>;
+export type IMeResponse = z.infer<typeof MeResponseSchema>;
diff --git a/src/hooks/DOM/useDynamicSize.ts b/src/hooks/DOM/useDynamicSize.ts
index 563e378..983d1da 100644
--- a/src/hooks/DOM/useDynamicSize.ts
+++ b/src/hooks/DOM/useDynamicSize.ts
@@ -1,39 +1,43 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react";
 
 interface IUseDynamicSize {
-    defaultWidth?: number
-    defaultHeight?: number
+  defaultWidth?: number;
+  defaultHeight?: number;
 }
 
-export function useDynamicSize<T extends HTMLElement>({ defaultWidth = 0, defaultHeight = 0 }: IUseDynamicSize) {
-    const [width, setWidth] = useState<number>(defaultWidth);
-    const [height, setHeight] = useState<number>(defaultHeight);
+export function useDynamicSize<T extends HTMLElement>({
+  defaultWidth = 0,
+  defaultHeight = 0,
+}: IUseDynamicSize) {
+  const [width, setWidth] = useState<number>(defaultWidth);
+  const [height, setHeight] = useState<number>(defaultHeight);
 
-    const elementRef = useRef<T>(null);
+  const elementRef = useRef<T>(null);
 
-    useEffect(() => {
-        if (!elementRef.current)
-            return;
+  useEffect(() => {
+    if (!elementRef.current) return;
 
-        const resizeObserver = new ResizeObserver(() => {
-            if (elementRef.current?.clientWidth !== width) {
-                setWidth(elementRef.current?.clientWidth || 0);
-            }
-            if (elementRef.current?.clientHeight !== height) {
-                setHeight(elementRef.current?.clientHeight || 0);
-            }
-        });
+    const resizeObserver = new ResizeObserver(() => {
+      if (elementRef.current?.clientWidth !== width) {
+        setWidth(elementRef.current?.clientWidth || 0);
+      }
+      if (elementRef.current?.clientHeight !== height) {
+        setHeight(elementRef.current?.clientHeight || 0);
+      }
+    });
 
-        resizeObserver.observe(elementRef.current);
+    resizeObserver.observe(elementRef.current);
 
-        return function cleanup() {
-            resizeObserver.disconnect();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elementRef.current])
+    return function cleanup() {
+      resizeObserver.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef.current]);
 
-
-    return useMemo(() => ({ width, height, elementRef }), [width, height, elementRef])
-}
\ No newline at end of file
+  return useMemo(
+    () => ({ width, height, elementRef }),
+    [width, height, elementRef]
+  );
+}
diff --git a/src/hooks/generation/useGenerationPolling.ts b/src/hooks/generation/useGenerationPolling.ts
new file mode 100644
index 0000000..9027c88
--- /dev/null
+++ b/src/hooks/generation/useGenerationPolling.ts
@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { fetchGenerationStatus } from "@/entities/generations/actions";
+import { GenerationResponse } from "@/entities/generations/types";
+
+export function useGenerationPolling(id: string, interval = 3000) {
+  const [data, setData] = useState<GenerationResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!id) {
+      setError("ID генерации не найден.");
+      setIsLoading(false);
+      return;
+    }
+
+    const poll = async () => {
+      if (!timeoutIdRef) return;
+
+      const response = await fetchGenerationStatus(id);
+
+      if (response.error) {
+        setError(response.error);
+        setIsLoading(false);
+        return; // Останавливаем опрос при ошибке
+      }
+
+      const status = response.data?.status;
+
+      if (status === "done" || status === "failed") {
+        setData(response.data);
+        setIsLoading(false);
+        return;
+      }
+
+      timeoutIdRef.current = setTimeout(poll, interval);
+    };
+
+    poll();
+
+    return () => {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+    };
+  }, [id, interval]);
+
+  return { data, error, isLoading };
+}
diff --git a/src/hooks/lottie/useLottie.ts b/src/hooks/lottie/useLottie.ts
index d996e53..e050561 100644
--- a/src/hooks/lottie/useLottie.ts
+++ b/src/hooks/lottie/useLottie.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -7,80 +8,82 @@ import indexedDB, { EObjectStores } from "@/services/indexedDB";
 import { ELottieKeys, lottieUrls } from "@/shared/constants/lottie";
 
 interface IUseLottieProps {
-    preloadKey?: ELottieKeys;
-    loadKey?: ELottieKeys;
+  preloadKey?: ELottieKeys;
+  loadKey?: ELottieKeys;
 }
 
 export const useLottie = ({ preloadKey, loadKey }: IUseLottieProps) => {
-    const [animationData, setAnimationData] = useState<Data>();
-    const [isError, setIsError] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
+  const [animationData, setAnimationData] = useState<Data>();
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-    const getAnimationDataFromLottie = async (key: ELottieKeys) => {
-        try {
-            const animation = await fetch(lottieUrls[key]);
-            if (!animation.ok) {
-                throw new Error(`HTTP error! status: ${animation.status}`);
-            }
-            const arrayBuffer = await animation.arrayBuffer();
-            return arrayBuffer;
-        } catch (error) {
-            console.error('Error loading animation:', error);
-            setIsError(true);
-            return null;
-        }
+  const getAnimationDataFromLottie = async (key: ELottieKeys) => {
+    try {
+      const animation = await fetch(lottieUrls[key]);
+      if (!animation.ok) {
+        throw new Error(`HTTP error! status: ${animation.status}`);
+      }
+      const arrayBuffer = await animation.arrayBuffer();
+      return arrayBuffer;
+    } catch (error) {
+      console.error("Error loading animation:", error);
+      setIsError(true);
+      return null;
     }
+  };
 
-    const preload = useCallback(async (key: ELottieKeys) => {
-        console.log("preload", key);
+  const preload = useCallback(async (key: ELottieKeys) => {
+    console.log("preload", key);
 
-        const arrayBuffer = await getAnimationDataFromLottie(key);
-        indexedDB.set(EObjectStores.Lottie, key, arrayBuffer);
-    }, [])
+    const arrayBuffer = await getAnimationDataFromLottie(key);
+    indexedDB.set(EObjectStores.Lottie, key, arrayBuffer);
+  }, []);
 
-    const load = useCallback(async (key: ELottieKeys) => {
-        setIsLoading(true);
-        setIsError(false);
-        try {
-            const animationFromDB = await indexedDB.get<ArrayBuffer>(EObjectStores.Lottie, key);
-            if (animationFromDB) {
-                setAnimationData(animationFromDB);
-                setIsLoading(false);
-                return;
-            }
+  const load = useCallback(async (key: ELottieKeys) => {
+    setIsLoading(true);
+    setIsError(false);
+    try {
+      const animationFromDB = await indexedDB.get<ArrayBuffer>(
+        EObjectStores.Lottie,
+        key
+      );
+      if (animationFromDB) {
+        setAnimationData(animationFromDB);
+        setIsLoading(false);
+        return;
+      }
 
-            const arrayBuffer = await getAnimationDataFromLottie(key);
-            if (!arrayBuffer) {
-                setIsLoading(false);
-                return;
-            }
+      const arrayBuffer = await getAnimationDataFromLottie(key);
+      if (!arrayBuffer) {
+        setIsLoading(false);
+        return;
+      }
 
-            setAnimationData(arrayBuffer);
-            await indexedDB.set<ArrayBuffer>(EObjectStores.Lottie, key, arrayBuffer);
-        } catch (error) {
-            console.error('Error in load process:', error);
-            setIsError(true);
-        } finally {
-            setIsLoading(false);
-        }
-    }, []);
+      setAnimationData(arrayBuffer);
+      await indexedDB.set<ArrayBuffer>(EObjectStores.Lottie, key, arrayBuffer);
+    } catch (error) {
+      console.error("Error in load process:", error);
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
 
-    useEffect(() => {
-        if (preloadKey) {
-            preload(preloadKey);
-        }
-        if (loadKey) {
-            load(loadKey);
-        }
-    }, [load, loadKey, preload, preloadKey])
+  useEffect(() => {
+    if (preloadKey) {
+      preload(preloadKey);
+    }
+    if (loadKey) {
+      load(loadKey);
+    }
+  }, [load, loadKey, preload, preloadKey]);
 
-    return useMemo(() => ({
-        animationData,
-        isError,
-        isLoading
-    }), [
-        animationData,
-        isError,
-        isLoading
-    ])
-}
\ No newline at end of file
+  return useMemo(
+    () => ({
+      animationData,
+      isError,
+      isLoading,
+    }),
+    [animationData, isError, isLoading]
+  );
+};
diff --git a/src/i18n/navigation.ts b/src/i18n/navigation.ts
index ca4696b..16c2c39 100644
--- a/src/i18n/navigation.ts
+++ b/src/i18n/navigation.ts
@@ -1,8 +1,8 @@
-import { createNavigation } from 'next-intl/navigation';
+import { createNavigation } from "next-intl/navigation";
 
-import { routing } from './routing';
+import { routing } from "./routing";
 
 // Lightweight wrappers around Next.js' navigation
 // APIs that consider the routing configuration
 export const { Link, redirect, usePathname, useRouter, getPathname } =
-    createNavigation(routing);
\ No newline at end of file
+  createNavigation(routing);
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
index 339c9ab..fdd79d7 100644
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -1,17 +1,17 @@
-import { hasLocale } from 'next-intl';
-import { getRequestConfig } from 'next-intl/server';
+import { hasLocale } from "next-intl";
+import { getRequestConfig } from "next-intl/server";
 
-import { routing } from './routing';
+import { routing } from "./routing";
 
 export default getRequestConfig(async ({ requestLocale }) => {
-    // Typically corresponds to the `[locale]` segment
-    const requested = await requestLocale;
-    const locale = hasLocale(routing.locales, requested)
-        ? requested
-        : routing.defaultLocale;
+  // Typically corresponds to the `[locale]` segment
+  const requested = await requestLocale;
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
 
-    return {
-        locale,
-        messages: (await import(`../../messages/${locale}.json`)).default
-    };
-});
\ No newline at end of file
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
+  };
+});
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
index d737212..da1c548 100644
--- a/src/i18n/routing.ts
+++ b/src/i18n/routing.ts
@@ -1,9 +1,9 @@
-import { defineRouting } from 'next-intl/routing';
+import { defineRouting } from "next-intl/routing";
 
 export const routing = defineRouting({
-    // A list of all locales that are supported
-    locales: ['en', 'de'],
+  // A list of all locales that are supported
+  locales: ["en", "de"],
 
-    // Used when no locale matches
-    defaultLocale: 'en'
-});
\ No newline at end of file
+  // Used when no locale matches
+  defaultLocale: "en",
+});
diff --git a/src/middleware.ts b/src/middleware.ts
index 775ddca..688b599 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,12 +1,12 @@
-import createMiddleware from 'next-intl/middleware';
+import createMiddleware from "next-intl/middleware";
 
-import { routing } from './i18n/routing';
+import { routing } from "./i18n/routing";
 
 export default createMiddleware(routing);
 
 export const config = {
-    // Match all pathnames except for
-    // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
-    // - … the ones containing a dot (e.g. `favicon.ico`)
-    matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
-};
\ No newline at end of file
+  // Match all pathnames except for
+  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
+  // - … the ones containing a dot (e.g. `favicon.ico`)
+  matcher: "/((?!api|trpc|_next|_vercel|.*\\..*).*)",
+};
diff --git a/src/providers/StoreProvider.tsx b/src/providers/StoreProvider.tsx
new file mode 100644
index 0000000..d9a999d
--- /dev/null
+++ b/src/providers/StoreProvider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useRetainingStore } from "@/stores/retainingStore";
+
+export function StoreProvider({ children }: { children: React.ReactNode }) {
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    // Гидратируем store
+    useRetainingStore.persist.rehydrate();
+    setIsHydrated(true);
+  }, []);
+
+  // Показываем children только после гидратации
+  if (!isHydrated) {
+    return null; // или loading spinner
+  }
+
+  return <>{children}</>;
+}
diff --git a/src/services/indexedDB/index.ts b/src/services/indexedDB/index.ts
index 6f7559c..86c10e5 100644
--- a/src/services/indexedDB/index.ts
+++ b/src/services/indexedDB/index.ts
@@ -1,9 +1,9 @@
 "use client";
 
-import { IDBPDatabase,openDB } from "idb";
+import { IDBPDatabase, openDB } from "idb";
 
 export enum EObjectStores {
-    Lottie = "lottie",
+  Lottie = "lottie",
 }
 
 const objectStores: EObjectStores[] = [EObjectStores.Lottie];
@@ -11,41 +11,42 @@ const objectStores: EObjectStores[] = [EObjectStores.Lottie];
 let dbPromise: Promise<IDBPDatabase> | null = null;
 
 function getDB() {
-    if (typeof window === "undefined") {
-        throw new Error("IndexedDB is unavailable on the server.");
-    }
-    if (!dbPromise) {
-        dbPromise = openDB("wit-store", 1, {
-            upgrade(db) {
-                db.createObjectStore("lottie");
-            },
-        });
-    }
-    return dbPromise;
+  if (typeof window === "undefined") {
+    throw new Error("IndexedDB is unavailable on the server.");
+  }
+  if (!dbPromise) {
+    dbPromise = openDB("wit-store", 1, {
+      upgrade(db) {
+        db.createObjectStore("lottie");
+      },
+    });
+  }
+  return dbPromise;
 }
 
-async function get<T>(store: EObjectStores, key: string): Promise<T | undefined> {
-    return (await getDB()).get(store, key);
+async function get<T>(
+  store: EObjectStores,
+  key: string
+): Promise<T | undefined> {
+  return (await getDB()).get(store, key);
 }
 async function set<T>(store: EObjectStores, key: string, val: T) {
-    return (await getDB()).put(store, val, key);
+  return (await getDB()).put(store, val, key);
 }
 async function del(store: EObjectStores, key: string) {
-    return (await getDB()).delete(store, key);
+  return (await getDB()).delete(store, key);
 }
 async function clear() {
-    return Promise.all(
-        objectStores.map(async (s) => (await getDB()).clear(s))
-    );
+  return Promise.all(objectStores.map(async s => (await getDB()).clear(s)));
 }
 async function keys() {
-    return Promise.all(
-        objectStores.map(async (s) => ({
-            objectStore: s,
-            keys: await (await getDB()).getAllKeys(s),
-        }))
-    );
+  return Promise.all(
+    objectStores.map(async s => ({
+      objectStore: s,
+      keys: await (await getDB()).getAllKeys(s),
+    }))
+  );
 }
 
 const indexedDBService = { get, set, del, clear, keys };
-export default indexedDBService;
\ No newline at end of file
+export default indexedDBService;
diff --git a/src/shared/api/httpClient.ts b/src/shared/api/httpClient.ts
index 0c42548..26c0b4a 100644
--- a/src/shared/api/httpClient.ts
+++ b/src/shared/api/httpClient.ts
@@ -3,76 +3,83 @@ import { z } from "zod";
 import { getServerAccessToken } from "../auth/token";
 
 export class ApiError extends Error {
-    constructor(
-        public status: number,
-        public data: unknown,
-        message = "API Error"
-    ) {
-        super(message);
-        this.name = "ApiError";
-    }
+  constructor(
+    public status: number,
+    public data: unknown,
+    message = "API Error"
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
 }
 
 type RequestOpts = Omit<RequestInit, "method" | "body"> & {
-    tags?: string[];                  // next.js cache-tag
-    query?: Record<string, unknown>;  // query-string
-    schema?: z.ZodTypeAny;            // runtime validation
-    revalidate?: number;
+  tags?: string[]; // next.js cache-tag
+  query?: Record<string, unknown>; // query-string
+  schema?: z.ZodTypeAny; // runtime validation
+  revalidate?: number;
 };
 
 class HttpClient {
-    constructor(private baseUrl: string) { }
+  constructor(private baseUrl: string) {}
 
-    private buildUrl(rootUrl: string, path: string, query?: Record<string, unknown>) {
-        const url = new URL(path, rootUrl);
-        if (query)
-            Object.entries(query).forEach(([k, v]) =>
-                url.searchParams.append(k, String(v))
-            );
-        return url.toString();
-    }
+  private buildUrl(
+    rootUrl: string,
+    path: string,
+    query?: Record<string, unknown>
+  ) {
+    const url = new URL(path, rootUrl);
+    if (query)
+      Object.entries(query).forEach(([k, v]) =>
+        url.searchParams.append(k, String(v))
+      );
+    return url.toString();
+  }
 
-    private async request<T>(
-        method: "GET" | "POST" | "PATCH" | "DELETE",
-        rootUrl: string = this.baseUrl,
-        path: string,
-        opts: RequestOpts = {},
-        body?: unknown,
-        errorMessage?: string
-    ): Promise<T> {
-        const {
-            tags = [],
-            schema,
-            query,
-            revalidate = 300,
-            ...rest
-        } = opts;
+  private async request<T>(
+    method: "GET" | "POST" | "PATCH" | "DELETE",
+    rootUrl: string = this.baseUrl,
+    path: string,
+    opts: RequestOpts = {},
+    body?: unknown,
+    errorMessage?: string
+  ): Promise<T> {
+    const { tags = [], schema, query, revalidate = 300, ...rest } = opts;
 
-        const headers = new Headers();
-        const accessToken = await getServerAccessToken();
-        if (accessToken) headers.set("Authorization", `Bearer ${accessToken}`);
-        headers.set("Content-Type", "application/json");
+    const headers = new Headers();
+    const accessToken = await getServerAccessToken();
+    if (accessToken) headers.set("Authorization", `Bearer ${accessToken}`);
+    headers.set("Content-Type", "application/json");
 
-        const res = await fetch(this.buildUrl(rootUrl, path, query), {
-            method,
-            body: body ? JSON.stringify(body) : undefined,
-            headers,
-            next: { revalidate, tags },
-            ...rest,
-        });
+    const res = await fetch(this.buildUrl(rootUrl, path, query), {
+      method,
+      body: body ? JSON.stringify(body) : undefined,
+      headers,
+      next: { revalidate, tags },
+      ...rest,
+    });
 
-        const payload = await res.json().catch(() => null);
+    const payload = await res.json().catch(() => null);
 
-        if (!res.ok) throw new ApiError(res.status, payload, errorMessage);
+    if (!res.ok) throw new ApiError(res.status, payload, errorMessage);
 
-        const data = payload as T;
-        return schema ? schema.parse(data) : data;
-    }
+    const data = payload as T;
+    return schema ? schema.parse(data) : data;
+  }
 
-    get = <T>(p: string, o?: RequestOpts, u?: string) => this.request<T>("GET", u, p, o);
-    post = <T>(p: string, b: unknown, o?: RequestOpts, u?: string) => this.request<T>("POST", u, p, o, b);
-    patch = <T>(p: string, b: unknown, o?: RequestOpts, u?: string) => this.request<T>("PATCH", u, p, o, b);
-    delete = <T>(p: string, o?: RequestOpts, u?: string) => this.request<T>("DELETE", u, p, o);
+  get = <T>(p: string, o?: RequestOpts, u?: string) =>
+    this.request<T>("GET", u, p, o);
+  post = <T>(p: string, b: unknown, o?: RequestOpts, u?: string) =>
+    this.request<T>("POST", u, p, o, b);
+  patch = <T>(p: string, b: unknown, o?: RequestOpts, u?: string) =>
+    this.request<T>("PATCH", u, p, o, b);
+  delete = <T>(p: string, o?: RequestOpts, u?: string) =>
+    this.request<T>("DELETE", u, p, o);
 }
 
-export const http = new HttpClient(process.env.NEXT_PUBLIC_API_URL!);
\ No newline at end of file
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+if (!apiUrl) {
+  throw new Error("NEXT_PUBLIC_API_URL environment variable is required");
+}
+
+export const http = new HttpClient(apiUrl);
diff --git a/src/shared/auth/token.ts b/src/shared/auth/token.ts
index 5c677fe..b3d800d 100644
--- a/src/shared/auth/token.ts
+++ b/src/shared/auth/token.ts
@@ -2,5 +2,5 @@
 import { cookies } from "next/headers";
 
 export async function getServerAccessToken() {
-    return (await cookies()).get("accessToken")?.value;
-}
\ No newline at end of file
+  return (await cookies()).get("accessToken")?.value;
+}
diff --git a/src/shared/constants/api-routes.ts b/src/shared/constants/api-routes.ts
index cfde083..1011097 100644
--- a/src/shared/constants/api-routes.ts
+++ b/src/shared/constants/api-routes.ts
@@ -1,13 +1,21 @@
-const ROOT_ROUTE = "/"
-const ROOT_ROUTE_V2 = "/v2/"
-const ROOT_ROUTE_V3 = "/v3/"
+const ROOT_ROUTE = "/";
+const ROOT_ROUTE_V2 = "/v2/";
+const ROOT_ROUTE_V3 = "/v3/";
 
-const createRoute = (segments: string[], rootRoute: string = ROOT_ROUTE): string => {
-    return rootRoute + segments.join("/")
-}
+const createRoute = (
+  segments: string[],
+  rootRoute: string = ROOT_ROUTE
+): string => {
+  return rootRoute + segments.join("/");
+};
 
 export const API_ROUTES = {
-    dashboard: () => createRoute(["dashboard"]),
-    subscriptions: () => createRoute(["payment", "subscriptions"], ROOT_ROUTE_V3),
-    paymentCheckout: () => createRoute(["payment", "checkout"], ROOT_ROUTE_V2)
-};
\ No newline at end of file
+  dashboard: () => createRoute(["dashboard"]),
+  subscriptions: () => createRoute(["payment", "subscriptions"], ROOT_ROUTE_V3),
+  paymentCheckout: () => createRoute(["payment", "checkout"], ROOT_ROUTE_V2),
+  usersMe: () => createRoute(["users", "me"], ROOT_ROUTE),
+  compatibilityActionFields: (id: string) =>
+    createRoute(["dashboard", "compatibility-actions", id, "fields"]),
+  startGeneration: () => createRoute(["generations", "start"]),
+  statusGeneration: (id: string) => createRoute(["generations", "status", id]),
+};
diff --git a/src/shared/constants/client-routes.ts b/src/shared/constants/client-routes.ts
index f4cc981..ae24ce2 100644
--- a/src/shared/constants/client-routes.ts
+++ b/src/shared/constants/client-routes.ts
@@ -1,33 +1,51 @@
-const ROOT_ROUTE = "/"
+const ROOT_ROUTE = "/";
 
 const profilePrefix = "profile";
 const retainingFunnelPrefix = "retaining";
 
 const createRoute = (segments: string[]): string => {
-    return ROOT_ROUTE + segments.join("/")
-}
+  return ROOT_ROUTE + segments.join("/");
+};
 
 export const ROUTES = {
-    home: () => createRoute([]),
+  home: () => createRoute([]),
 
-    // Profile
-    profile: () => createRoute([profilePrefix]),
-    profileSubscriptions: () => createRoute([profilePrefix, "subscriptions"]),
+  // Compatibility
+  compatibility: (id: string) => createRoute(["compatibility", id]),
+  compatibilityResult: (id: string) =>
+    createRoute(["compatibility", "result", id]),
 
-    // Retaining Funnel
-    retainingFunnelCancelSubscription: () => createRoute([retainingFunnelPrefix, "cancel-subscription"]),
-    retainingFunnelAppreciateChoice: () => createRoute([retainingFunnelPrefix, "appreciate-choice"]),
-    retainingFunnelStay50Done: () => createRoute([retainingFunnelPrefix, "stay-50-done"]),
-    retainingFunnelWhatReason: () => createRoute([retainingFunnelPrefix, "what-reason"]),
-    retainingFunnelSecondChance: () => createRoute([retainingFunnelPrefix, "second-chance"]),
-    retainingFunnelStopFor30Days: () => createRoute([retainingFunnelPrefix, "stop-for-30-days"]),
-    retainingFunnelChangeMind: () => createRoute([retainingFunnelPrefix, "change-mind"]),
-    retainingFunnelCancellationOfSubscription: () => createRoute([retainingFunnelPrefix, "cancellation-of-subscription"]),
-    retainingFunnelPlanCancelled: () => createRoute([retainingFunnelPrefix, "plan-cancelled"]),
-    retainingFunnelSubscriptionStopped: () => createRoute([retainingFunnelPrefix, "subscription-stopped"]),
+  // Palmistry
+  palmistryResult: (id: string) => createRoute(["palmistry", "result", id]),
 
-    // Payment
-    payment: () => createRoute(["payment"]),
-    paymentSuccess: () => createRoute(["payment", "success"]),
-    paymentFailed: () => createRoute(["payment", "failed"]),
-};
\ No newline at end of file
+  // Profile
+  profile: () => createRoute([profilePrefix]),
+  profileSubscriptions: () => createRoute([profilePrefix, "subscriptions"]),
+
+  // Retaining Funnel
+  retainingFunnelCancelSubscription: () =>
+    createRoute([retainingFunnelPrefix, "cancel-subscription"]),
+  retainingFunnelAppreciateChoice: () =>
+    createRoute([retainingFunnelPrefix, "appreciate-choice"]),
+  retainingFunnelStay50Done: () =>
+    createRoute([retainingFunnelPrefix, "stay-50-done"]),
+  retainingFunnelWhatReason: () =>
+    createRoute([retainingFunnelPrefix, "what-reason"]),
+  retainingFunnelSecondChance: () =>
+    createRoute([retainingFunnelPrefix, "second-chance"]),
+  retainingFunnelStopFor30Days: () =>
+    createRoute([retainingFunnelPrefix, "stop-for-30-days"]),
+  retainingFunnelChangeMind: () =>
+    createRoute([retainingFunnelPrefix, "change-mind"]),
+  retainingFunnelCancellationOfSubscription: () =>
+    createRoute([retainingFunnelPrefix, "cancellation-of-subscription"]),
+  retainingFunnelPlanCancelled: () =>
+    createRoute([retainingFunnelPrefix, "plan-cancelled"]),
+  retainingFunnelSubscriptionStopped: () =>
+    createRoute([retainingFunnelPrefix, "subscription-stopped"]),
+
+  // Payment
+  payment: () => createRoute(["payment"]),
+  paymentSuccess: () => createRoute(["payment", "success"]),
+  paymentFailed: () => createRoute(["payment", "failed"]),
+};
diff --git a/src/shared/constants/currency.ts b/src/shared/constants/currency.ts
index 1c8cc2c..f280943 100644
--- a/src/shared/constants/currency.ts
+++ b/src/shared/constants/currency.ts
@@ -1,8 +1,8 @@
 import { Currency } from "@/types";
 
 export const symbolByCurrency: Record<string, string> = {
-    [Currency.USD]: "$",
-    [Currency.EUR]: "€",
-    [Currency.USD.toLowerCase()]: "$",
-    [Currency.EUR.toLowerCase()]: "€"
-}
\ No newline at end of file
+  [Currency.USD]: "$",
+  [Currency.EUR]: "€",
+  [Currency.USD.toLowerCase()]: "$",
+  [Currency.EUR.toLowerCase()]: "€",
+};
diff --git a/src/shared/constants/images/retaining.ts b/src/shared/constants/images/retaining.ts
index 6da469c..a1a2d7b 100644
--- a/src/shared/constants/images/retaining.ts
+++ b/src/shared/constants/images/retaining.ts
@@ -1 +1 @@
-export const retainingImages = (path: string) => (`/retaining/${path}`)
\ No newline at end of file
+export const retainingImages = (path: string) => `/retaining/${path}`;
diff --git a/src/shared/constants/lottie.ts b/src/shared/constants/lottie.ts
index fe88e44..0ba5723 100644
--- a/src/shared/constants/lottie.ts
+++ b/src/shared/constants/lottie.ts
@@ -1,55 +1,77 @@
-
-
 export enum ELottieKeys {
-    goal = "goal",
-    magnifyingGlassAndPlanet = "magnifyingGlassAndPlanet",
-    scalesNeutral = "scalesNeutral",
-    scalesHead = "scalesHead",
-    scalesHeart = "scalesHeart",
-    compass = "compass",
-    handWithStars = "handWithStars",
-    key = "key",
-    cloudAndStars = "cloudAndStars",
-    darts = "darts",
-    umbrella = "umbrella",
-    hourglass = "hourglass",
-    lightBulb = "lightBulb",
-    sun = "sun",
-    handSymbols = "handSymbols",
-    scalesNeutralPalmistry = "scalesNeutralPalmistry",
-    scalesHeadPalmistry = "scalesHeadPalmistry",
-    scalesHeartPalmistry = "scalesHeartPalmistry",
-    letScan = "letScan",
-    letScanDark = "letScanDark",
-    scannedPhoto = "scannedPhoto",
-    loaderCheckMark = "loaderCheckMark",
-    loaderCheckMark2 = "loaderCheckMark2",
-    confetti = "confetti",
+  goal = "goal",
+  magnifyingGlassAndPlanet = "magnifyingGlassAndPlanet",
+  scalesNeutral = "scalesNeutral",
+  scalesHead = "scalesHead",
+  scalesHeart = "scalesHeart",
+  compass = "compass",
+  handWithStars = "handWithStars",
+  key = "key",
+  cloudAndStars = "cloudAndStars",
+  darts = "darts",
+  umbrella = "umbrella",
+  hourglass = "hourglass",
+  lightBulb = "lightBulb",
+  sun = "sun",
+  handSymbols = "handSymbols",
+  scalesNeutralPalmistry = "scalesNeutralPalmistry",
+  scalesHeadPalmistry = "scalesHeadPalmistry",
+  scalesHeartPalmistry = "scalesHeartPalmistry",
+  letScan = "letScan",
+  letScanDark = "letScanDark",
+  scannedPhoto = "scannedPhoto",
+  loaderCheckMark = "loaderCheckMark",
+  loaderCheckMark2 = "loaderCheckMark2",
+  confetti = "confetti",
 }
 
 export const lottieUrls = {
-    [ELottieKeys.goal]: "https://lottie.host/a86e1531-7028-4688-a836-ea9d71dafa3b/Pe5G1g9s9L.lottie",
-    [ELottieKeys.magnifyingGlassAndPlanet]: "https://lottie.host/beaa1dc6-cd60-4bbe-a222-c039b04c630f/ZktoTHROIW.lottie",
-    [ELottieKeys.scalesNeutral]: "https://lottie.host/ddd2cb46-d62f-4808-a10d-1dd5ce8d42d2/6hgUBBGjaJ.lottie",
-    [ELottieKeys.scalesHead]: "https://lottie.host/19fe41d7-d26f-431c-b063-8e123ce3d57a/HiucMMidQT.lottie",
-    [ELottieKeys.scalesHeart]: "https://lottie.host/9eb3f7a1-83c2-495a-9342-c234bfebc40c/0T90l2xSWl.lottie",
-    [ELottieKeys.compass]: "https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie",
-    [ELottieKeys.handWithStars]: "https://lottie.host/25105d46-cc0a-4f76-9ad0-5e64e3eb0e52/OenfEsMruV.lottie",
-    [ELottieKeys.key]: "https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie",
-    [ELottieKeys.cloudAndStars]: "https://lottie.host/6010e02c-da90-4089-982c-177f3b5dbc05/fXkYv6hGPc.lottie",
-    [ELottieKeys.darts]: "https://lottie.host/c3856d09-bfe9-44de-8712-f935f5deed67/rtD0j4YfnN.lottie",
-    [ELottieKeys.umbrella]: "https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie",
-    [ELottieKeys.hourglass]: "https://lottie.host/c1b52c33-1a3c-4759-9c5d-090ed2a62c77/IqHW4RCqVH.lottie",
-    [ELottieKeys.lightBulb]: "https://lottie.host/07e33753-d13c-4469-ad33-26e57017b0ec/qMVfYwwLqs.lottie",
-    [ELottieKeys.sun]: "https://lottie.host/8ae9682d-93d3-4988-8745-e7134daed217/lZG1RZgqaP.lottie",
-    [ELottieKeys.handSymbols]: "https://lottie.host/ae56bb19-96e6-4147-ac94-6c9a5a24bd9d/bDBUSdzN5e.lottie",
-    [ELottieKeys.scalesNeutralPalmistry]: "https://lottie.host/9027e5a7-d5e8-4e60-b097-ba4bf099b433/UsCKDjKVUr.lottie",
-    [ELottieKeys.scalesHeadPalmistry]: "https://lottie.host/d16336c4-2622-48f8-b361-8d9d50b3c8a6/wWSM7JMCHu.lottie",
-    [ELottieKeys.scalesHeartPalmistry]: "https://lottie.host/fa931c2d-07f5-4c57-a4bb-8302b411ecca/zy9ag3MyMe.lottie",
-    [ELottieKeys.letScan]: 'https://lottie.host/77c3c34b-4c1e-4cab-87f4-40d7534fea3d/wMg1wqtSS6.lottie',//"https://lottie.host/f87184ec-aa5e-4cf4-82a5-9ab5e60c22d5/qpgweCSCtn.lottie",
-    [ELottieKeys.letScanDark]: 'https://lottie.host/71623941-9182-4d58-8a1d-cb05cc5732ad/fEXKgPZQYq.lottie',//"https://lottie.host/c890243e-c61a-4e76-8b93-e8d24b25dd97/leetT4srXt.lottie",
-    [ELottieKeys.scannedPhoto]: "https://lottie.host/0570b1a3-2441-486e-909b-bc2a6ceb692b/KAHTUVUb8C.lottie",
-    [ELottieKeys.loaderCheckMark]: "https://lottie.host/c29ba802-17b4-4ddb-a733-5385b91394f2/qnFaLSA5p3.lottie",
-    [ELottieKeys.loaderCheckMark2]: "https://lottie.host/6e249251-0469-43b2-9582-822e8f701ce2/sjRwaq20Dr.lottie",
-    [ELottieKeys.confetti]: "https://lottie.host/ee592a75-4a56-4d3b-b671-b0695715a021/NYbdrg8EEb.lottie",
-}
\ No newline at end of file
+  [ELottieKeys.goal]:
+    "https://lottie.host/a86e1531-7028-4688-a836-ea9d71dafa3b/Pe5G1g9s9L.lottie",
+  [ELottieKeys.magnifyingGlassAndPlanet]:
+    "https://lottie.host/beaa1dc6-cd60-4bbe-a222-c039b04c630f/ZktoTHROIW.lottie",
+  [ELottieKeys.scalesNeutral]:
+    "https://lottie.host/ddd2cb46-d62f-4808-a10d-1dd5ce8d42d2/6hgUBBGjaJ.lottie",
+  [ELottieKeys.scalesHead]:
+    "https://lottie.host/19fe41d7-d26f-431c-b063-8e123ce3d57a/HiucMMidQT.lottie",
+  [ELottieKeys.scalesHeart]:
+    "https://lottie.host/9eb3f7a1-83c2-495a-9342-c234bfebc40c/0T90l2xSWl.lottie",
+  [ELottieKeys.compass]:
+    "https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie",
+  [ELottieKeys.handWithStars]:
+    "https://lottie.host/25105d46-cc0a-4f76-9ad0-5e64e3eb0e52/OenfEsMruV.lottie",
+  [ELottieKeys.key]:
+    "https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie",
+  [ELottieKeys.cloudAndStars]:
+    "https://lottie.host/6010e02c-da90-4089-982c-177f3b5dbc05/fXkYv6hGPc.lottie",
+  [ELottieKeys.darts]:
+    "https://lottie.host/c3856d09-bfe9-44de-8712-f935f5deed67/rtD0j4YfnN.lottie",
+  [ELottieKeys.umbrella]:
+    "https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie",
+  [ELottieKeys.hourglass]:
+    "https://lottie.host/c1b52c33-1a3c-4759-9c5d-090ed2a62c77/IqHW4RCqVH.lottie",
+  [ELottieKeys.lightBulb]:
+    "https://lottie.host/07e33753-d13c-4469-ad33-26e57017b0ec/qMVfYwwLqs.lottie",
+  [ELottieKeys.sun]:
+    "https://lottie.host/8ae9682d-93d3-4988-8745-e7134daed217/lZG1RZgqaP.lottie",
+  [ELottieKeys.handSymbols]:
+    "https://lottie.host/ae56bb19-96e6-4147-ac94-6c9a5a24bd9d/bDBUSdzN5e.lottie",
+  [ELottieKeys.scalesNeutralPalmistry]:
+    "https://lottie.host/9027e5a7-d5e8-4e60-b097-ba4bf099b433/UsCKDjKVUr.lottie",
+  [ELottieKeys.scalesHeadPalmistry]:
+    "https://lottie.host/d16336c4-2622-48f8-b361-8d9d50b3c8a6/wWSM7JMCHu.lottie",
+  [ELottieKeys.scalesHeartPalmistry]:
+    "https://lottie.host/fa931c2d-07f5-4c57-a4bb-8302b411ecca/zy9ag3MyMe.lottie",
+  [ELottieKeys.letScan]:
+    "https://lottie.host/77c3c34b-4c1e-4cab-87f4-40d7534fea3d/wMg1wqtSS6.lottie", //"https://lottie.host/f87184ec-aa5e-4cf4-82a5-9ab5e60c22d5/qpgweCSCtn.lottie",
+  [ELottieKeys.letScanDark]:
+    "https://lottie.host/71623941-9182-4d58-8a1d-cb05cc5732ad/fEXKgPZQYq.lottie", //"https://lottie.host/c890243e-c61a-4e76-8b93-e8d24b25dd97/leetT4srXt.lottie",
+  [ELottieKeys.scannedPhoto]:
+    "https://lottie.host/0570b1a3-2441-486e-909b-bc2a6ceb692b/KAHTUVUb8C.lottie",
+  [ELottieKeys.loaderCheckMark]:
+    "https://lottie.host/c29ba802-17b4-4ddb-a733-5385b91394f2/qnFaLSA5p3.lottie",
+  [ELottieKeys.loaderCheckMark2]:
+    "https://lottie.host/6e249251-0469-43b2-9582-822e8f701ce2/sjRwaq20Dr.lottie",
+  [ELottieKeys.confetti]:
+    "https://lottie.host/ee592a75-4a56-4d3b-b671-b0695715a021/NYbdrg8EEb.lottie",
+};
diff --git a/src/shared/utils/date.ts b/src/shared/utils/date.ts
index 117dba5..c183f94 100644
--- a/src/shared/utils/date.ts
+++ b/src/shared/utils/date.ts
@@ -1,4 +1,8 @@
 export const formatDate = (date: string | null) => {
-    if (!date) return null;
-    return new Date(date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
-};
\ No newline at end of file
+  if (!date) return null;
+  return new Date(date).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};
diff --git a/src/shared/utils/delay.ts b/src/shared/utils/delay.ts
index b287962..112dd12 100644
--- a/src/shared/utils/delay.ts
+++ b/src/shared/utils/delay.ts
@@ -1,2 +1 @@
-export const delay = (ms: number) =>
-    new Promise<void>((r) => setTimeout(r, ms));
\ No newline at end of file
+export const delay = (ms: number) => new Promise<void>(r => setTimeout(r, ms));
diff --git a/src/shared/utils/price.ts b/src/shared/utils/price.ts
index 62cf9e8..b5e5ee5 100644
--- a/src/shared/utils/price.ts
+++ b/src/shared/utils/price.ts
@@ -3,13 +3,17 @@ import { Currency } from "@/types";
 import { symbolByCurrency } from "../constants/currency";
 
 const addCurrency = (price: number | string, currency: Currency) => {
-    const symbol = symbolByCurrency[currency]
-    if ([Currency.EUR].includes(currency)) {
-        return `${price} ${symbol}`
-    }
-    return `${symbol}${price}`
-}
+  const symbol = symbolByCurrency[currency];
+  if ([Currency.EUR].includes(currency)) {
+    return `${price} ${symbol}`;
+  }
+  return `${symbol}${price}`;
+};
 
-export const getFormattedPrice = (price: number, currency: Currency, precision: number = 2) => {
-    return addCurrency((price / 100).toFixed(precision), currency);
-};
\ No newline at end of file
+export const getFormattedPrice = (
+  price: number,
+  currency: Currency,
+  precision = 2
+) => {
+  return addCurrency((price / 100).toFixed(precision), currency);
+};
diff --git a/src/stores/retainingStore.ts b/src/stores/retainingStore.ts
new file mode 100644
index 0000000..82b3343
--- /dev/null
+++ b/src/stores/retainingStore.ts
@@ -0,0 +1,70 @@
+"use client";
+
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+import { UserSubscription } from "@/entities/subscriptions/types";
+
+export enum ERetainingFunnel {
+  Red = "red",
+  Green = "green",
+  Purple = "purple",
+  Stay50 = "stay50",
+}
+
+interface RetainingState {
+  funnel: ERetainingFunnel;
+  cancellingSubscription: UserSubscription | null;
+
+  setFunnel: (funnel: ERetainingFunnel) => void;
+  setCancellingSubscription: (cancellingSubscription: UserSubscription) => void;
+  setRetainingData: (data: {
+    funnel: ERetainingFunnel;
+    cancellingSubscription: UserSubscription;
+  }) => void;
+  clearRetainingData: () => void;
+}
+
+const initialState = {
+  funnel: ERetainingFunnel.Red,
+  cancellingSubscription: null,
+};
+
+export const useRetainingStore = create<RetainingState>()(
+  persist(
+    set => ({
+      ...initialState,
+
+      setFunnel: (funnel: ERetainingFunnel) => set({ funnel }),
+
+      setCancellingSubscription: (cancellingSubscription: UserSubscription) =>
+        set({ cancellingSubscription }),
+
+      setRetainingData: (data: {
+        funnel: ERetainingFunnel;
+        cancellingSubscription: UserSubscription;
+      }) => set(data),
+
+      clearRetainingData: () => set(initialState),
+    }),
+    {
+      name: "retaining-storage",
+      // partialize: (state) => ({
+      //     funnel: state.funnel,
+      //     cancellingSubscription: state.cancellingSubscription,
+      // }),
+    }
+  )
+);
+
+export const useRetainingFunnel = () =>
+  useRetainingStore(state => state.funnel);
+export const useCancellingSubscriptionId = () =>
+  useRetainingStore(state => state.cancellingSubscription);
+export const useRetainingActions = () =>
+  useRetainingStore(state => ({
+    setFunnel: state.setFunnel,
+    setCancellingSubscription: state.setCancellingSubscription,
+    setRetainingData: state.setRetainingData,
+    clearRetainingData: state.clearRetainingData,
+  }));
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d5ca90f..2f7c840 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,5 +1,5 @@
 :root {
-  --background: #F7F7F7;
+  --background: #f7f7f7;
   --foreground: #333333;
 }
 
@@ -14,8 +14,18 @@ html,
 body {
   max-width: 100vw;
   /* overflow-x: hidden; */
-  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    var(--font-inter),
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
 }
 
 body {
@@ -47,4 +57,4 @@ button {
   html {
     color-scheme: dark;
   }
-} */
\ No newline at end of file
+} */
diff --git a/src/styles/reset.css b/src/styles/reset.css
index 4c2a92f..42c3a35 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -1,14 +1,14 @@
 /* Reset and base styles  */
 * {
-    padding: 0px;
-    margin: 0px;
-    border: none;
+  padding: 0px;
+  margin: 0px;
+  border: none;
 }
 
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* Links */
@@ -16,11 +16,11 @@
 a,
 a:link,
 a:visited {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 /* Common */
@@ -31,7 +31,7 @@ footer,
 header,
 section,
 main {
-    display: block;
+  display: block;
 }
 
 h1,
@@ -41,27 +41,27 @@ h4,
 h5,
 h6,
 p {
-    font-size: inherit;
-    font-weight: inherit;
+  font-size: inherit;
+  font-weight: inherit;
 }
 
 ul,
 ul li {
-    list-style: none;
+  list-style: none;
 }
 
 img {
-    vertical-align: top;
+  vertical-align: top;
 }
 
 img,
 svg {
-    max-width: 100%;
-    height: auto;
+  max-width: 100%;
+  height: auto;
 }
 
 address {
-    font-style: normal;
+  font-style: normal;
 }
 
 /* Form */
@@ -70,45 +70,45 @@ input,
 textarea,
 button,
 select {
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent;
 }
 
 input::-ms-clear {
-    display: none;
+  display: none;
 }
 
 button,
 input[type="submit"] {
-    display: inline-block;
-    box-shadow: none;
-    background-color: transparent;
-    background: none;
-    cursor: pointer;
+  display: inline-block;
+  box-shadow: none;
+  background-color: transparent;
+  background: none;
+  cursor: pointer;
 }
 
 input:focus,
 input:active,
 button:focus,
 button:active {
-    outline: none;
+  outline: none;
 }
 
 button::-moz-focus-inner {
-    padding: 0;
-    border: 0;
+  padding: 0;
+  border: 0;
 }
 
 label {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 legend {
-    display: block;
+  display: block;
 }
 
-input[type='file'] {
-    max-width: 100%;
-}
\ No newline at end of file
+input[type="file"] {
+  max-width: 100%;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index ec37068..7bb7713 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,40 +1,62 @@
+import { z } from "zod";
+
 export interface FormField<T> {
-    name: string;
-    value: T;
-    label?: string | null;
-    placeholder?: string | null;
-    inputClassName?: string;
-    onValid: (value: string) => void;
-    onInvalid: () => void;
+  name: string;
+  value: T;
+  label?: string | null;
+  placeholder?: string | null;
+  inputClassName?: string;
+  onValid: (value: string) => void;
+  onInvalid: () => void;
 }
 
 export enum Currency {
-    USD = 'USD',
-    EUR = 'EUR',
-    usd = 'usd',
-    eur = 'eur',
+  USD = "USD",
+  EUR = "EUR",
+  usd = "usd",
+  eur = "eur",
 }
 
 export enum ERetainingFunnel {
-    Red = "red",
-    Green = "green",
-    Purple = "purple",
-    Stay50 = "stay50",
+  Red = "red",
+  Green = "green",
+  Purple = "purple",
+  Stay50 = "stay50",
 }
 
 declare global {
-    interface Window {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ym: any;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ymab: any;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        klaviyo: any;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        fbq: any;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        CollectJS: any;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        gtag: any;
-    }
-}
\ No newline at end of file
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ym: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ymab: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    klaviyo: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fbq: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    CollectJS: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag: any;
+  }
+}
+
+/* ---------- ActionField ---------- */
+export const ActionFieldSchema = z.object({
+  _id: z.string(),
+  actionId: z.string(),
+  key: z.string(),
+  title: z.string(),
+  inputType: z.string(), // text | date | time …
+  model: z.string().optional(), // присутствует не всегда
+  property: z.string().optional(),
+  createdAt: z.string(), // ISO-строка даты
+  updatedAt: z.string(),
+  value: z.union([z.string(), z.number(), z.null()]).optional(), // может быть строкой, числом или null
+});
+export type ActionField = z.infer<typeof ActionFieldSchema>;
+
+export type ActionResponse<T> = {
+  data: T | null;
+  error: string | null;
+};