diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
index e223d77a08..96ced593e2 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@@ -146,7 +146,7 @@ class SectionHeaderContent extends React.Component {
       isBrandingAndCustomizationAvailable,
       isRestoreAndAutoBackupAvailable,
     } = this.props;
-    console.log("key", key);
+
     switch (key) {
       case "DNSSettings":
         return isBrandingAndCustomizationAvailable;
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
index 737b16a8d3..107a093cc5 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
@@ -25,14 +25,14 @@ const StyledBody = styled.div`
     margin-bottom: 20px;
   }
   .payment-benefits {
-    display: flex;
-    margin-bottom: 16px;
+    margin-bottom: 14px;
     align-items: flex-start;
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    grid-gap: 10px;
     p {
-      margin-left: 8px;
       margin-bottom: 0;
     }
-
     svg {
       path {
         //fill: red !important;
@@ -41,7 +41,7 @@ const StyledBody = styled.div`
   }
 `;
 
-const BenefitsContainer = ({ t, features }) => {
+const BenefitsContainer = ({ t, features, theme }) => {
   return (
     <StyledBody>
       <Text
@@ -53,11 +53,17 @@ const BenefitsContainer = ({ t, features }) => {
         {t("Benefits")}
       </Text>
       {features.map((item, index) => {
-        if (!item.title) return;
+        if (!item.title || !item.image) return;
         return (
           <div className="payment-benefits" key={index}>
             <div dangerouslySetInnerHTML={{ __html: item.image }} />
-            <Text noSelect>{item.title}</Text>
+            <Text
+              noSelect
+              fontWeight={"600"}
+              color={theme.client.settings.payment.benefitsTextColor}
+            >
+              {item.title}
+            </Text>
           </div>
         );
       })}
@@ -66,11 +72,12 @@ const BenefitsContainer = ({ t, features }) => {
 };
 
 export default inject(({ auth }) => {
-  const { paymentQuotasStore } = auth;
-
+  const { paymentQuotasStore, settingsStore } = auth;
+  const { theme } = settingsStore;
   const { portalPaymentQuotasFeatures } = paymentQuotasStore;
 
   return {
+    theme,
     features: portalPaymentQuotasFeatures,
   };
 })(observer(BenefitsContainer));
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js
index 026c821089..5cd7603d7e 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js
@@ -11,7 +11,7 @@ const StyledContactContainer = styled.div`
   display: flex;
   width: max-content;
   p {
-    margin-right: 8px;
+    margin-right: 4px;
   }
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/CurrentTariffContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/CurrentTariffContainer.js
index 7df69e018f..5d68ed30bf 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/CurrentTariffContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/CurrentTariffContainer.js
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { PortalFeaturesLimitations } from "@docspace/common/constants";
 import { getConvertedSize } from "@docspace/common/utils";
+import { mobile } from "@docspace/components/utils/device";
 
 const StyledCurrentTariffContainer = styled.div`
   display: flex;
@@ -12,13 +13,18 @@ const StyledCurrentTariffContainer = styled.div`
   background: ${(props) => props.theme.client.settings.payment.backgroundColor};
   margin-bottom: 24px;
   flex-wrap: wrap;
-  margin-top: 16px;
+  margin-top: 14px;
   padding: 12px 16px;
   box-sizing: border-box;
   padding-bottom: 0;
 
+  @media ${mobile} {
+    flex-direction: column;
+    margin-bottom: 27px;
+  }
+
   div {
-    padding-bottom: 12px;
+    padding-bottom: 8px;
     margin-right: 24px;
   }
 
@@ -27,7 +33,7 @@ const StyledCurrentTariffContainer = styled.div`
     color: ${(props) => props.theme.client.settings.payment.tariffText};
     .current-tariff_count {
       color: ${(props) => props.theme.client.settings.payment.tariffText};
-      margin-left: 5px;
+      margin-left: 4px;
     }
   }
 `;
