diff --git a/web/ASC.Web.Login/src/Login.jsx b/web/ASC.Web.Login/src/Login.jsx
index dddcea0b7f..f48b698a4b 100644
--- a/web/ASC.Web.Login/src/Login.jsx
+++ b/web/ASC.Web.Login/src/Login.jsx
@@ -42,6 +42,7 @@ import {
 import AppLoader from "@appserver/common/components/AppLoader";
 import EmailInput from "@appserver/components/email-input";
 import { ReactSVG } from "react-svg";
+import FormWrapper from "@appserver/components/form-wrapper";
 
 const settings = {
   minLength: 6,
@@ -384,7 +385,7 @@ const Form = (props) => {
             {greetingTitle}
           </Text>
 
-          <div className="form-wrapper">
+          <FormWrapper>
             {ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
 
             {oauthDataExists() && (
@@ -531,7 +532,7 @@ const Form = (props) => {
                 </Text>
               )}
             </form>
-          </div>
+          </FormWrapper>
           <Toast />
 
           <MoreLoginModal
diff --git a/web/ASC.Web.Login/src/StyledLogin.js b/web/ASC.Web.Login/src/StyledLogin.js
index 33c5e110fe..78751ab2e1 100644
--- a/web/ASC.Web.Login/src/StyledLogin.js
+++ b/web/ASC.Web.Login/src/StyledLogin.js
@@ -1,4 +1,4 @@
-import { tablet, hugeMobile } from "@appserver/components/utils/device";
+import { hugeMobile } from "@appserver/components/utils/device";
 import styled, { css } from "styled-components";
 
 export const ButtonsWrapper = styled.div`
@@ -189,30 +189,6 @@ export const LoginContainer = styled.div`
       height: 39px;
     }
   }
-
-  .form-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 32px;
-    background: #ffffff;
-    box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
-    border-radius: 12px;
-
-    max-width: 384px;
-
-    @media ${tablet} {
-      max-width: 480px;
-    }
-
-    @media ${hugeMobile} {
-      padding: 0;
-      border-radius: 0;
-      box-shadow: none;
-      max-width: 311px;
-      background: #ffffff;
-    }
-  }
 `;
 
 export const LoginFormWrapper = styled.div`