diff --git a/apps/web/public/brand/lagin_pic.png b/apps/web/public/brand/lagin_pic.png
new file mode 100644
index 0000000..3178678
Binary files /dev/null and b/apps/web/public/brand/lagin_pic.png differ
diff --git a/apps/web/src/components/UiIcon.vue b/apps/web/src/components/UiIcon.vue
index a9d50b0..fdfe0be 100644
--- a/apps/web/src/components/UiIcon.vue
+++ b/apps/web/src/components/UiIcon.vue
@@ -55,6 +55,8 @@ defineProps<{
     | 'grid'
     | 'list'
     | 'eye'
+    | 'eye-off'
+    | 'lock'
     | 'truck'
     | 'grip'
     | 'apps-plus'
@@ -339,6 +341,15 @@ defineProps<{
       <path d="M2.5 12S6.5 5.5 12 5.5 21.5 12 21.5 12 17.5 18.5 12 18.5 2.5 12 2.5 12Z" />
       <circle cx="12" cy="12" r="3" />
     </template>
+    <template v-else-if="name === 'eye-off'">
+      <path d="M2.5 12S6.5 5.5 12 5.5 21.5 12 21.5 12 17.5 18.5 12 18.5 2.5 12 2.5 12Z" />
+      <circle cx="12" cy="12" r="3" />
+      <path d="M4 20 20 4" />
+    </template>
+    <template v-else-if="name === 'lock'">
+      <rect x="5" y="11" width="14" height="10" rx="2" />
+      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+    </template>
     <template v-else-if="name === 'truck'">
       <path d="M3 7.5h11V16H3z" />
       <path d="M14 10h4.2l2.3 3.2V16H14z" />
diff --git a/apps/web/src/components/auth/AuthBrandPanel.vue b/apps/web/src/components/auth/AuthBrandPanel.vue
index d986821..efbeb64 100644
--- a/apps/web/src/components/auth/AuthBrandPanel.vue
+++ b/apps/web/src/components/auth/AuthBrandPanel.vue
@@ -10,44 +10,37 @@ withDefaults(
   }>(),
   {
     headline: 'همه ارتباطات، یکجا مدیریت می‌شوند',
-    description: `با ${brand.nameFa} فروش، پشتیبانی و ارتباط با مشتری را در یک پنل یکپارچه مدیریت کنید و رشد پایدار بسازید.`,
+    description: `${brand.nameFa} به شما کمک می کند فروش بیشتر داشته باشید،\nمشتریان را بهتر بشناسید و کسب و کارتان را رشد دهید.`,
   },
 );
 </script>
 
 <template>
   <aside class="brand-panel" aria-hidden="false">
-    <div class="brand-head">
-      <MentoLogo :size="44" :show-text="false" />
-      <div class="brand-copy">
-        <BrandName />
-        <span>{{ brand.taglineFa }}</span>
+    <div class="brand-main">
+      <div class="brand-head">
+        <MentoLogo :size="70" :show-text="false" />
+        <div class="brand-copy">
+          <BrandName />
+          <span class="tagline">{{ brand.taglineFa }}</span>
+        </div>
+      </div>
+
+      <div class="brand-body">
+        <h2>{{ headline }}</h2>
+        <p>{{ description }}</p>
+      </div>
+
+      <div class="illustration" aria-hidden="true">
+        <img src="/brand/lagin_pic.png" alt="" />
       </div>
     </div>
 
-    <div class="brand-body">
-      <h2>{{ headline }}</h2>
-      <p>{{ description }}</p>
-    </div>
-
-    <div class="illustration" aria-hidden="true">
-      <div class="dash">
-        <div class="dash-top">
-          <span class="avatar" />
-          <span class="bar short" />
-          <span class="bar" />
-        </div>
-        <div class="chart-line" />
-        <div class="chart-bars">
-          <i /><i /><i /><i /><i />
-        </div>
-      </div>
-      <span class="float chat" />
-      <span class="float people" />
-      <span class="float check" />
-      <span class="float ring" />
-      <span class="plant" />
-    </div>
+    <nav class="brand-foot">
+      <a href="#">شرایط و قوانین</a>
+      <span>|</span>
+      <a href="#">تماس با ما</a>
+    </nav>
   </aside>
 </template>
 
@@ -56,184 +49,110 @@ withDefaults(
   position: relative;
   display: none;
   flex-direction: column;
-  gap: 1.5rem;
-  padding: clamp(1.4rem, 3vw, 2rem);
-  background:
-    radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.18), transparent 42%),
-    linear-gradient(165deg, #f0fdfa 0%, #e6fffa 48%, #f8fafc 100%);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0;
+  padding: 2.6rem clamp(1.4rem, 3vw, 2.4rem);
+  background-color: #f5fbfb;
+  background-image:
+    radial-gradient(ellipse 72% 48% at 50% 58%, rgba(45, 212, 191, 0.14), transparent 70%),
+    radial-gradient(circle at 12% 10%, rgba(20, 184, 166, 0.08), transparent 28%),
+    radial-gradient(rgba(13, 148, 136, 0.16) 1.05px, transparent 1.2px);
+  background-size: auto, auto, 20px 20px;
   overflow: hidden;
   min-width: 0;
+  min-height: 100%;
+}
+
+.brand-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.35rem;
 }
 
 .brand-head {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.85rem;
 }
 
 .brand-copy {
   display: grid;
   gap: 0.1rem;
+  text-align: start;
 }
 
