diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 13739ac98d..94245a5d82 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -452,7 +452,7 @@ dependencies:
   '@rush-temp/lead-resources': file:projects/lead-resources.tgz_a1d864769aaf53d09b76fe134ab55e60
   '@rush-temp/login': file:projects/login.tgz
   '@rush-temp/login-assets': file:projects/login-assets.tgz_typescript@4.8.4
-  '@rush-temp/login-resources': file:projects/login-resources.tgz_a1d864769aaf53d09b76fe134ab55e60
+  '@rush-temp/login-resources': file:projects/login-resources.tgz_6b663ee09b2196220fd64c9f6c0fe6d4
   '@rush-temp/middleware': file:projects/middleware.tgz
   '@rush-temp/minio': file:projects/minio.tgz
   '@rush-temp/model': file:projects/model.tgz
@@ -16495,6 +16495,23 @@ packages:
       punycode: 2.1.1
     dev: false
 
+  /url-loader/4.1.1_file-loader@6.2.0+webpack@5.75.0:
+    resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      file-loader: '*'
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      file-loader:
+        optional: true
+    dependencies:
+      file-loader: 6.2.0_webpack@5.75.0
+      loader-utils: 2.0.4
+      mime-types: 2.1.35
+      schema-utils: 3.1.1
+      webpack: 5.75.0_c5a9b74f1e48ccd7ef01359287c5ad78
+    dev: false
+
   /url-parse/1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
     dependencies:
@@ -17160,7 +17177,7 @@ packages:
     dev: false
 
   file:projects/account.tgz_bufferutil@4.0.7:
-    resolution: {integrity: sha512-baPWYIMSu02ZqsK1UY9gUO2dsdHSRgwPr8zxLOtl0PW9uzlFiW3QBF3mccPOg5KRbn9lMu09cEv1m0IVXbJ+ug==, tarball: file:projects/account.tgz}
+    resolution: {integrity: sha512-wFsMbYAgJVzoIL3Q/RDCuQEtSG+/9n2pxt7SSMY9pcl6t3CuW5QtrjWszLGs+LKbqhmWiVVDJEK/7naWcm0J7Q==, tarball: file:projects/account.tgz}
     id: file:projects/account.tgz
     name: '@rush-temp/account'
     version: 0.0.0
@@ -18632,8 +18649,8 @@ packages:
       - typescript
     dev: false
 
-  file:projects/login-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-RGXKBQhU8Jy6/mvZPk9rWS+nPrSaDdqKVgPAlKe/z28BG0Sbt0oi+ANNdYbfIgJI6E5o483HwMFm1nlLIgxoVg==, tarball: file:projects/login-resources.tgz}
+  file:projects/login-resources.tgz_6b663ee09b2196220fd64c9f6c0fe6d4:
+    resolution: {integrity: sha512-r5B2Yb5okUeMrcW08WrB4FYijiPPIwr/fO50FIv5zjEkSMjbLJFIrXKOTdiXGGmnVqlPsd0AhLCPjPQhFC3SSA==, tarball: file:projects/login-resources.tgz}
     id: file:projects/login-resources.tgz
     name: '@rush-temp/login-resources'
     version: 0.0.0
@@ -18654,9 +18671,11 @@ packages:
       svelte-loader: 3.1.4_svelte@3.55.1
       svelte-preprocess: 5.0.3_6420a3eba9d5580d9c2f627c17e61722
       typescript: 4.8.4
+      url-loader: 4.1.1_file-loader@6.2.0+webpack@5.75.0
     transitivePeerDependencies:
       - '@babel/core'
       - coffeescript
+      - file-loader
       - less
       - postcss
       - postcss-load-config
@@ -18664,6 +18683,7 @@ packages:
       - stylus
       - sugarss
       - supports-color
+      - webpack
     dev: false
 
   file:projects/login.tgz:
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index bede41445c..1cef9fb751 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -73,6 +73,14 @@
   --theme-button-disabled-color: rgba(255, 255, 255, .5);
   --theme-button-border: rgba(255, 255, 255, .09);
 
