diff --git a/Makefile b/Makefile
index 0c6ba6f9..7398d0cf 100644
--- a/Makefile
+++ b/Makefile
@@ -169,13 +169,13 @@ e-stage: build-e
 f-stage: build-f
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/f-wwwroot/
 
-g-stage: build-f
+g-stage: build-g
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/g-wwwroot/
 
-h-stage: build-f
+h-stage: build-h
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/h-wwwroot/
 
-i-stage: build-f
+i-stage: build-i
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/i-wwwroot/
 
 test:
diff --git a/src/features/UserAccount/components/PagePaymentsHistory/index.tsx b/src/features/UserAccount/components/PagePaymentsHistory/index.tsx
index d97d0696..d4fb45fa 100644
--- a/src/features/UserAccount/components/PagePaymentsHistory/index.tsx
+++ b/src/features/UserAccount/components/PagePaymentsHistory/index.tsx
@@ -1,5 +1,7 @@
 import { T9n } from 'features/T9n'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import format from 'date-fns/format'
 
 import { usePaymentHistory } from './hooks'
@@ -12,6 +14,11 @@ import {
   TBody,
   TRow,
   Td,
+  ScPaymentDate,
+  ScFirstBlock,
+  ScSecondBlock,
+  ScPayment,
+  ScText,
 } from './styled'
 
 export const PagePaymentsHistory = () => {
@@ -21,42 +28,89 @@ export const PagePaymentsHistory = () => {
 
   return (
     <Wrapper>
-      <Table>
-        <THead>
-          <TRow>
-            <Th>
-              <T9n t='subscription_plan' />
-            </Th>
-            <Th>
-              <T9n t='sum' />
-            </Th>
-            <Th>
-              <T9n t='payment_date' />
-            </Th>
-            <Th>
-              <T9n t='payment_method' />
-            </Th>
-          </TRow>
-        </THead>
-        <TBody>
-          {payments.map(({
-            card,
-            currency,
-            id,
-            price,
-            sub_name,
-            sub_option,
-            ts_payment,
-          }: any) => (
-            <TRow key={id}>
-              <Td className='subscription'>{sub_option} — {sub_name}</Td>
-              <Td>{currency} {price}</Td>
-              <Td>{formattedDate(ts_payment)}</Td>
-              <Td>{card}</Td>
+      {isMobileDevice ? (
+        <>
+          {payments.map(
+            ({
+              card,
+              currency,
+              id,
+              price,
+              sub_name,
+              sub_option,
+              ts_payment,
+            }: any) => (
+              <ScPayment key={id}>
+                <ScFirstBlock>
+                  <Th>
+                    <T9n t='payment_date' />
+                    <ScPaymentDate>{formattedDate(ts_payment)}</ScPaymentDate>
+                  </Th>
+                  <Th>
+                    <T9n t='sum' />
+                    <ScPaymentDate>
+                      {currency} {price}
+                    </ScPaymentDate>
+                  </Th>
+                </ScFirstBlock>
+                <ScSecondBlock>
+                  <Th className='subscription'>
+                    <T9n t='subscription_plan' />
+                    <ScText>{sub_option} — {sub_name}</ScText>
+                  </Th>
+                  <Th>
+                    <T9n t='payment_method' />
+                    <ScText>{card}</ScText>
+                  </Th>
+                </ScSecondBlock>
+              </ScPayment>
+            ),
+          )}
+        </>
+      ) : (
+        <Table>
+          <THead>
+            <TRow>
+              <Th>
+                <T9n t='subscription_plan' />
+              </Th>
+              <Th>
+                <T9n t='sum' />
+              </Th>
+              <Th>
+                <T9n t='payment_date' />
+              </Th>
+              <Th>
+                <T9n t='payment_method' />
+              </Th>
             </TRow>
-          ))}
-        </TBody>
-      </Table>
+          </THead>
+          <TBody>
+            {payments.map(
+              ({
+                card,
+                currency,
+                id,
+                price,
+                sub_name,
+                sub_option,
+                ts_payment,
+              }: any) => (
+                <TRow key={id}>
+                  <Td className='subscription'>
+                    {sub_option} — {sub_name}
+                  </Td>
+                  <Td>
+                    {currency} {price}
+                  </Td>
+                  <Td>{formattedDate(ts_payment)}</Td>
+                  <Td>{card}</Td>
+                </TRow>
+              ),
+            )}
+          </TBody>
+        </Table>
+      )}
     </Wrapper>
   )
 }
diff --git a/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx b/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx
index 40b9f6d3..1b30bb31 100644
--- a/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx
+++ b/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx
@@ -3,17 +3,24 @@ import styled, { css } from 'styled-components/macro'
 import { devices } from 'config'
 import { isMobileDevice } from 'config/userAgent'
 
+import { customScrollbar } from 'features/Common/customScrollbar'
+
 export const Wrapper = styled.div`
-  margin-top: 26px;
+  overflow-y: auto;
+  max-height: 70vh;
+
+  ${customScrollbar}
+
   ${isMobileDevice
     ? css`
       @media (orientation: landscape){
         margin-top: 0;
+        max-height: 100%;
+
       }
     `
     : ''}
 
-    overflow-y: auto;
 `
 
 export const Table = styled.table``
@@ -21,7 +28,8 @@ export const Table = styled.table``
 export const THead = styled.thead``
 
 export const Th = styled.th`
-  padding: 0 20px;
+  /* padding-right: 20px; */
+  width: 250px;
   padding-bottom: 25px;
   font-weight: 500;
   font-size: 18px;
@@ -57,11 +65,10 @@ export const Th = styled.th`
   } */
   ${isMobileDevice
     ? css`
-      font-size: 12px;
-      vertical-align: baseline;
-      :not(:nth-child(1)){
-        padding-right: 5px;
-      }
+      font-size: 10px;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
     `
     : ''}
 `
@@ -70,12 +77,14 @@ export const TBody = styled.tbody``
 
 export const TRow = styled.tr`
   td.subscription {
+    width: 350px;
     text-transform: capitalize;
   }
 `
 
 export const Td = styled.td`
-  padding: 0 20px;
+  /* padding-right: 20px; */
+  width: 250px;
   padding-bottom: 20px;
   font-size: 18px;
   line-height: 22px;
@@ -97,3 +106,36 @@ export const Td = styled.td`
     `
     : ''}
 `
+
+export const ScPaymentDate = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: #FFFFFF;
+  `
+
+export const ScFirstBlock = styled.div`
+  display: flex;
+  flex-direction: row;
+  `
+
+export const ScSecondBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  .subscription {
+    width: 100%;
+    word-wrap: break-word;
+  }
+  `
+
+export const ScPayment = styled.div`
+  margin-bottom: 25px;
+  `
+
+export const ScText = styled.span`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: rgba(255, 255, 255, 0.6);
+  `