diff --git a/packages/login/index.d.ts b/packages/login/index.d.ts
index 55cca2d558..2a4851c266 100644
--- a/packages/login/index.d.ts
+++ b/packages/login/index.d.ts
@@ -21,7 +21,7 @@ declare global {
     i18n: WindowI18nType;
   }
 
-  interface IPortalSettings extends Object {
+  interface IPortalSettings {
     culture: string;
     debugInfo: boolean;
     docSpace: boolean;
diff --git a/packages/login/src/StyledLogin.js b/packages/login/src/StyledLogin.js
deleted file mode 100644
index bcd8c68d23..0000000000
--- a/packages/login/src/StyledLogin.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { hugeMobile } from "@docspace/components/utils/device";
-import styled, { css } from "styled-components";
-
-export const ButtonsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 0 213px 0 213px;
-  width: 320px;
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-`;
-
-export const LoginContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 56px auto 0 auto;
-  max-width: 960px;
-
-  .remember-wrapper {
-    max-width: 142px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .buttonWrapper {
-    margin-bottom: 8px;
-    width: 100%;
-  }
-
-  @media (max-width: 768px) {
-    padding: 0 16px;
-    max-width: 480px;
-  }
-
-  @media (max-width: 414px) {
-    margin: 0 auto 0 auto;
-    max-width: 311px;
-  }
-
-  .greeting-title {
-    width: 100%;
-    padding-bottom: 32px;
-  }
-
-  .more-label {
-    padding-top: 18px;
-  }
-
-  .or-label {
-    margin: 0 8px;
-  }
-
-  .line {
-    display: flex;
-    width: 320px;
-    align-items: center;
-    color: #eceef1;
-    padding-top: 35px;
-
-    @media (max-width: 768px) {
-      width: 480px;
-    }
-
-    @media (max-width: 414px) {
-      width: 311px;
-    }
-  }
-
-  .line:before,
-  .line:after {
-    content: "";
-    flex-grow: 1;
-    background: #eceef1;
-    height: 1px;
-    font-size: 0px;
-    line-height: 0px;
-    margin: 0px;
-  }
-
-  .code-input-container {
-    margin-top: 32px;
-    text-align: center;
-  }
-
-  .not-found-code {
-    margin-top: 32px;
-  }
-
-  .code-input-bar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    margin-top: 16px;
-    padding: 14px 12px;
-    text-align: center;
-    font-weight: 600;
-    font-size: 11px;
-    line-height: 12px;
-    svg {
-      margin: 8px;
-    }
-  }
-
-  .code-input-bar.warning {
-    background: #f7e6be;
-    margin-bottom: 16px;
-  }
-
-  .code-input-bar.error {
-    background: #f7cdbe;
-  }
-
-  .auth-form-container {
-    margin: 32px 213px 0 213px;
-    width: 320px;
-
-    @media (max-width: 768px) {
-      margin: 32px 0 0 0;
-      width: 100%;
-    }
-    @media (max-width: 375px) {
-      margin: 32px 0 0 0;
-      width: 100%;
-    }
-
-    .login-forgot-wrapper {
-      height: 36px;
-      padding: 14px 0;
-
-      .login-checkbox-wrapper {
-        display: flex;
-        //align-items: center;
-
-        .login-checkbox {
-          display: flex;
-          align-items: flex-start;
-
-          label {
-            justify-content: center;
-          }
-        }
-
-        .remember-helper-wrapper {
-          display: flex;
-          gap: 4px;
-        }
-      }
-
-      .login-link {
-        line-height: 18px;
-        margin-left: auto;
-      }
-    }
-
-    .login-button {
-      margin-bottom: 16px;
-    }
-
-    .login-button-dialog {
-      margin-right: 8px;
-    }
-
-    .login-bottom-border {
-      width: 100%;
-      height: 1px;
-      background: #eceef1;
-    }
-
-    .login-bottom-text {
-      margin: 0 8px;
-    }
-  }
-
-  .logo-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 46px;
-    padding-bottom: 64px;
-
-    @media (${hugeMobile}) {
-      padding-bottom: 40px;
-      height: 39px;
-    }
-  }
-`;
-
-export const LoginFormWrapper = styled.div`
-  display: grid;
-  grid-template-rows: ${(props) =>
-    props.enabledJoin
-      ? props.isDesktop
-        ? css`1fr 10px`
-        : css`1fr 66px`
-      : css`1fr`};
-  width: 100%;
-  height: 100vh;
-`;
diff --git a/packages/login/src/client/App.tsx b/packages/login/src/client/App.tsx
index 995bac2574..c9829975e1 100644
--- a/packages/login/src/client/App.tsx
+++ b/packages/login/src/client/App.tsx
@@ -7,6 +7,9 @@ import ThemeProvider from "@docspace/components/theme-provider";
 import store from "client/store";
 import { I18nextProvider } from "react-i18next";
 import i18n from "./i18n";
+import Login from "./components/Login";
+
+const isDesktopEditor = window["AscDesktopEditor"] !== undefined;
 
 const ThemeProviderWrapper = inject(({ auth }) => {
   const { settingsStore } = auth;
@@ -33,7 +36,7 @@ const App: React.FC<ILoginProps> = ({
       <I18nextProvider i18n={i18n}>
         <ThemeProviderWrapper>
           <GlobalStyle fonts={fonts} />
-          <div>Test: {JSON.stringify(rest)}</div>
+          <Login {...rest} isDesktopEditor={isDesktopEditor} />
         </ThemeProviderWrapper>
       </I18nextProvider>
     </MobxProvider>
diff --git a/packages/login/src/client/components/Login.tsx b/packages/login/src/client/components/Login.tsx
index 3db4543acf..bf22e52874 100644
--- a/packages/login/src/client/components/Login.tsx
+++ b/packages/login/src/client/components/Login.tsx
@@ -5,6 +5,7 @@ interface ILoginProps {
   buildInfo: IBuildInfo;
   providers: ProvidersType;
   capabilities: ICapabilities;
+  isDesktopEditor?: boolean;
 }
 const App: React.FC<ILoginProps> = (props) => {
   return <div>Test: {JSON.stringify(props)}</div>;