+  --theme-button-contrast-color: #000;
+  --theme-button-contrast-enabled: rgba(255, 255, 255, .8);
+  --theme-button-contrast-hovered: #fff;
+  --theme-button-contrast-pressed: rgba(255, 255, 255, .6);
+  --theme-button-contrast-disabled: rgba(255, 255, 255, .6);
+  --theme-button-contrast-disabled-color: rgba(0, 0, 0, .5);
+  --theme-button-contrast-border: rgba(255, 255, 255, .2);
+
   --theme-refinput-color: rgba(255, 255, 255, .03);
   --theme-refinput-divider: rgba(255, 255, 255, .07);
   --theme-refinput-border: rgba(255, 255, 255, .03);
@@ -256,6 +264,14 @@
   --theme-button-disabled-color: rgba(0, 0, 0, .5);
   --theme-button-border: rgba(0, 0, 0, .09);
 
+  --theme-button-contrast-color: #fff;
+  --theme-button-contrast-enabled: rgba(0, 0, 0, .8);
+  --theme-button-contrast-hovered: #000;
+  --theme-button-contrast-pressed: rgba(0, 0, 0, .6);
+  --theme-button-contrast-disabled: rgba(0, 0, 0, .6);
+  --theme-button-contrast-disabled-color: rgba(255, 255, 255, .5);
+  --theme-button-contrast-border: rgba(0, 0, 0, .2);
+
   --theme-refinput-color: rgba(0, 0, 0, .03);
   --theme-refinput-divider: rgba(0, 0, 0, .07);
   --theme-refinput-border: rgba(0, 0, 0, .03);
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index b0974d855c..a7ad45b2b9 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -311,6 +311,30 @@
       background-color: var(--primary-button-disabled);
     }
   }
+  &.contrast {
+    padding: .75rem 1rem;
+    font-weight: 500;
+    color: var(--theme-button-contrast-color);
+    background-color: var(--theme-button-contrast-enabled);
+    border-color: var(--theme-button-contrast-border);
+
+    .btn-icon {
+      color: var(--theme-button-contrast-color);
+    }
+    &:hover {
+      background-color: var(--theme-button-contrast-hovered);
+    }
+    &:active {
+      background-color: var(--theme-button-contrast-pressed);
+    }
+    &:focus {
+      background-color: var(--theme-button-contrast-hovered);
+    }
+    &:disabled {
+      color: var(--theme-button-contrast-disabled-color);
+      background-color: var(--theme-button-contrast-disabled);
+    }
+  }
 
   &.notSelected {
     color: var(--theme-dark-color);
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 92323d4647..d59cb18729 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -125,6 +125,7 @@ export type ButtonKind =
   | 'dangerous'
   | 'list'
   | 'list-header'
+  | 'contrast'
 export type ButtonSize = 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
 export type ButtonShape =
   | 'rectangle'
diff --git a/plugins/login-resources/img/login_back.avif b/plugins/login-resources/img/login_back.avif
index e41e36793b..55018ed7fb 100644
Binary files a/plugins/login-resources/img/login_back.avif and b/plugins/login-resources/img/login_back.avif differ
diff --git a/plugins/login-resources/img/login_back.jpg b/plugins/login-resources/img/login_back.jpg
deleted file mode 100644
index 7c3950cc75..0000000000
Binary files a/plugins/login-resources/img/login_back.jpg and /dev/null differ
diff --git a/plugins/login-resources/img/login_back.png b/plugins/login-resources/img/login_back.png
index b0b0266afa..9684e3c0cd 100644
Binary files a/plugins/login-resources/img/login_back.png and b/plugins/login-resources/img/login_back.png differ
diff --git a/plugins/login-resources/img/login_back.webp b/plugins/login-resources/img/login_back.webp
index 9c1be2bfaf..5e0df328fe 100644
Binary files a/plugins/login-resources/img/login_back.webp and b/plugins/login-resources/img/login_back.webp differ
diff --git a/plugins/login-resources/img/login_back_2x.avif b/plugins/login-resources/img/login_back_2x.avif
index fdc06b8d0a..d0309bde0e 100644
Binary files a/plugins/login-resources/img/login_back_2x.avif and b/plugins/login-resources/img/login_back_2x.avif differ
diff --git a/plugins/login-resources/img/login_back_2x.jpg b/plugins/login-resources/img/login_back_2x.jpg
deleted file mode 100644
index 56ac09f589..0000000000
Binary files a/plugins/login-resources/img/login_back_2x.jpg and /dev/null differ
diff --git a/plugins/login-resources/img/login_back_2x.png b/plugins/login-resources/img/login_back_2x.png
index 2e937c769a..9b7882b54b 100644
Binary files a/plugins/login-resources/img/login_back_2x.png and b/plugins/login-resources/img/login_back_2x.png differ
diff --git a/plugins/login-resources/img/login_back_2x.webp b/plugins/login-resources/img/login_back_2x.webp
index 1b01b5e495..b4fa714c38 100644
Binary files a/plugins/login-resources/img/login_back_2x.webp and b/plugins/login-resources/img/login_back_2x.webp differ
diff --git a/plugins/login-resources/package.json b/plugins/login-resources/package.json
index b6c5015709..9b864ec239 100644
--- a/plugins/login-resources/package.json
+++ b/plugins/login-resources/package.json
@@ -28,7 +28,8 @@
     "eslint": "^8.26.0",
     "prettier": "^2.7.1",
     "svelte-check": "3.2.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "url-loader": "~4.1.1"
   },
   "dependencies": {
     "@hcengineering/platform": "^0.6.9",
diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte
index b95ad93a84..97dce567b9 100644
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/plugins/login-resources/src/components/Form.svelte
@@ -109,7 +109,7 @@
   }
 </script>
 
