diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/StyledSecurity.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/StyledSecurity.js
index 34753804a1..73fb2514a7 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/StyledSecurity.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/StyledSecurity.js
@@ -84,6 +84,7 @@ export const ButtonsWrapper = styled.div`
   flex-direction: row;
   gap: 8px;
   align-items: center;
+  margin-top: 24px;
 
   @media (max-width: 375px) {
     position: absolute;
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js
index 20fe421bf9..59dad5d040 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js
@@ -4,7 +4,6 @@ import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Box from "@appserver/components/box";
-import Button from "@appserver/components/button";
 import Text from "@appserver/components/text";
 import Link from "@appserver/components/link";
 import Slider from "@appserver/components/slider";
@@ -12,9 +11,9 @@ import Checkbox from "@appserver/components/checkbox";
 import SectionLoader from "../sub-components/section-loader";
 import { getLanguage } from "@appserver/common/utils";
 import { isMobile } from "react-device-detect";
-import { ButtonsWrapper } from "../StyledSecurity";
 import { getPortalPasswordSettings } from "@appserver/common/api/settings";
 import toastr from "@appserver/components/toast/toastr";
+import Buttons from "../sub-components/buttons";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -34,7 +33,6 @@ const MainContainer = styled.div`
     flex-direction: column;
     gap: 8px;
     margin-top: 18px;
-    margin-bottom: 24px;
   }
 
   @media (max-width: 375px) {
@@ -202,33 +200,12 @@ const PasswordStrength = (props) => {
         />
       </Box>
 
-      <ButtonsWrapper>
-        <Button
-          label={t("Common:SaveButton")}
-          size="small"
-          primary={true}
-          className="button"
-          onClick={onSaveClick}
-          isDisabled={!showReminder}
-        />
-        <Button
-          label={t("Common:CancelButton")}
-          size="small"
-          className="button"
-          onClick={onCancelClick}
-          isDisabled={!showReminder}
-        />
-        {showReminder && (
-          <Text
-            color="#A3A9AE"
-            fontSize="12px"
-            fontWeight="600"
-            className="reminder"
-          >
-            {t("YouHaveUnsavedChanges")}
-          </Text>
-        )}
-      </ButtonsWrapper>
+      <Buttons
+        t={t}
+        showReminder={showReminder}
+        onSaveClick={onSaveClick}
+        onCancelClick={onCancelClick}
+      />
     </MainContainer>
   );
 };
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js
index f7e84f0e45..79c6947625 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js
@@ -4,14 +4,13 @@ import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import RadioButtonGroup from "@appserver/components/radio-button-group";
-import Button from "@appserver/components/button";
 import Text from "@appserver/components/text";
 import Link from "@appserver/components/link";
 import toastr from "@appserver/components/toast/toastr";
 import SectionLoader from "../sub-components/section-loader";
 import { getLanguage } from "@appserver/common/utils";
 import { isMobile } from "react-device-detect";
-import { ButtonsWrapper } from "../StyledSecurity";
+import Buttons from "../sub-components/buttons";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -22,7 +21,6 @@ const MainContainer = styled.div`
 
   .box {
     margin-top: 20px;
-    margin-bottom: 24px;
   }
 `;
 
@@ -134,33 +132,12 @@ const TwoFactorAuth = (props) => {
         onClick={onSelectTfaType}
       />
 
-      <ButtonsWrapper>
-        <Button
-          label={t("Common:SaveButton")}
-          size="small"
-          primary={true}
-          className="button"
-          onClick={onSaveClick}
-          isDisabled={!showReminder}
-        />
-        <Button
-          label={t("Common:CancelButton")}
-          size="small"
-          className="button"
-          onClick={onCancelClick}
-          isDisabled={!showReminder}
-        />
-        {showReminder && (
-          <Text
-            color="#A3A9AE"
-            fontSize="12px"
-            fontWeight="600"
-            className="reminder"
-          >
-            {t("YouHaveUnsavedChanges")}
-          </Text>
-        )}
-      </ButtonsWrapper>
+      <Buttons
+        t={t}
+        showReminder={showReminder}
+        onSaveClick={onSaveClick}
+        onCancelClick={onCancelClick}
+      />
     </MainContainer>
   );
 };
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js
index 1123e44ef2..d545608348 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js
@@ -11,6 +11,7 @@ import { isMobile } from "react-device-detect";
 import { getLanguage } from "@appserver/common/utils";
 import { ButtonsWrapper } from "../StyledSecurity";
 import UserFields from "../sub-components/user-fields";
+import Buttons from "../sub-components/buttons";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -44,6 +45,9 @@ const TrustedMail = (props) => {
     }
   };
 
+  const onSaveClick = () => {};
+  const onCancelClick = () => {};
+
   const lng = getLanguage(localStorage.getItem("language") || "en");
   return (
     <MainContainer>
@@ -97,33 +101,12 @@ const TrustedMail = (props) => {
       </Text>
       <Text>{t("TrustedMailWarningHelper")}</Text>
 
-      <ButtonsWrapper>
-        <Button
-          label={t("Common:SaveButton")}
-          size="small"
-          primary={true}
-          className="button"
-          //onClick={onSaveClick}
-          isDisabled={!showReminder}
-        />
-        <Button
-          label={t("Common:CancelButton")}
-          size="small"
-          className="button"
-          //onClick={onCancelClick}
-          isDisabled={!showReminder}
-        />
-        {showReminder && (
-          <Text
-            color="#A3A9AE"
-            fontSize="12px"
-            fontWeight="600"
-            className="reminder"
-          >
-            {t("YouHaveUnsavedChanges")}
-          </Text>
-        )}
-      </ButtonsWrapper>
+      <Buttons
+        t={t}
+        showReminder={showReminder}
+        onSaveClick={onSaveClick}
+        onCancelClick={onCancelClick}
+      />
     </MainContainer>
   );
 };
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/buttons.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/buttons.js
new file mode 100644
index 0000000000..374f5925cf
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/buttons.js
@@ -0,0 +1,40 @@
+import React from "react";
+import Button from "@appserver/components/button";
+import Text from "@appserver/components/text";
+import { ButtonsWrapper } from "../StyledSecurity";
+
+const Buttons = (props) => {
+  const { t, showReminder, onSaveClick, onCancelClick } = props;
+
+  return (
+    <ButtonsWrapper>
+      <Button
+        label={t("Common:SaveButton")}
+        size="small"
+        primary={true}
+        className="button"
+        onClick={onSaveClick}
+        isDisabled={!showReminder}
+      />
+      <Button
+        label={t("Common:CancelButton")}
+        size="small"
+        className="button"
+        onClick={onCancelClick}
+        isDisabled={!showReminder}
+      />
+      {showReminder && (
+        <Text
+          color="#A3A9AE"
+          fontSize="12px"
+          fontWeight="600"
+          className="reminder"
+        >
+          {t("YouHaveUnsavedChanges")}
+        </Text>
+      )}
+    </ButtonsWrapper>
+  );
+};
+
+export default Buttons;