@@ -58,9 +64,14 @@ const CurrentTariffContainer = ({ style, quotaCharacteristics }) => {
 
         return (
           <div key={index}>
-            <Text isBold noSelect>
+            <Text isBold noSelect fontSize={"14px"}>
               {item.used.title}
-              <Text className="current-tariff_count" as="span" isBold>
+              <Text
+                className="current-tariff_count"
+                as="span"
+                isBold
+                fontSize={"14px"}
+              >
                 {resultingUsedValue}
                 {resultingMaxValue ? `/${resultingMaxValue}` : ""}
               </Text>
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js
index be943fdf29..e66e0d58f5 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js
@@ -29,7 +29,7 @@ const StyledContainer = styled.div`
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: max-content max-content;
-    grid-gap: 6px;
+    grid-gap: 4px;
 
     .payer-info_description {
       display: flex;
@@ -124,7 +124,7 @@ const PayerInformationContainer = ({
   );
 
   const payerName = (
-    <Text fontWeight={600} noSelect>
+    <Text fontWeight={600} noSelect fontSize={"14px"}>
       {payerInfo ? (
         payerInfo.displayName
       ) : (
@@ -142,7 +142,11 @@ const PayerInformationContainer = ({
   return (
     <StyledContainer style={style} theme={theme}>
       <div className="payer-info_avatar">
-        <Avatar size={"min"} source={user.avatar} userName={user.displayName} />
+        <Avatar
+          size={"base"}
+          source={user.avatar}
+          userName={user.displayName}
+        />
       </div>
 
       <div className="payer-info_wrapper">
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js b/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
index b99c8d25bf..29159ef1ff 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
@@ -36,6 +36,7 @@ const StyledBody = styled.div`
     background: ${(props) =>
       props.theme.client.settings.payment.backgroundPrice};
     margin-top: 24px;
+    min-height: 38px;
     p:first-child {
       margin-right: 8px;
     }
@@ -125,6 +126,41 @@ const PriceCalculation = ({
 
   const color = isDisabled ? { color: theme.text.disableColor } : {};
 
+  const priceInfoPerManager = (
+    <div className="payment_price_user">
+      <Text
+        noSelect
+        fontSize={"13px"}
+        color={
+          isDisabled
+            ? theme.client.settings.payment.disabledPriceColor
+            : theme.client.settings.payment.priceColor
+        }
+        fontWeight={600}
+      >
+        <Trans t={t} i18nKey="PerUserMonth" ns="Payments">
+          ""
+          <Text
+            fontSize="16px"
+            isBold
+            as="span"
+            fontWeight={600}
+            color={
+              isDisabled
+                ? theme.client.settings.payment.disabledPriceColor
+                : theme.client.settings.payment.priceColor
+            }
+          >
+            {{ currencySymbol }}
+          </Text>
+          <Text fontSize="16px" isBold as="span" fontWeight={600}>
+            {{ price: priceManagerPerMonth }}
+          </Text>
+          per manager/month
+        </Trans>
+      </Text>
+    </div>
+  );
   return (
     <StyledBody>
       <Text
@@ -145,39 +181,8 @@ const PriceCalculation = ({
           isAlreadyPaid={isAlreadyPaid}
         />
       )}
-      <div className="payment_price_user">
-        <Text
-          noSelect
-          fontSize={"11px"}
-          color={
-            isDisabled
-              ? theme.client.settings.payment.disabledPriceColor
-              : theme.client.settings.payment.priceColor
-          }
-          fontWeight={600}
-        >
-          <Trans t={t} i18nKey="PerUserMonth" ns="Payments">
-            ""
-            <Text
-              fontSize="16px"
-              isBold
-              as="span"
-              fontWeight={600}
-              color={
-                isDisabled
-                  ? theme.client.settings.payment.disabledPriceColor
-                  : theme.client.settings.payment.priceColor
-              }
-            >
-              {{ currencySymbol }}
-            </Text>
-            <Text fontSize="16px" isBold as="span" fontWeight={600}>
-              {{ price: priceManagerPerMonth }}
-            </Text>
-            per manager/month
-          </Trans>
-        </Text>
-      </div>
+
+      {priceInfoPerManager}
 
       <TotalTariffContainer t={t} isDisabled={isDisabled} />
       <ButtonContainer
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/index.js b/packages/client/src/pages/PortalSettings/categories/payments/index.js
index 47c2b6b549..9f46f0f1d2 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/index.js
@@ -42,13 +42,13 @@ const StyledBody = styled.div`
   }
   .payment-info_wrapper {
     display: flex;
-    margin-bottom: 20px;
-    margin-top: 12px;
+    margin-bottom: 18px;
+    margin-top: 11px;
     div {
       margin: auto 0;
     }
     .payment-info_managers-price {
-      margin-right: 8px;
+      margin-right: 6px;
     }
   }
 `;
@@ -262,7 +262,7 @@ const PaymentsPage = ({
       {planSuggestion()}
 
       {isGracePeriod && (
-        <Text noSelect fontSize={"14px"}>
+        <Text noSelect fontSize={"14px"} lineHeight={"16px"}>
           <Trans t={t} i18nKey="GracePeriodActivatedDescription" ns="Payments">
             Grace period activated from <strong>{{ fromDate }}</strong> -
             <strong>{{ byDate }}</strong> (<strong>{{ delayDaysCount }}</strong>
@@ -275,6 +275,7 @@ const PaymentsPage = ({
         <Text
           noSelect
           fontSize={"14px"}
+          lineHeight={"16px"}
           className="payment-info_managers-price"
         >
           <Trans t={t} i18nKey="BusinessFinalDateInfo" ns="Payments">
@@ -287,7 +288,7 @@ const PaymentsPage = ({
         <Text
           noSelect
           fontWeight={600}
-          fontSize={"14"}
+          fontSize={"14px"}
           className="payment-info_managers-price"
         >
           <Trans t={t} i18nKey="StartPrice" ns="Payments">
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectTotalSizeContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectTotalSizeContainer.js
index b87c92e93f..b8ccd773e7 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectTotalSizeContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectTotalSizeContainer.js
@@ -11,7 +11,7 @@ import { inject, observer } from "mobx-react";
 import { getConvertedSize } from "@docspace/common/utils";
 const StyledBody = styled.div`
   .select-total-size_title {
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     margin-left: auto;
     margin-right: auto;
     width: max-content;
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
index 736ff1108f..188d1e8181 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
@@ -14,6 +14,10 @@ const StyledBody = styled.div`
   max-width: 272px;
   margin: 0 auto;
 
+  .payment-slider {
+    margin-top: 20px;
+  }
+
   @media ${smallTablet} {
     max-width: 520px;
   }
@@ -21,7 +25,8 @@ const StyledBody = styled.div`
   .slider-track {
     display: flex;
     position: relative;
-    margin-top: -10px;
+    margin-top: -8px;
+    margin-left: -3px;
     height: 16px;
 
     .slider-track-value_min,
@@ -41,12 +46,13 @@ const StyledBody = styled.div`
   }
 
   .payment-operations_input {
-    width: 111px;
+    width: 101px;
+    height: 60px;
     font-size: 44px;
     text-align: center;
     margin-left: 20px;
     margin-right: 20px;
-
+    padding: 0;
     ${(props) =>
       props.isDisabled &&
       css`
@@ -80,8 +86,8 @@ const StyledBody = styled.div`
       border: 1px solid
         ${(props) => props.theme.client.settings.payment.rectangleColor};
       border-radius: 50%;
-      width: 40px;
-      height: 40px;
+      width: 38px;
+      height: 38px;
       justify-content: center;
       -ms-align-items: center;
       align-items: center;
@@ -227,6 +233,10 @@ const SelectUsersCountContainer = ({
       </div>
 
       <Slider
+        thumbBorderWidth={"8px"}
+        thumbHeight={"32px"}
+        thumbWidth={"32px"}
+        runnableTrackHeight={"12px"}
         isDisabled={isDisabled || isUpdatingTariff}
         isReadOnly={isDisabled || isUpdatingTariff}
         type="range"
@@ -238,6 +248,7 @@ const SelectUsersCountContainer = ({
           isLessCountThanAcceptable ? minAvailableManagersValue : managersCount
         }
         {...onChangeSlideProp}
+        className="payment-slider"
       />
       <div className="slider-track">
         <Text className="slider-track-value_min" noSelect>
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
index 7ad6407460..ba22a914cf 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
@@ -28,10 +28,13 @@ const StyledBody = styled.div`
     .payment_price_description {
       margin-top: 16px;
     }
-
+    .total-tariff_description {
+      margin: auto;
+    }
     .payment_price_month-text {
       margin: auto 0;
-      margin-bottom: 13px;
+      margin-bottom: 9px;
+      margin-left: 8px;
     }
   }