diff --git a/package.json b/package.json
index b2303b5..d8a5797 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,13 @@
   },
   "dependencies": {
     "framer-motion": "^11.3.31",
+    "intl-tel-input": "^24.3.6",
     "ky": "^1.7.1",
+    "libphonenumber-js": "^1.11.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-input-mask": "^2.0.4",
+    "react-phone-number-input": "^3.4.5",
     "react-router-dom": "^6.26.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
@@ -25,6 +28,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-input-mask": "^3.0.5",
+    "@types/react-phone-number-input": "^3.1.37",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
diff --git a/src/assets/promotion/Ellipse.png b/src/assets/promotion/Ellipse.png
new file mode 100644
index 0000000..44753bb
Binary files /dev/null and b/src/assets/promotion/Ellipse.png differ
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 1f66308..ed971a0 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -1,19 +1,26 @@
+import examples from 'libphonenumber-js/mobile/examples';
+import {
+  formatPhoneNumber,
+  getCountries,
+  getCountryCallingCode,
+} from 'react-phone-number-input';
 import ReactInputMask from 'react-input-mask';
 import { FormEvent, useEffect, useRef, useState } from 'react';
 import { Title } from './ui/Title';
 import { api } from '../api';
-import { PhoneCode } from '../types/PhoneCode';
 import { Button } from './ui/Button';
 import { ClassNameWrapper } from '../hocs/ClassNameWrapper';
 import { LoaderIcon } from './icons/LoaderIcon';
 import { ChevronUpIcon } from './icons/ChevronUpIcon';
 import { ChevronDownIcon } from './icons/ChevronDownIcon';
-import { phoneCodes } from '../consts/phoneCodes';
 import { ArrowRightIcon } from './icons/ArrowRightIcon';
+import { CountryCode, getExampleNumber } from 'libphonenumber-js';
 
 export function Form() {
   const [name, setName] = useState('');
-  const [phoneCode, setPhoneCode] = useState<PhoneCode>('+7');
+  const [[phoneCode, country], setPhoneCodeAndCountry] = useState<
+    [string, string]
+  >(['', '']);
   const [phone, setPhone] = useState('');
   const [email, setEmail] = useState('');
   const [description, setDescription] = useState('');
@@ -116,17 +123,20 @@ export function Form() {
                 <div className="flex gap-x-3 py-4 border-[#3D425C] relative">
                   <SelectPhoneCode
                     currentPhoneCode={phoneCode}
-                    onClick={setPhoneCode}
+                    onClick={setPhoneCodeAndCountry}
                   />
                   <div className="border-l border-[#3D425C]" />
                   <ReactInputMask
                     required
                     type="tel"
                     id="tel"
-                    mask={'(999) 99 999 99'}
+                    mask={
+                      getExampleNumber(country as CountryCode, examples)
+                        ?.formatNational
+                    }
                     maskChar={null}
                     value={phone}
-                    placeholder="(900) 000 00 00"
+                    placeholder={formatPhoneNumber(examples[country] as string)}
                     onChange={e => setPhone(e.target.value)}
                     className="bg-transparent rounded-none outline-none transition-all w-full placeholder:h4 placeholder:font-medium placeholder:select-none peer"
                   />
@@ -154,7 +164,7 @@ export function Form() {
             </div>
           </div>
 
-          <div className="space-y-4 max-w-[23vw]">
+          <div className="space-y-4 max-w-[25vw]">
             <Button
               width="full"
               disabled={isLoading}
@@ -186,7 +196,7 @@ export function Form() {
             </p>
           </div>
         </form>
-        <div className="absolute bottom-0 -right-[min(136px,calc(136/1600*100vw))] animate-[spin_5s_linear_infinite]">
+        <div className="absolute bottom-0 -right-[min(136px,calc(136/1600*100vw))] animate-[spin_10s_linear_infinite]">
           <div className="relative w-[calc(512/1600*100vw)] aspect-square flex justify-center transition-all duration-700 hover:w-[calc(446/1600*100vw)] origin-center">
             <div className="w-[calc(116/1600*100vw)] flex flex-col justify-between h-full absolute">
               <img src="/src/assets/form/1_1.png" alt="" />
@@ -239,11 +249,15 @@ function SelectPhoneCode({
   currentPhoneCode,
   onClick,
 }: {
-  currentPhoneCode: PhoneCode;
-  onClick: (phoneCode: PhoneCode) => void;
+  currentPhoneCode: string;
+  onClick: ([phoneCode, country]: [string, string]) => void;
 }) {
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    console.log(getCountries().map(country => getCountryCallingCode(country)));
+  }, []);
+
   return (
     <div className="relative flex flex-col">
       <button
@@ -258,14 +272,15 @@ function SelectPhoneCode({
       </button>
       {open && (
         <div className="absolute z-10 bg-[#14161F] top-[100%] w-[calc(100%+4px)] -left-1 border border-t-0 p-1 rounded-b-lg border-[#3D425C]">
-          {phoneCodes
-            .filter(phonecode => phonecode !== currentPhoneCode)
-            .map(phoneCode => (
+          {getCountries()
+            .map(country => [getCountryCallingCode(country), country])
+            .filter(([phonecode]) => phonecode !== currentPhoneCode)
+            .map(([phoneCode, country]) => (
               <p
                 key={phoneCode}
                 className="h4 cursor-pointer hover:bg-[#3D425C] py-1"
                 onClick={() => {
-                  onClick(phoneCode);
+                  onClick([phoneCode, country]);
                   setOpen(false);
                 }}
               >
diff --git a/src/components/InfoCollecting.tsx b/src/components/InfoCollecting.tsx
index 779dac8..4e49b2f 100644
--- a/src/components/InfoCollecting.tsx
+++ b/src/components/InfoCollecting.tsx
@@ -7,6 +7,7 @@ export function InfoCollecting() {
         <span className="text-gradient">Собираем информацию</span>
         <br /> о поведении пользователей
       </Title>
+      <div className="flex"></div>
     </div>
   );
 }
diff --git a/src/components/Promotion.tsx b/src/components/Promotion.tsx
index e44fef8..4300af6 100644
--- a/src/components/Promotion.tsx
+++ b/src/components/Promotion.tsx
@@ -40,7 +40,7 @@ function Feature({
   return (
     <div
       ref={ref}
-      className="p-7 border-t border-x border-[#3D425C] last:border-b group"
+      className="p-7 border-t border-x border-[#3D425C] last:border-b group hover:bg-[url(/src/assets/promotion/Ellipse.png)] bg-no-repeat bg-center bg-cover"
     >
       <motion.div
         className="flex justify-between gap-x-4 [clip-path:polygon(0%_0%,100%_0%,100%_calc(100%+28px),0%_calc(100%+28px))]"
diff --git a/yarn.lock b/yarn.lock
index 0977e4c..0a8313d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -569,6 +569,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-phone-number-input@^3.1.37":
+  version "3.1.37"
+  resolved "https://registry.yarnpkg.com/@types/react-phone-number-input/-/react-phone-number-input-3.1.37.tgz#7781cbb31d693da99eff4dbfad5635021477cb77"
+  integrity sha512-N5/4VjptmOJWs4g5keMxjAuc8yQFr0fM+OSYfT8h0IQVm5kUiLAGNg+TGHy21Xzb1DB/PhDkiWnKcIREgr5VWA==
+  dependencies:
+    react-phone-number-input "*"
+
 "@types/react@*", "@types/react@^18.3.3":
   version "18.3.4"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz"
@@ -842,6 +849,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -881,6 +893,11 @@ convert-source-map@^2.0.0:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+country-flag-icons@^1.5.11:
+  version "1.5.13"
+  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.13.tgz#963596b7fca6602b4b389a4e7b711ef3f33cc0b1"
+  integrity sha512-4JwHNqaKZ19doQoNcBjsoYA+I7NqCH/mC/6f5cBWvdKzcK5TMmzLpq3Z/syVHMHJuDGFwJ+rPpGizvrqJybJow==
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1271,6 +1288,18 @@ imurmurhash@^0.1.4:
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
+input-format@^0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/input-format/-/input-format-0.3.10.tgz#e8a8855e2e89e3b1cd995333f6277c14865f0e35"
+  integrity sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==
+  dependencies:
+    prop-types "^15.8.1"
+
+intl-tel-input@^24.3.6:
+  version "24.3.6"
+  resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-24.3.6.tgz#e1deb7158888479041d72a1ab442730b9c59abc7"
+  integrity sha512-27kLHadPt9dSAqc5zR0VHxW2zOBThQ8ctrouVNcm3s+0otyKA3dsQFyuYRnlTV5Kux/PPv7RejQf1Fw32xwUcA==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -1395,6 +1424,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libphonenumber-js@^1.11.5, libphonenumber-js@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.11.7.tgz#efe4fcf816e1982925e9c800d0013b0ee99b8283"
+  integrity sha512-x2xON4/Qg2bRIS11KIN9yCNYUjhtiEjNyptjX0mX+pyKHecxuJVLIpfX1lq9ZD6CrC/rB+y4GBi18c6CEcUR+A==
+
 lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
@@ -1427,7 +1461,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1517,7 +1551,7 @@ normalize-range@^0.1.2:
   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
-object-assign@^4.0.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -1671,6 +1705,15 @@ prettier@^3.3.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
   integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -1697,6 +1740,22 @@ react-input-mask@^2.0.4:
     invariant "^2.2.4"
     warning "^4.0.2"
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-phone-number-input@*, react-phone-number-input@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.4.5.tgz#9ceeccca59283eda614f516ac6040524e88e4e01"
+  integrity sha512-IlLTG0F/2P+72drqGNiYaguV3KOD4EVxQWGJ7YSofbOb6vyCWWLJqQIQsFFNpfrMrXzYtB3G+aHL9tprGfisFw==
+  dependencies:
+    classnames "^2.5.1"
+    country-flag-icons "^1.5.11"
+    input-format "^0.3.10"
+    libphonenumber-js "^1.11.5"
+    prop-types "^15.8.1"
+
 react-refresh@^0.14.2:
   version "0.14.2"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz"