diff --git a/src/config/lexics/payment.tsx b/src/config/lexics/payment.tsx
index 79f6124b..40921115 100644
--- a/src/config/lexics/payment.tsx
+++ b/src/config/lexics/payment.tsx
@@ -19,6 +19,8 @@ export const paymentLexics = {
   error_payment_unsuccessful: 14446,
   if_you_cancel: 18189,
   next_payment: 18183,
+  notify_by_email: 18366,
+  order_received: 18365,
   payment_date: 15603,
   payment_method: 2010,
   save_sub: 18190,
@@ -26,6 +28,7 @@ export const paymentLexics = {
   sub_not_renewed: 15060,
   subscription_plan: 18182,
   sum: 838,
+  thank_you: 6579,
   unsubscribe: 18188,
   using_payment: 18187,
   watch_match: 18199,
diff --git a/src/features/AddCardForm/components/Form/hooks/index.tsx b/src/features/AddCardForm/components/Form/hooks/index.tsx
index faa23af8..7de52d65 100644
--- a/src/features/AddCardForm/components/Form/hooks/index.tsx
+++ b/src/features/AddCardForm/components/Form/hooks/index.tsx
@@ -16,7 +16,7 @@ import {
   useElements,
 } from '@stripe/react-stripe-js'
 
-import { useRecoilValue } from 'recoil'
+import { useRecoilState } from 'recoil'
 
 import toUpper from 'lodash/toUpper'
 
@@ -85,7 +85,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
   const [inputStates, setInputStates] = useObjectState(initialState)
   const [errorMessage, setErrorMessage] = useState('')
   const [loader, setLoader] = useState(false)
-  const dataFormHighlights = useRecoilValue(dataForPayHighlights)
+  const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights)
 
 console.log('inputStates', inputStates)
 
@@ -183,8 +183,11 @@ console.log('inputStates', inputStates)
       setErrorMessage('')
       onePayment({
         cardId: defaultCard?.id,
-        item: { ...dataFormHighlights },
-      })
+        order: { ...dataHighlights.data },
+      }).then(() => setDataHighlights((prev) => ({
+        ...prev,
+        isOpenThanksPopup: true,
+      })))
       return
     }
 
diff --git a/src/libs/index.ts b/src/libs/index.ts
index 4bfcf4f7..2c3e7169 100644
--- a/src/libs/index.ts
+++ b/src/libs/index.ts
@@ -2,6 +2,7 @@ export { Arrow } from './objects/Arrow'
 export { Date } from './objects/Date'
 export { Edit } from './objects/Edit'
 export { Calendar } from './objects/Calendar'
+export { Check } from './objects/Check'
 export { Basketball } from './objects/Basketball'
 export { Football } from './objects/Football'
 export { Hockey } from './objects/Hockey'
diff --git a/src/libs/objects/Check.tsx b/src/libs/objects/Check.tsx
new file mode 100644
index 00000000..1b07d028
--- /dev/null
+++ b/src/libs/objects/Check.tsx
@@ -0,0 +1,56 @@
+export const Check = () => (
+  <svg
+    width='90'
+    height='90'
+    viewBox='0 0 90 90'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <g filter='url(#filter0_d_28368_255927)'>
+      <path
+        d='M1 44C1 19.6995 20.6995 0 45 0C69.3005 0 89 19.6995 89 44C89 68.3005 69.3005 88 45 88C20.6995 88 1 68.3005 1 44Z'
+        fill='white'
+      />
+      <path
+        d='M39.8572 51.8614L30.7836 42.7878C30.1142 42.1183 29.0288 42.1183 28.3593 42.7878C27.6898 43.4573 27.6898 44.5427 28.3593 45.2122L38.645 55.4979C39.3145 56.1674 40.3999 56.1674 41.0694 55.4979L61.6408 34.9265C62.3103 34.257 62.3103 33.1716 61.6408 32.5021C60.9713 31.8326 59.8859 31.8326 59.2164 32.5021L39.8572 51.8614Z'
+        fill='black'
+      />
+    </g>
+    <defs>
+      <filter
+        id='filter0_d_28368_255927'
+        x='0'
+        y='0'
+        width='90'
+        height='90'
+        filterUnits='userSpaceOnUse'
+        colorInterpolationFilters='sRGB'
+      >
+        <feFlood floodOpacity='0' result='BackgroundImageFix' />
+        <feColorMatrix
+          in='SourceAlpha'
+          type='matrix'
+          values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+          result='hardAlpha'
+        />
+        <feOffset dy='1' />
+        <feGaussianBlur stdDeviation='0.5' />
+        <feColorMatrix
+          type='matrix'
+          values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'
+        />
+        <feBlend
+          mode='normal'
+          in2='BackgroundImageFix'
+          result='effect1_dropShadow_28368_255927'
+        />
+        <feBlend
+          mode='normal'
+          in='SourceGraphic'
+          in2='effect1_dropShadow_28368_255927'
+          result='shape'
+        />
+      </filter>
+    </defs>
+  </svg>
+)
diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
index 577f635d..2a2aa07e 100644
--- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
@@ -220,12 +220,16 @@ export const useHighlightsForm = () => {
   useEffect(() => {
     if (formState?.selectedPlayer?.id) {
       setDatahighlights({
-        duration: Number(formState?.duration),
-        lang: 'en',
-        matches: playerMatches?.map((match) => match.id),
-        player_id: formState?.selectedPlayer?.id,
-        sport_id: formState?.sport.id,
-        stats: Boolean(formState?.stats?.id),
+        data: {
+          duration: Number(formState?.duration),
+          lang: 'en',
+          matches: playerMatches?.map((match) => match.id),
+          player_id: formState?.selectedPlayer?.id,
+          price: playerMatches?.length * 25,
+          sport_id: formState?.sport.id,
+          stats: Boolean(formState?.stats?.id),
+        },
+        isOpenThanksPopup: false,
       })
     }
   }, [formState, playerMatches])
diff --git a/src/pages/HighlightsPage/components/FormHighlights/index.tsx b/src/pages/HighlightsPage/components/FormHighlights/index.tsx
index 631246a2..25035e03 100644
--- a/src/pages/HighlightsPage/components/FormHighlights/index.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/index.tsx
@@ -3,6 +3,8 @@ import { Input } from 'features/Common'
 import { T9n } from 'features/T9n'
 import { Icon } from 'features/Icon'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import {
   useHighlightsForm,
 } from './hooks'
@@ -16,10 +18,12 @@ import {
   ScInfoBlock,
 } from './styled'
 
+import { PriceInfoType, PriceInfo } from '../PriceInfo'
+
 const labelWidth = 180
 const wrapperHeight = 50
 
-export const FormHighlights = () => {
+export const FormHighlights = ({ price }: PriceInfoType) => {
   const {
     formRef,
     formState: {
@@ -50,6 +54,7 @@ export const FormHighlights = () => {
 
   return (
     <ScWrapper>
+      {isMobileDevice ? <PriceInfo price={price} /> : null}
       <ScInfoBlock>
         <ScTitle>
           <T9n t='choose_player' />
diff --git a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx b/src/pages/HighlightsPage/components/FormHighlights/styled.tsx
index f919e127..2893a909 100644
--- a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/styled.tsx
@@ -8,6 +8,12 @@ export const ScWrapper = styled.div`
   flex-direction: column;
   color: #FFFFFF;
   padding: 0 80px 0 40px;
+
+  ${isMobileDevice
+    ? css`
+        padding: 5px;
+      `
+    : ''};
 `
 export const ScInfoBlock = styled.div`
   display: flex;
@@ -63,4 +69,10 @@ export const ScForm = styled.form`
         max-height: 200px;
       }
     }
+
+    ${isMobileDevice
+    ? css`
+        max-width: 100%;
+      `
+    : ''};
 `
diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
index aef37351..cec6dab2 100644
--- a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
+++ b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
@@ -3,6 +3,8 @@ import { Checkbox } from 'features/Common/Checkbox'
 import { ArrowLoader } from 'features/ArrowLoader'
 import { SportIcon } from 'features/SportIcon'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { useHighlighMatches } from './hooks'
 
 import {
@@ -22,13 +24,13 @@ import {
   ScLoaderWrapper,
 } from './styled'
 
-export const MatchesHighlights = ({ matches }: any) => {
+export const MatchesHighlights = () => {
   const { onChangeSelectedMatches, playerMatches } = useHighlighMatches()
 
   return (
     <ScMatchesWrapper>
       <ScTitle>
-        <T9n t='matches_highlight' />
+        <T9n t='matches_highlight' />{isMobileDevice ? ` (${playerMatches.length})` : ''}
       </ScTitle>
       <ScMatchesList>
         {playerMatches.length ? (playerMatches?.map(({
diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
index 2e6bfaad..eb3222e8 100644
--- a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
+++ b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
@@ -15,6 +15,12 @@ export const ScTitle = styled.span`
   font-size: 34px;
   line-height: 40px;
   margin-bottom: 75px;
+
+  ${isMobileDevice
+    ? css`
+      text-align: center;
+    `
+    : ''};
 `
 
 export const ScMatchesList = styled.div`
diff --git a/src/pages/HighlightsPage/components/PriceInfo/index.tsx b/src/pages/HighlightsPage/components/PriceInfo/index.tsx
index ce87a13d..72992660 100644
--- a/src/pages/HighlightsPage/components/PriceInfo/index.tsx
+++ b/src/pages/HighlightsPage/components/PriceInfo/index.tsx
@@ -8,7 +8,7 @@ import {
   ScWatchDemo,
 } from './styled'
 
-type PriceInfoType = {
+export type PriceInfoType = {
   price: number,
 }
 
diff --git a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
index 9aa77c08..8219861b 100644
--- a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
+++ b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
@@ -1,6 +1,8 @@
+import { isMobileDevice } from 'config/userAgent'
 import styled, { css } from 'styled-components/macro'
 
 export const ScPriceInfo = styled.div`
+  min-width: 106px;
   height: 186px;
   border: 1px solid #FFFFFF;
   border-radius: 34px;
@@ -18,19 +20,39 @@ export const ScPriceInfo = styled.div`
   > * {
     margin: 10px 0;
   }
+
+  ${isMobileDevice
+    ? css`
+        font-size: 10px;
+        padding: 5px;
+      `
+    : ''};
 `
 
 export const ScTitle = styled.span`
   text-align: center;
+  
 `
 
 export const ScPrice = styled.span`
   font-size: 80px;
   text-align: center;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 32px;
+      `
+    : ''};
 `
 
 export const ScCurrency = styled.span`
   font-size: 40px;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 16px;
+      `
+    : ''};
 `
 
 export const ScWatchDemo = styled.span`
diff --git a/src/pages/HighlightsPage/components/ThanksPopup/index.tsx b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx
new file mode 100644
index 00000000..dfbc152a
--- /dev/null
+++ b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx
@@ -0,0 +1,41 @@
+import { Icon } from 'features/Icon'
+import { T9n } from 'features/T9n'
+import { useState } from 'react'
+
+import { useRecoilState } from 'recoil'
+
+import {
+  ScModal,
+  ScHeader,
+  ScTitle,
+  ScText,
+  ScButton,
+} from './styled'
+
+import { dataForPayHighlights } from '../../storeHighlightsAtoms'
+
+export const ThanksPopup = () => {
+  const [isOpenThanksPopup, setIsOpenThanksPopup] = useState(true)
+  const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights)
+
+  return (
+    <ScModal
+      isOpen={dataHighlights.isOpenThanksPopup}
+      close={() => setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })}
+    >
+      <ScHeader>
+        <T9n t='thank_you' />
+      </ScHeader>
+      <Icon refIcon='Check' />
+      <ScTitle>
+        <T9n t='order_received' />
+      </ScTitle>
+      <ScText>
+        <T9n t='notify_by_email' />
+      </ScText>
+      <ScButton onClick={() => setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })}>
+        Ok
+      </ScButton>
+    </ScModal>
+  )
+}
diff --git a/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx
new file mode 100644
index 00000000..45721cdb
--- /dev/null
+++ b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx
@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components/macro'
+
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+import { ButtonSolid } from 'features/Common'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const ScModal = styled(BaseModal)`
+  background-color: rgba(0, 0, 0, 0.7);
+
+  ${ModalWindow} {
+    background-color: #333333;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 50px;
+    width: 497px;
+    height: 430px;
+
+    > * {
+      margin-bottom: 25px;
+    }
+
+    ${isMobileDevice
+    ? css`
+      width: calc(100vw - 60px);
+      @media screen and (orientation: landscape){
+        max-width: calc(100vw - 80px);
+        height: calc(100vh - 20px);
+        overflow: auto;
+      }
+    `
+    : ''};
+  }
+`
+
+export const ScHeader = styled.span`
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 24px;
+  text-align: center;
+`
+
+export const ScTitle = styled.span`
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 28px;
+  text-align: center;
+`
+
+export const ScText = styled.span`
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 28px;
+  text-align: center;
+`
+
+export const ScButton = styled(ButtonSolid)`
+  width: 194px;
+  height: 50px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 50px;
+`
diff --git a/src/pages/HighlightsPage/index.tsx b/src/pages/HighlightsPage/index.tsx
index 00210f7e..f0840c3a 100644
--- a/src/pages/HighlightsPage/index.tsx
+++ b/src/pages/HighlightsPage/index.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 
+import { isMobileDevice } from 'config/userAgent'
 import { PAGES } from 'config'
 
 import { useRecoilValue, useRecoilState } from 'recoil'
