diff --git a/components.d.ts b/components.d.ts
index 0dacc28..e8d8e5d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -64,6 +64,8 @@ declare module 'vue' {
     Size: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/size.vue')['default']
     StartEnd: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/start-end.vue')['default']
     Suffix: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/suffix.vue')['default']
+    SupportMessengerBrandIcon: typeof import('./src/components/SupportMessengerBrandIcon.vue')['default']
+    SupportMessengerPicker: typeof import('./src/components/SupportMessengerPicker.vue')['default']
     Switchable: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/switchable.vue')['default']
     Text: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/text.vue')['default']
     Time: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/time.vue')['default']
diff --git a/src/assets/css/main.less b/src/assets/css/main.less
index fd048d3..57fd767 100644
--- a/src/assets/css/main.less
+++ b/src/assets/css/main.less
@@ -10,6 +10,7 @@
 @import (less) '../../views/base/user/desktop/styles/desktop-user.less';
 @import (less) '../../views/base/priceTrigger/desktop/styles/desktop-price-trigger.less';
 @import (less) '../../views/base/home/desktop/styles/desktop-home.less';
+@import (less) '../../views/login/desktop/styles/desktop-login.less';
 @import (less) '../../layouts/desktop/styles/desktop-inner-pages.less';
 
 html {
diff --git a/src/layouts/styles/desktop-shell.less b/src/layouts/styles/desktop-shell.less
index 467e24d..2507dc6 100644
--- a/src/layouts/styles/desktop-shell.less
+++ b/src/layouts/styles/desktop-shell.less
@@ -172,3 +172,10 @@ html.app-layout--desktop .app-splash-screen {
   left: 0 !important;
   width: 100vw !important;
 }
+
+html.app-layout--desktop .login-page-root {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
diff --git a/src/views/login/composables/useLoginPage.ts b/src/views/login/composables/useLoginPage.ts
new file mode 100644
index 0000000..b9e4e53
--- /dev/null
+++ b/src/views/login/composables/useLoginPage.ts
@@ -0,0 +1,21 @@
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+export function useLoginPage() {
+  const enterType = ref(false)
+
+  function setEnterType(val: boolean) {
+    enterType.value = val
+  }
+
+  onMounted(() => {
+    if (router.currentRoute.value.query.id) {
+      enterType.value = true
+    }
+  })
+
+  return {
+    enterType,
+    setEnterType,
+  }
+}
diff --git a/src/views/login/desktop/DesktopLoginView.vue b/src/views/login/desktop/DesktopLoginView.vue
new file mode 100644
index 0000000..c46340c
--- /dev/null
+++ b/src/views/login/desktop/DesktopLoginView.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="dlogin login-page">
+    <div class="dlogin__bg" aria-hidden="true">
+      <div class="dlogin__bg-top">
+        <img :src="img_topGradiant" alt="" class="dlogin__bg-cover" />
+        <img :src="img_pattern" alt="" class="dlogin__bg-pattern" />
+      </div>
+      <div class="dlogin__bg-bottom">
+        <img :src="img_bottomGradiant" alt="" class="dlogin__bg-cover" />
+        <img :src="img_pattern" alt="" class="dlogin__bg-pattern" />
+      </div>
+    </div>
+
+    <div class="dlogin__container">
+      <div class="dlogin__card">
+        <transition mode="out-in" name="fade">
+          <Login v-if="!enterType" class="dlogin__form" @register="setEnterType" />
+          <Register v-else class="dlogin__form" @register="setEnterType" />
+        </transition>
+      </div>
+
+      <button type="button" class="dlogin__back" @click="router.push({ name: 'buyProduct' })">
+        بازگشت به فروشگاه
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Login from '@/views/login/components/Login.vue'
+import Register from '@/views/login/components/Register.vue'
+import img_topGradiant from '../assets/img/gr_top_white.svg'
+import img_bottomGradiant from '../assets/img/gr_bottom_white.svg'
+import img_pattern from '../assets/img/pattern.svg'
+import router from '@/router'
+
+defineProps<{
+  enterType: boolean
+}>()
+
+const emit = defineEmits<{
+  register: [val: boolean]
+}>()
+
+function setEnterType(val: boolean) {
+  emit('register', val)
+}
+</script>
+
+<style lang="less" src="./styles/desktop-login.less"></style>
diff --git a/src/views/login/desktop/styles/desktop-login.less b/src/views/login/desktop/styles/desktop-login.less
new file mode 100644
index 0000000..be29c96
--- /dev/null
+++ b/src/views/login/desktop/styles/desktop-login.less
@@ -0,0 +1,114 @@
+html.app-layout--desktop {
+  .login-page-root {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .dlogin {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    height: 100%;
+    padding: 32px 24px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    background: #fff;
+  }
+
+  .dlogin__bg {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .dlogin__bg-top,
+  .dlogin__bg-bottom {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 34%;
+    overflow: hidden;
+  }
+
+  .dlogin__bg-top {
+    top: 0;
+  }
+
+  .dlogin__bg-bottom {
+    bottom: 0;
+  }
+
+  .dlogin__bg-cover {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .dlogin__bg-pattern {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: none;
+  }
+
+  .dlogin__container {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 460px;
+    gap: 20px;
+  }
+
+  .dlogin__card {
+    width: 100%;
+    max-height: calc(100vh - 120px);
+    padding: 36px 32px 28px;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.96);
+    border: 1px solid rgba(15, 23, 42, 0.06);
+    box-shadow:
+      0 18px 48px rgba(15, 23, 42, 0.08),
+      0 2px 8px rgba(15, 23, 42, 0.04);
+    backdrop-filter: blur(8px);
+    box-sizing: border-box;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .dlogin__form {
+    width: 100%;
+  }
+
+  .dlogin__form img {
+    width: 132px !important;
+    height: auto;
+    margin-bottom: 28px !important;
+  }
+
+  .dlogin__back {
+    border: none;
+    background: transparent;
+    color: @primary-color;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 12px;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ab1fd56..0b65b9e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,49 +1,46 @@
 <template>
-  <div class="flex items-center h-[92vh] justify-center ">
-    <!--    <PhoneVerify/>-->
-    <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
-      <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
-      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none">
-    </div>
-    <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
-      <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
-      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none">
-    </div>
-    <div class="z-1000 w-full p-5">
-      <transition mode="out-in" name="fade">
-        <Login v-if="!enterType" @register="setEnterType"/>
-        <Register v-else @register="setEnterType"/>
-      </transition>
-      <div class="text-center text-primary font-500" @click="router.push({name:'buyProduct'})">بازگشت به فروشگاه</div>
-    </div>
+  <div class="login-page-root">
+    <DesktopLoginView
+      v-show="isDesktop"
+      :enter-type="enterType"
+      @register="setEnterType"
+    />
+    <MobileLoginView
+      v-show="!isDesktop"
+      :enter-type="enterType"
+      @register="setEnterType"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onUnmounted, watch } from 'vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useLoginPage } from './composables/useLoginPage'
+import DesktopLoginView from './desktop/DesktopLoginView.vue'
+import MobileLoginView from './mobile/MobileLoginView.vue'
 
-import Login from "@/views/login/components/Login.vue";
-import Register from "@/views/login/components/Register.vue";
-import { onMounted, ref } from 'vue'
-import img_topGradiant from './assets/img/gr_top_white.svg'
-import img_bottomGradiant from './assets/img/gr_bottom_white.svg'
-import img_pattern from './assets/img/pattern.svg'
-import router from '@/router'
+const NO_SIDEBAR_CLASS = 'app-layout--desktop-no-sidebar'
+const isDesktop = useDesktopBreakpoint()
+const { enterType, setEnterType } = useLoginPage()
 
-const enterType = ref<boolean>(false)
+watch(
+  isDesktop,
+  (desktop) => {
+    document.documentElement.classList.toggle(NO_SIDEBAR_CLASS, desktop)
+  },
+  { immediate: true }
+)
 
-function setEnterType(val: boolean) {
-  enterType.value = val
-}
-
-onMounted(() => {
-  if (router.currentRoute.value.query.id)
-    enterType.value = true
+onUnmounted(() => {
+  document.documentElement.classList.remove(NO_SIDEBAR_CLASS)
 })
-
-
 </script>
 
-
-<style>
-
+<style scoped>
+.login-page-root {
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/views/login/mobile/MobileLoginView.vue b/src/views/login/mobile/MobileLoginView.vue
new file mode 100644
index 0000000..f39c759
--- /dev/null
+++ b/src/views/login/mobile/MobileLoginView.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="login-page flex items-center h-[92vh] justify-center">
+    <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
+      <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
+      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+    </div>
+    <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
+      <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
+      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+    </div>
+    <div class="z-1000 w-full p-5">
+      <transition mode="out-in" name="fade">
+        <Login v-if="!enterType" @register="setEnterType" />
+        <Register v-else @register="setEnterType" />
+      </transition>
+      <div class="text-center text-primary font-500" @click="router.push({ name: 'buyProduct' })">
+        بازگشت به فروشگاه
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Login from '@/views/login/components/Login.vue'
+import Register from '@/views/login/components/Register.vue'
+import img_topGradiant from '../assets/img/gr_top_white.svg'
+import img_bottomGradiant from '../assets/img/gr_bottom_white.svg'
+import img_pattern from '../assets/img/pattern.svg'
+import router from '@/router'
+
+defineProps<{
+  enterType: boolean
+}>()
+
+const emit = defineEmits<{
+  register: [val: boolean]
+}>()
+
+function setEnterType(val: boolean) {
+  emit('register', val)
+}
+</script>