-.brand-copy strong {
-  font-size: 1.2rem;
+.brand-copy :deep(.brand-name) {
+  font-size: 2rem;
+  font-weight: 800;
   color: #0f172a;
-  font-weight: 600;
+  line-height: 1.1;
 }
 
-.brand-copy span {
-  font-size: 0.78rem;
+.brand-copy .tagline {
+  font-size: 0.88rem;
   color: #64748b;
 }
 
+.brand-body {
+  width: fit-content;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
 .brand-body h2 {
-  margin: 0 0 0.55rem;
-  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
+  margin: 0 0 0.6rem;
+  font-size: clamp(1.22rem, 1.95vw, 1.52rem);
   line-height: 1.45;
   color: #0f172a;
+  font-weight: 800;
+  white-space: nowrap;
 }
 
 .brand-body p {
   margin: 0;
+  width: 100%;
   color: #64748b;
-  line-height: 1.75;
-  font-size: 0.95rem;
-  max-width: 28ch;
+  line-height: 1.7;
+  font-size: 1.08rem;
+  white-space: pre-line;
 }
 
 .illustration {
   position: relative;
-  margin-top: auto;
-  min-height: 220px;
-  flex: 1;
+  width: 100%;
+  display: grid;
+  place-items: center;
 }
 
-.dash {
+.illustration img {
+  width: min(100%, 460px);
+  height: auto;
+  max-height: 360px;
+  object-fit: contain;
+}
+
+.brand-foot {
   position: absolute;
-  inset-inline-start: 12%;
-  bottom: 18%;
-  width: min(78%, 280px);
-  aspect-ratio: 1.35;
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid rgba(148, 163, 184, 0.35);
-  border-radius: var(--radius);
-  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
-  padding: 1rem;
-  backdrop-filter: blur(6px);
-}
-
-.dash-top {
+  inset-inline: 0;
+  bottom: 1.15rem;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
-  background: linear-gradient(145deg, #5eead4, #0d9488);
-}
-
-.bar {
-  height: 8px;
-  border-radius: 999px;
-  background: #e2e8f0;
-  flex: 1;
-}
-
-.bar.short {
-  flex: 0.55;
-}
-
-.chart-line {
-  height: 54px;
-  border-radius: var(--radius);
-  background:
-    linear-gradient(180deg, transparent 55%, rgba(13, 148, 136, 0.12) 55%),
-    radial-gradient(circle at 20% 60%, #14b8a6 3px, transparent 4px),
-    radial-gradient(circle at 45% 35%, #14b8a6 3px, transparent 4px),
-    radial-gradient(circle at 70% 50%, #14b8a6 3px, transparent 4px),
-    radial-gradient(circle at 88% 28%, #14b8a6 3px, transparent 4px);
-  margin-bottom: 0.85rem;
-}
-
-.chart-bars {
-  display: flex;
-  align-items: flex-end;
+  justify-content: center;
   gap: 0.45rem;
-  height: 48px;
+  color: #94a3b8;
+  font-size: 0.8rem;
 }
 
-.chart-bars i {
-  flex: 1;
-  border-radius: 6px 6px 2px 2px;
-  background: linear-gradient(180deg, #5eead4, #0f766e);
-  opacity: 0.85;
+.brand-foot a {
+  color: #94a3b8;
+  text-decoration: none;
 }
 
-.chart-bars i:nth-child(1) { height: 45%; }
-.chart-bars i:nth-child(2) { height: 70%; }
-.chart-bars i:nth-child(3) { height: 55%; }
-.chart-bars i:nth-child(4) { height: 88%; }
-.chart-bars i:nth-child(5) { height: 62%; }
-
-.float {
-  position: absolute;
-  width: 42px;
-  height: 42px;
-  border-radius: var(--radius);
-  background: #fff;
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
-}
-
-.float.chat {
-  top: 18%;
-  inset-inline-end: 8%;
-  background:
-    radial-gradient(circle at 35% 40%, #0d9488 0 28%, transparent 29%),
-    linear-gradient(145deg, #ecfdf5, #fff);
-}
-
-.float.people {
-  top: 42%;
-  inset-inline-start: 4%;
-  background:
-    radial-gradient(circle at 50% 38%, #14b8a6 0 22%, transparent 23%),
-    linear-gradient(145deg, #f0fdfa, #fff);
-}
-
-.float.check {
-  bottom: 28%;
-  inset-inline-end: 6%;
-  background:
-    linear-gradient(135deg, transparent 42%, #10b981 42% 58%, transparent 58%),
-    linear-gradient(45deg, transparent 48%, #10b981 48% 62%, transparent 62%),
-    #ecfdf5;
-}
-
-.float.ring {
-  top: 8%;
-  inset-inline-start: 18%;
-  border-radius: 999px;
-  background:
-    conic-gradient(#0d9488 0 70%, #e2e8f0 70% 100%);
-  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
-}
-
-.plant {
-  position: absolute;
-  bottom: 8%;
-  inset-inline-start: 8%;
-  width: 28px;
-  height: 36px;
-  background:
-    radial-gradient(ellipse at 50% 20%, #34d399 0 35%, transparent 36%),
-    linear-gradient(180deg, #0d9488 0 55%, #134e4a 55%);
-  border-radius: 40% 40% 8px 8px;
-  opacity: 0.9;
+.brand-foot a:hover {
+  color: #0f766e;
 }
 
 @media (min-width: 900px) {
diff --git a/apps/web/src/components/ui/UiInput.vue b/apps/web/src/components/ui/UiInput.vue
index 03c6d68..a857623 100644
--- a/apps/web/src/components/ui/UiInput.vue
+++ b/apps/web/src/components/ui/UiInput.vue
@@ -96,7 +96,7 @@ const model = defineModel<string | number>({ default: '' });
 }
 
 .ui-input::placeholder {
-  color: var(--muted-light);
+  color: #c0c8d4;
 }
 
 .ui-input-wrapper:focus-within {
diff --git a/apps/web/src/components/ui/UiTextarea.vue b/apps/web/src/components/ui/UiTextarea.vue
index f839a6b..cf20ce7 100644
--- a/apps/web/src/components/ui/UiTextarea.vue
+++ b/apps/web/src/components/ui/UiTextarea.vue
@@ -56,7 +56,7 @@ const model = defineModel<string>({ default: '' });
 }
 
 .ui-textarea::placeholder {
-  color: var(--muted-light);
+  color: #c0c8d4;
 }
 
 .ui-textarea:focus {
diff --git a/apps/web/src/styles/main.css b/apps/web/src/styles/main.css
index 1db995a..23ece77 100644
--- a/apps/web/src/styles/main.css
+++ b/apps/web/src/styles/main.css
@@ -247,6 +247,11 @@ textarea {
   border-color: var(--accent);
 }
 
+input::placeholder,
+textarea::placeholder {
+  color: #c0c8d4;
+}
+
 .error {
   color: var(--danger);
   font-size: 0.9rem;
diff --git a/apps/web/src/views/LoginView.vue b/apps/web/src/views/LoginView.vue
index 2e200fc..7a808b9 100644
--- a/apps/web/src/views/LoginView.vue
+++ b/apps/web/src/views/LoginView.vue
@@ -9,6 +9,7 @@ import type { LoginChallengeResponse, LoginOrganizationChoiceResponse } from '@m
 import { USER_ROLE_LABELS } from '@/lib/roles';
 import { brand } from '@mento/shared';
 import BrandName from '@/components/brand/BrandName.vue';
+import UiIcon from '@/components/UiIcon.vue';
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -18,8 +19,8 @@ const route = useRoute();
 const mode = ref<'password' | 'otp'>('password');
 const otpStep = ref<'mobile' | 'code'>('mobile');
 
-const identifier = ref('owner@demo.local');
-const password = ref('demo1234');
+const identifier = ref('');
+const password = ref('');
 const mobile = ref('');
 const showPassword = ref(false);
 const remember = ref(true);
@@ -209,15 +210,17 @@ function cancelOrgChoice() {
                     required
                     autocomplete="username"
                     placeholder="ایمیل یا شماره موبایل خود را وارد کنید"
-                    dir="ltr"
+                    class="ltr-value"
                   />
-                  <span class="ico user" aria-hidden="true" />
+                  <span class="field-ico" aria-hidden="true">
+                    <UiIcon name="user" :size="18" />
+                  </span>
                 </div>
               </div>
 
               <div class="field">
                 <label for="password">رمز عبور</label>
-                <div class="input-wrap">
+                <div class="input-wrap has-eye">
                   <input
                     id="password"
                     v-model="password"
@@ -225,16 +228,18 @@ function cancelOrgChoice() {
                     required
                     autocomplete="current-password"
                     placeholder="رمز عبور خود را وارد کنید"
-                    dir="ltr"
+                    class="ltr-value"
                   />
-                  <span class="ico lock" aria-hidden="true" />
+                  <span class="field-ico" aria-hidden="true">
+                    <UiIcon name="lock" :size="18" />
+                  </span>
                   <button
                     type="button"
                     class="eye"
                     :aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
                     @click="showPassword = !showPassword"
                   >
-                    {{ showPassword ? 'مخفی' : 'نمایش' }}
+                    <UiIcon :name="showPassword ? 'eye-off' : 'eye'" :size="18" />
                   </button>
                 </div>
               </div>
@@ -266,9 +271,11 @@ function cancelOrgChoice() {
                     required
                     autocomplete="tel"
                     placeholder="۰۹۱۲۱۲۳۴۵۶۷"
-                    dir="ltr"
+                    class="ltr-value"
                   />
-                  <span class="ico user" aria-hidden="true" />
+                  <span class="field-ico" aria-hidden="true">
+                    <UiIcon name="phone" :size="18" />
+                  </span>
                 </div>
               </div>
               <p v-if="error" class="error">{{ error }}</p>
@@ -297,7 +304,7 @@ function cancelOrgChoice() {
                     required
                     autocomplete="one-time-code"
                     placeholder="کد را وارد کنید"
-                    dir="ltr"
+                    class="ltr-value"
                   />
                 </div>
               </div>
@@ -339,21 +346,22 @@ function cancelOrgChoice() {
   padding: 1rem;
   padding-bottom: max(1rem, env(safe-area-inset-bottom));
   background:
-    radial-gradient(circle at 90% 0%, rgba(13, 148, 136, 0.08), transparent 36%),
-    var(--bg);
+    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
+    radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1.2px),
+    #f5fbfb;
+  background-size: auto, 20px 20px, auto;
 }
 
 .auth-shell {
   flex: 1;
-  width: min(1040px, 100%);
+  width: min(1100px, 100%);
   margin: 0 auto;
   display: grid;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
   overflow: hidden;
-  min-height: min(640px, calc(100dvh - 5.5rem));
+  min-height: min(680px, calc(100dvh - 5.5rem));
 }
 
 .form-panel {
@@ -361,6 +369,9 @@ function cancelOrgChoice() {
   flex-direction: column;
   padding: clamp(1.2rem, 3vw, 2.4rem);
   min-width: 0;
+  background: #fff;
+  border-radius: 28px;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
 }
 
 .mobile-brand {
@@ -434,6 +445,22 @@ h1 {
   gap: 0.95rem;
 }
 
+.form input {
+  direction: rtl;
+  text-align: right;
+}
+
+.form input::placeholder {
+  direction: rtl;
+  text-align: right;
+  color: #cdd4de;
+}
+
+.form input.ltr-value:not(:placeholder-shown) {
+  direction: ltr;
+  text-align: left;
+}
+
 .input-wrap {
   position: relative;
 }
@@ -446,48 +473,42 @@ h1 {
   background: #fff;
 }
 
+.input-wrap.has-eye input {
+  padding-left: 2.7rem;
+}
+
 .input-wrap input:focus {
   outline: 2px solid var(--accent-soft);
   border-color: var(--accent);
 }
 
-.ico {
+.field-ico {
   position: absolute;
   top: 50%;
-  inset-inline-end: 0.85rem;
+  right: 0.75rem;
+  left: auto;
   transform: translateY(-50%);
-  width: 18px;
-  height: 18px;
-  opacity: 0.45;
+  color: #94a3b8;
+  display: grid;
+  place-items: center;
   pointer-events: none;
 }
 
-.ico.user {
-  background:
-    radial-gradient(circle at 50% 35%, currentColor 0 28%, transparent 29%),
-    radial-gradient(circle at 50% 85%, currentColor 0 38%, transparent 39%);
-  color: #64748b;
-  border-radius: 999px;
-}
-
-.ico.lock {
-  background:
-    linear-gradient(currentColor, currentColor) center 62%/10px 8px no-repeat,
-    radial-gradient(circle at 50% 38%, transparent 34%, currentColor 35% 55%, transparent 56%);
-  color: #64748b;
-}
-
 .eye {
   position: absolute;
   top: 50%;
-  inset-inline-start: 0.55rem;
+  left: 0.45rem;
+  right: auto;
   transform: translateY(-50%);
   border: 0;
   background: transparent;
-  color: var(--muted);
-  font-size: 0.75rem;
+  color: #64748b;
   cursor: pointer;
-  padding: 0.25rem 0.4rem;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
 }
 
 .row-actions {
@@ -612,8 +633,34 @@ h1 {
 }
 
 @media (min-width: 900px) {
+  .auth-page {
+    padding: 0;
+    background: #fff;
+  }
+
   .auth-shell {
-    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
+    width: 100%;
+    min-height: 100dvh;
+    grid-template-columns: minmax(420px, 1fr) minmax(440px, 1.05fr);
+    grid-template-areas: "form brand";
+    background: #fff;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .form-panel {
+    grid-area: form;
+    border-radius: 0;
+    box-shadow: none;
+    background: #fff;
+    justify-content: center;
+  }
+
+  .auth-shell :deep(.brand-panel) {
+    grid-area: brand;
+    height: 100dvh;
+    position: sticky;
+    top: 0;
   }
 
   .mobile-brand {
@@ -621,8 +668,12 @@ h1 {
   }
 
   .form-inner {
-    margin: 0;
+    margin: 0 auto;
     width: min(440px, 100%);
   }
+
+  .auth-footer {
+    display: none;
+  }
 }
 </style>
diff --git a/apps/web/src/views/RegisterView.vue b/apps/web/src/views/RegisterView.vue
index 52ee8ea..cf6bda6 100644
--- a/apps/web/src/views/RegisterView.vue
+++ b/apps/web/src/views/RegisterView.vue
@@ -8,6 +8,7 @@ import MentoLogo from '@/components/brand/MentoLogo.vue';
 import axios from 'axios';
 import { brand, type RegisterChallengeResponse } from '@mento/shared';
 import BrandName from '@/components/brand/BrandName.vue';
+import UiIcon from '@/components/UiIcon.vue';
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -105,10 +106,7 @@ function backToForm() {
 <template>
   <div class="auth-page">
     <div class="auth-shell">
-      <AuthBrandPanel
-        headline="همه ارتباطات، یکجا مدیریت می‌شوند"
-        :description="`با ساخت حساب ${brand.nameFa}، سازمان خود را راه‌اندازی کنید و فروش و پشتیبانی را از یکجا پیش ببرید.`"
-      />
+      <AuthBrandPanel />
 
       <section class="form-panel">
         <header class="mobile-brand">
@@ -134,6 +132,9 @@ function backToForm() {
                   <label for="org">نام سازمان <em>*</em></label>
                   <div class="input-wrap">
                     <input id="org" v-model="organizationName" required placeholder="نام سازمان" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="building" :size="18" />
+                    </span>
                   </div>
                 </div>
                 <div class="field">
@@ -157,7 +158,9 @@ function backToForm() {
                       required
                       placeholder="نام و نام خانوادگی خود را وارد کنید"
                     />
-                    <span class="ico user" aria-hidden="true" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="user" :size="18" />
+                    </span>
                   </div>
                 </div>
                 <div class="field">
@@ -169,9 +172,11 @@ function backToForm() {
                       type="email"
                       required
                       placeholder="ایمیل خود را وارد کنید"
-                      dir="ltr"
+                      class="ltr-value"
                     />
-                    <span class="ico mail" aria-hidden="true" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="mail" :size="18" />
+                    </span>
                   </div>
                 </div>
               </div>
@@ -187,14 +192,16 @@ function backToForm() {
                       type="tel"
                       required
                       placeholder="۹۱۲۱۲۳۴۵۶۷"
-                      dir="ltr"
+                      class="ltr-value"
                     />
-                    <span class="ico phone" aria-hidden="true" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="phone" :size="18" />
+                    </span>
                   </div>
                 </div>
                 <div class="field">
                   <label for="password">رمز عبور <em>*</em></label>
-                  <div class="input-wrap">
+                  <div class="input-wrap has-eye">
                     <input
                       id="password"
                       v-model="password"
@@ -202,15 +209,18 @@ function backToForm() {
                       minlength="6"
                       required
                       placeholder="رمز عبور خود را وارد کنید"
-                      dir="ltr"
+                      class="ltr-value"
                     />
-                    <span class="ico lock" aria-hidden="true" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="lock" :size="18" />
+                    </span>
                     <button
                       type="button"
                       class="eye"
+                      :aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
                       @click="showPassword = !showPassword"
                     >
-                      {{ showPassword ? 'مخفی' : 'نمایش' }}
+                      <UiIcon :name="showPassword ? 'eye-off' : 'eye'" :size="18" />
                     </button>
                   </div>
                 </div>
@@ -219,7 +229,7 @@ function backToForm() {
               <div class="grid-2">
                 <div class="field">
                   <label for="passwordConfirm">تکرار رمز عبور <em>*</em></label>
-                  <div class="input-wrap">
+                  <div class="input-wrap has-eye">
                     <input
                       id="passwordConfirm"
                       v-model="passwordConfirm"
@@ -227,15 +237,18 @@ function backToForm() {
                       minlength="6"
                       required
                       placeholder="رمز عبور خود را تکرار کنید"
-                      dir="ltr"
+                      class="ltr-value"
                     />
-                    <span class="ico lock" aria-hidden="true" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="lock" :size="18" />
+                    </span>
                     <button
                       type="button"
                       class="eye"
+                      :aria-label="showPasswordConfirm ? 'مخفی کردن رمز' : 'نمایش رمز'"
                       @click="showPasswordConfirm = !showPasswordConfirm"
                     >
-                      {{ showPasswordConfirm ? 'مخفی' : 'نمایش' }}
+                      <UiIcon :name="showPasswordConfirm ? 'eye-off' : 'eye'" :size="18" />
                     </button>
                   </div>
                 </div>
@@ -247,7 +260,9 @@ function backToForm() {
                       v-model="referralCode"
                       placeholder="اگر کد معرف دارید وارد کنید"
                     />
-                    <span class="ico gift" aria-hidden="true" />
+                    <span class="field-ico" aria-hidden="true">
+                      <UiIcon name="gift" :size="18" />
+                    </span>
                   </div>
                 </div>
               </div>
@@ -297,7 +312,7 @@ function backToForm() {
                     type="text"
                     inputmode="numeric"
                     required
-                    dir="ltr"
+                    class="ltr-value"
                     placeholder="کد ایمیل"
                   />
                 </div>
@@ -309,7 +324,7 @@ function backToForm() {
                     type="text"
                     inputmode="numeric"
                     required
-                    dir="ltr"
+                    class="ltr-value"
                     placeholder="کد موبایل"
                   />
                 </div>
@@ -349,8 +364,10 @@ function backToForm() {
   padding: 1rem;
   padding-bottom: max(1rem, env(safe-area-inset-bottom));
   background:
-    radial-gradient(circle at 8% 0%, rgba(13, 148, 136, 0.07), transparent 34%),
-    var(--bg);
+    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
+    radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1.2px),
+    #f5fbfb;
+  background-size: auto, 20px 20px, auto;
 }
 
 .auth-shell {
@@ -358,16 +375,18 @@ function backToForm() {
   width: min(1100px, 100%);
   margin: 0 auto;
   display: grid;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
   overflow: hidden;
 }
 
 .form-panel {
   padding: clamp(1rem, 2.5vw, 2rem);
   min-width: 0;
+  background: #fff;
+  border-radius: 28px;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
 }
 
 .mobile-brand {
@@ -466,6 +485,23 @@ h1 {
   padding: 0.8rem 0.95rem;
   width: 100%;
   background: #fff;
+  direction: rtl;
+  text-align: right;
+}
+
+.field select {
+  color: var(--ink);
+}
+
+.form input::placeholder {
+  direction: rtl;
+  text-align: right;
+  color: #cdd4de;
+}
+
+.form input.ltr-value:not(:placeholder-shown) {
+  direction: ltr;
+  text-align: left;
 }
 
 .input-wrap {
@@ -473,16 +509,21 @@ h1 {
 }
 
 .input-wrap input {
-  padding-inline-end: 2.5rem;
+  padding-right: 2.6rem;
+}
+
+.input-wrap.has-eye input {
+  padding-left: 2.7rem;
 }
 
 .mobile-wrap input {
-  padding-inline-start: 3.4rem;
+  padding-left: 3.4rem;
 }
 
 .cc {
   position: absolute;
-  inset-inline-start: 0.7rem;
+  left: 0.7rem;
+  right: auto;
   top: 50%;
   transform: translateY(-50%);
   color: var(--muted);
@@ -490,49 +531,33 @@ h1 {
   pointer-events: none;
 }
 
-.ico {
+.field-ico {
   position: absolute;
   top: 50%;
-  inset-inline-end: 0.8rem;
+  right: 0.7rem;
+  left: auto;
   transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  opacity: 0.45;
+  color: #94a3b8;
+  display: grid;
+  place-items: center;
   pointer-events: none;
-  background: #64748b;
-  border-radius: var(--radius);
-}
-
-.ico.user {
-  border-radius: 999px;
-  background:
-    radial-gradient(circle at 50% 35%, #64748b 0 28%, transparent 29%),
-    radial-gradient(circle at 50% 85%, #64748b 0 38%, transparent 39%);
-}
-
-.ico.mail {
-  background: linear-gradient(#64748b, #64748b);
-  mask: linear-gradient(#000 0 0);
-  opacity: 0.4;
-  border-radius: var(--radius);
-}
-
-.ico.lock,
-.ico.phone,
-.ico.gift {
-  opacity: 0.35;
 }
 
 .eye {
   position: absolute;
   top: 50%;
-  inset-inline-start: 0.45rem;
+  left: 0.35rem;
+  right: auto;
   transform: translateY(-50%);
   border: 0;
   background: transparent;
-  color: var(--muted);
-  font-size: 0.72rem;
+  color: #64748b;
   cursor: pointer;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
 }
 
 .terms {
@@ -618,12 +643,48 @@ h1 {
 }
 
 @media (min-width: 900px) {
+  .auth-page {
+    padding: 0;
+    background: #fff;
+  }
+
   .auth-shell {
-    grid-template-columns: minmax(260px, 0.85fr) minmax(380px, 1.15fr);
+    width: 100%;
+    min-height: 100dvh;
+    grid-template-columns: minmax(420px, 1fr) minmax(440px, 1.05fr);
+    grid-template-areas: "form brand";
+    background: #fff;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .form-panel {
+    grid-area: form;
+    border-radius: 0;
+    box-shadow: none;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .auth-shell :deep(.brand-panel) {
+    grid-area: brand;
+    height: 100dvh;
+    position: sticky;
+    top: 0;
   }
 
   .mobile-brand {
     display: none;
   }
+
+  .form-inner {
+    margin: 0 auto;
+  }
+
+  .auth-footer {
+    display: none;
+  }
 }
 </style>