@@ -12,6 +13,7 @@ import { MultiSourcePlayer } from 'features/MultiSourcePlayer'
 import { PriceInfo } from './components/PriceInfo'
 import { FormHighlights } from './components/FormHighlights'
 import { MatchesHighlights } from './components/MatchesHighlights'
+import { ThanksPopup } from './components/ThanksPopup'
 
 import {
   playerMatchesState,
@@ -44,12 +46,12 @@ const HighlightsPage = () => {
         </Link>
       </ScHeader>
       <ScWrapperContent>
-        <PriceInfo price={countIsCheckedMatches * 25} />
-        <FormHighlights />
+        {isMobileDevice ? null : <PriceInfo price={countIsCheckedMatches * 25} />}
+        <FormHighlights price={countIsCheckedMatches * 25} />
         <MatchesHighlights />
       </ScWrapperContent>
       <ScButtonWrap onClick={() => setIsOpenPopupChangeCard(true)}>
-        <ScButton disabled={!!countIsCheckedMatches}>
+        <ScButton disabled={!countIsCheckedMatches}>
           <T9n t='order_and_buy' />
         </ScButton>
       </ScButtonWrap>
@@ -60,6 +62,7 @@ const HighlightsPage = () => {
         setChangeCardPopupOpen={setIsOpenPopupChangeCard}
         title='payment'
       />
+      <ThanksPopup />
     </ScWrapper>
 )
 }
diff --git a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx
index 238bfba7..78374610 100644
--- a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx
+++ b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx
@@ -6,12 +6,16 @@ export type PlayerMatchesType = Array<Match & {isChecked: boolean}
 >
 
 type DataForm = {
-  duration: number,
-  lang: string,
-  matches: Array<number>,
-  player_id: number,
-  sport_id: number,
-  stats: boolean,
+  data: {
+    duration: number,
+    lang: string,
+    matches: Array<number>,
+    player_id: number,
+    price: number,
+    sport_id: number,
+    stats: boolean,
+  },
+  isOpenThanksPopup: boolean,
 }
 
 export const playerMatchesState = atom({
diff --git a/src/pages/HighlightsPage/styled.tsx b/src/pages/HighlightsPage/styled.tsx
index 826d85b9..d2e869d2 100644
--- a/src/pages/HighlightsPage/styled.tsx
+++ b/src/pages/HighlightsPage/styled.tsx
@@ -3,6 +3,8 @@ import styled, { css } from 'styled-components/macro'
 import { Logo } from 'features/Logo'
 import { ButtonSolid } from 'features/Common/Button'
 
+import { isMobileDevice } from 'config/userAgent'
+
 export const ScHeader = styled.div`
   width: 100%;
   max-height: 95px;
@@ -25,6 +27,13 @@ export const ScWrapperContent = styled.div`
   display: flex;
   flex-direction: row;
   padding: 100px 170px 82px 170px;
+
+  ${isMobileDevice
+    ? css`
+        padding: 5px;
+        flex-direction: column;
+      `
+    : ''};
 `
 
 export const ScButton = styled(ButtonSolid)`
diff --git a/src/requests/onePayment.tsx b/src/requests/onePayment.tsx
index 1f5e1685..c1ac9ace 100644
--- a/src/requests/onePayment.tsx
+++ b/src/requests/onePayment.tsx
@@ -3,22 +3,32 @@ import { callApi } from 'helpers'
 
 export type Props = {
   cardId: string,
-  item: {
+  order: {
     duration: number,
     lang: string,
     matches: Array<number>,
     player_id: number,
+    price: number,
     sport_id: number,
     stats: boolean,
   },
 }
 
-export const onePayment = async ({ cardId, item }: Props) => {
+export const onePayment = async ({
+  cardId,
+  order,
+}: Props) => {
   const config = {
     body: {
       action: 'one_payment',
-      card_id: cardId,
-      item,
+      data: {
+        card_id: cardId,
+        item: {
+          currency_iso: 'USD',
+          order,
+          price: order.price,
+        },
+      },
       service: 'stripe_ott',
     },
   }