-<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '1.25rem' : '5rem'}>
+<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '.25rem 1.25rem' : '4rem 5rem'}>
   <div class="grow-separator" />
   <div class="title"><Label label={caption} /></div>
   <div class="status">
@@ -135,7 +135,7 @@
       <div class="form-row send">
         <Button
           label={action.i18n}
-          kind={'primary'}
+          kind={'contrast'}
           shape={'round2'}
           size={'x-large'}
           width="100%"
@@ -176,11 +176,12 @@
 
 <style lang="scss">
   .container {
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    flex-grow: 1;
-    overflow: hidden;
+    // width: 100%;
+    // flex-grow: 1;
     // height: 100%;
     // padding: 5rem;
 
diff --git a/plugins/login-resources/src/components/LoginApp.svelte b/plugins/login-resources/src/components/LoginApp.svelte
index e342f28495..789079f4d2 100644
--- a/plugins/login-resources/src/components/LoginApp.svelte
+++ b/plugins/login-resources/src/components/LoginApp.svelte
@@ -32,6 +32,15 @@
   import LoginIcon from './icons/LoginIcon.svelte'
   import workbench from '@hcengineering/workbench'
 
+  import loginBack from '../../img/login_back.png'
+  import loginBack2x from '../../img/login_back_2x.png'
+
+  import loginBackAvif from '../../img/login_back.avif'
+  import loginBack2xAvif from '../../img/login_back_2x.avif'
+
+  import loginBackWebp from '../../img/login_back.webp'
+  import loginBack2xWebp from '../../img/login_back_2x.webp'
+
   export let page: string = 'login'
 
   let navigateUrl: string | undefined
@@ -51,110 +60,162 @@
 </script>
 
 <div class="theme-dark w-full h-full backd" class:paneld={$deviceInfo.docWidth <= 768} class:white={!$themeStore.dark}>
-  <div class:back={$deviceInfo.docWidth > 768} class="w-full h-full">
-    <div style:position="fixed" style:left={'28px'} style:top={'48px'} class="flex-row-center">
+  <div class="bg-image clear-mins" class:back={$deviceInfo.docWidth > 768} class:p-4={$deviceInfo.docWidth > 768}>
+    <picture>
+      <source srcset={`${loginBackAvif}, ${loginBack2xAvif} 2x`} type="image/avif" />
+      <source srcset={`${loginBackWebp}, ${loginBack2xWebp} 2x`} type="image/webp" />
+
+      <img
+        class="back-image"
+        src={loginBack}
+        style:display={$deviceInfo.docWidth <= 768 ? 'none' : 'block'}
+        srcset={`${loginBack} 1x, ${loginBack2x} 2x`}
+        alt=""
+      />
+    </picture>
+
+    <div
+      style:position="fixed"
+      style:left={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.75rem'}
+      style:top={'3rem'}
+      class="flex-row-center"
+    >
       <LoginIcon /><span class="fs-title">{getMetadata(workbench.metadata.PlatformTitle)}</span>
     </div>
 
-    <Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
-      <div class="flex-grow" />
-      <div
-        class:mt-8={$deviceInfo.docWidth < 768}
-        class:panel={$deviceInfo.docWidth > 768}
-        class:white={!$themeStore.dark}
-        class:minHeight={!$deviceInfo.isPortrait}
-        class:landscape={$deviceInfo.docWidth > 768}
-        style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
-      >
-        <div class="flex-grow" />
-        {#if page === 'login'}
-          <LoginForm {navigateUrl} />
-        {:else if page === 'signup'}
-          <SignupForm />
-        {:else if page === 'createWorkspace'}
-          <CreateWorkspaceForm />
-        {:else if page === 'password'}
-          <PasswordRequest />
-        {:else if page === 'recovery'}
-          <PasswordRestore />
-        {:else if page === 'selectWorkspace'}
-          <SelectWorkspace {navigateUrl} />
-        {:else if page === 'join'}
-          <Join />
-        {:else if page === 'confirm'}
-          <Confirmation />
-        {:else if page === 'confirmationSend'}
-          <ConfirmationSend />
-        {/if}
-      </div>
-    </Scroller>
+    <div
+      class="panel-base"
+      class:panel={$deviceInfo.docWidth > 768}
+      class:white={!$themeStore.dark}
+      class:minHeight={!$deviceInfo.isPortrait}
+      class:landscape={$deviceInfo.docWidth > 768}
+      style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
+    >
+      <Scroller padding={'1rem 0'}>
+        <div class="form-content">
+          {#if page === 'login'}
+            <LoginForm {navigateUrl} />
+          {:else if page === 'signup'}
+            <SignupForm />
+          {:else if page === 'createWorkspace'}
+            <CreateWorkspaceForm />
+          {:else if page === 'password'}
+            <PasswordRequest />
+          {:else if page === 'recovery'}
+            <PasswordRestore />
+          {:else if page === 'selectWorkspace'}
+            <SelectWorkspace {navigateUrl} />
+          {:else if page === 'join'}
+            <Join />
+          {:else if page === 'confirm'}
+            <Confirmation />
+          {:else if page === 'confirmationSend'}
+            <ConfirmationSend />
+          {/if}
+        </div>
+      </Scroller>
+    </div>
+
     <Popup />
   </div>
 </div>
 
 <style lang="scss">
-  .backd {
-    background-color: 'rgb(0,0,0)';
-
-    &.paneld {
-      background: linear-gradient(180deg, #232324 0%, #171719 100%);
-    }
+  .back-image {
+    position: fixed;
+    top: 32px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: left top;
   }
-  .back {
-    background-image: url('../../img/login_back.png');
-    background-image: -webkit-image-set(
-      '../../img/login_back.avif' 1x,
-      '../../img/login_back_2x.avif' 2x,
-      '../../img/login_back.png' 1x,
-      '../../img/login_back_2x.png' 2x,
-      '../../img/login_back.webp' 1x,
-      '../../img/login_back_2x.webp' 2x,
-      '../../img/login_back.jpg' 1x,
-      '../../img/login_back_2x.jpg' 2x
-    ); /* Temporary fallback for Chrome and Safari browsers until they support 'image-set()' better */
-    background-image: image-set(
-      '../../img/login_back.avif' 1x,
-      '../../img/login_back_2x.avif' 2x,
-      '../../img/login_back.png' 1x,
-      '../../img/login_back_2x.png' 2x,
-      '../../img/login_back.webp' 1x,
-      '../../img/login_back_2x.webp' 2x,
-      '../../img/login_back.jpg' 1x,
-      '../../img/login_back_2x.jpg' 2x
-    );
-    background-size: cover;
-    background-position-y: center;
+  .backd {
+    position: relative;
+    background-color: var(--theme-bg-color);
 
-    background-repeat: no-repeat;
+    .bg-image {
+      display: flex;
+      flex-direction: row-reverse;
+      width: 100%;
+      height: 100%;
+    }
+    &.paneld {
+      background: rgba(45, 50, 160, 0.5);
+
+      .panel-base {
+        padding-top: 4rem;
+        padding-bottom: 1rem;
+        width: 100%;
+      }
+    }
   }
 
   .panel {
     position: relative;
     display: flex;
     flex-direction: column;
-    height: calc(100% - 5rem);
-    background: linear-gradient(180deg, #232324 0%, #171719 100%);
+    justify-content: center;
+    width: 50%;
+    height: 100%;
+    min-width: 35rem;
+    max-width: 41rem;
+    background: rgba(45, 50, 160, 0.5);
+    mix-blend-mode: normal;
+    box-shadow: -30px 1.52px 173.87px #121437;
+    backdrop-filter: blur(157.855px);
+    border-radius: 1rem !important;
 
-    &.white {
-      background: radial-gradient(94.31% 94.31% at 6.36% 5.69%, #484a4f 0%, #505257 100%);
-    }
-    border-radius: 7.5658px !important;
-    box-shadow: 30px 11.52px 193.87px rgba(0, 0, 0, 0.7);
-
-    &.minHeight {
-      min-height: 40rem;
-    }
-
-    &::before,
     &::after {
-      content: '';
+      overflow: hidden;
       position: absolute;
-      border-radius: 50%;
+      content: '';
+      inset: 0;
+      background: radial-gradient(161.92% 96.11% at 11.33% 3.89%, #313d9a 0%, #202669 100%);
+      border-radius: 1rem;
       z-index: -1;
     }
-    &.landscape {
-      margin-right: 1.25rem;
-      width: 41.75rem;
+    &::before {
+      position: absolute;
+      content: '';
+      inset: 0;
+      padding: 1px;
+      background: conic-gradient(
+          rgba(255, 255, 255, 0.18) 10%,
+          rgba(126, 120, 165, 0.5),
+          rgba(191, 216, 253, 0.5),
+          rgba(246, 247, 249, 0.32),
+          rgba(219, 229, 242, 0.34) 60%,
+          rgba(163, 203, 255, 0.24) 90%
+        )
+        border-box;
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      border-radius: 1rem;
+      transform: rotate(180deg);
+      transition: opacity 0.15s var(--timing-main);
+      opacity: 0.7;
+      // z-index: -1;
     }
   }
+  .backd.paneld::after,
+  .panel::after {
+    overflow: hidden;
+    position: absolute;
+    content: '';
+    inset: 0;
+    background: radial-gradient(161.92% 96.11% at 11.33% 3.89%, #313d9a 0%, #202669 100%);
+    z-index: -1;
+  }
+  .panel::after {
+    border-radius: 1rem;
+  }
+  .form-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1;
+    height: max-content;
+  }
 </style>
diff --git a/plugins/login-resources/src/components/LoginForm.svelte b/plugins/login-resources/src/components/LoginForm.svelte
index 60a037c02f..927beb11c1 100644
--- a/plugins/login-resources/src/components/LoginForm.svelte
+++ b/plugins/login-resources/src/components/LoginForm.svelte
@@ -114,6 +114,6 @@
   {fields}
   {object}
   {action}
-  bottomActions={[recoveryAction, signUpAction]}
+  bottomActions={[signUpAction, recoveryAction]}
   ignoreInitialValidation
 />
diff --git a/plugins/login-resources/src/components/StatusControl.svelte b/plugins/login-resources/src/components/StatusControl.svelte
index 91a1e10ebc..d0c2cd2930 100644
--- a/plugins/login-resources/src/components/StatusControl.svelte
+++ b/plugins/login-resources/src/components/StatusControl.svelte
@@ -30,15 +30,15 @@
 <style lang="scss">
   .container {
     padding: 0.75rem 1rem;
-    background-color: var(--theme-comp-header-color);
-    border: 1px solid var(--theme-divider-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
   }
 
   .error {
     color: var(--system-error-color);
     fill: var(--system-error-color);
-    background-color: var(--theme-comp-header-color);
+    background-color: var(--theme-button-enabled);
     border-color: var(--system-error-60-color);
   }
 </style>