From c47778e87c7f2bedbea3d0f57fff6c71066813ab Mon Sep 17 00:00:00 2001
From: Chandan-walker <chandan@whozzat.com>
Date: Wed, 25 Feb 2026 17:46:45 +0530
Subject: [PATCH 1/2] version 2 login script changes

---
 .../register/register.component.html          |  53 ++++-
 .../register/register.component.scss          | 152 ++++++++++++++
 .../component/register/register.component.ts  |  56 +++++
 .../send-otp-center.component.html            | 110 ++++++++--
 .../send-otp-center.component.scss            | 150 +++++++++++++-
 .../send-otp-center.component.ts              |  63 ++++++
 .../app/otp/send-otp/send-otp.component.html  |   9 +-
 .../app/otp/send-otp/send-otp.component.ts    | 191 +++++++++++++++---
 apps/proxy-auth/src/otp-global.scss           |   4 +
 9 files changed, 729 insertions(+), 59 deletions(-)

diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.html b/apps/proxy-auth/src/app/otp/component/register/register.component.html
index cf7ec272..77950335 100644
--- a/apps/proxy-auth/src/app/otp/component/register/register.component.html
+++ b/apps/proxy-auth/src/app/otp/component/register/register.component.html
@@ -1,11 +1,11 @@
 <ng-container>
     <div class="dialog-header">
-        <div class="heading">Register</div>
+        <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Register</div>
         <button mat-icon-button class="close-dialog" (click)="close(true)" type="button">
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M11.8334 1.34163L10.6584 0.166626L6.00008 4.82496L1.34175 0.166626L0.166748 1.34163L4.82508 5.99996L0.166748 10.6583L1.34175 11.8333L6.00008 7.17496L10.6584 11.8333L11.8334 10.6583L7.17508 5.99996L11.8334 1.34163Z"
-                    fill="#5D6164"
+                    [attr.fill]="isDarkTheme ? '#ffffff' : '#5D6164'"
                 />
             </svg>
         </button>
@@ -17,8 +17,11 @@
             proxyMarkAllAsTouched
             [buttonRef]="submitBtn"
             (valid)="submit()"
+            [class.custom-radius]="!!borderRadiusValue"
+            [style.--field-border-radius]="borderRadiusValue || '4px'"
+            [class.dark-theme-login]="isDarkTheme"
         >
-            <p class="heading">User Details</p>
+            <p class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">User Details</p>
             <div class="one-line">
                 <ng-container
                     [ngTemplateOutlet]="formField"
@@ -59,8 +62,19 @@
                     <button
                         (click)="isOtpSent ? resendOtp() : getOtp()"
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         [disabled]="(selectGetOtpInProcess$ | async) || (isOtpSent && !canResendOtp)"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '4px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
                     >
                         <span *ngIf="!isOtpSent">
                             {{ (selectGetOtpInProcess$ | async) ? 'Sending...' : 'Get OTP' }}
@@ -170,12 +184,18 @@
                     }"
                 ></ng-container>
             </div>
-            <div class="note">
+            <div class="note" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
                 <span class="subheading">Note: </span>
                 Password should contain atleast one Capital Letter, one Small Letter, one Digit and one Symbol
             </div>
-            <mat-divider *ngIf="showCompanyDetail" class="company-details"></mat-divider>
-            <div *ngIf="showCompanyDetail" class="heading">Company Details (Optional)</div>
+            <mat-divider
+                *ngIf="showCompanyDetail"
+                class="company-details"
+                [class.dark-divider]="isDarkTheme"
+            ></mat-divider>
+            <div *ngIf="showCompanyDetail" class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
+                Company Details (Optional)
+            </div>
             <ng-container
                 *ngIf="showCompanyDetail"
                 [ngTemplateOutlet]="formField"
@@ -212,7 +232,24 @@
                     </ng-container>
                 </div>
                 <div class="submit-btn">
-                    <button #submitBtn mat-flat-button color="primary">Submit</button>
+                    <button
+                        #submitBtn
+                        mat-flat-button
+                        [color]="buttonColor ? null : 'primary'"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '4px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
+                    >
+                        Submit
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.scss b/apps/proxy-auth/src/app/otp/component/register/register.component.scss
index bf767ba2..6e2e8013 100644
--- a/apps/proxy-auth/src/app/otp/component/register/register.component.scss
+++ b/apps/proxy-auth/src/app/otp/component/register/register.component.scss
@@ -263,3 +263,155 @@ input[matinput]::-webkit-inner-spin-button {
 .verify-otp-link {
     font-size: 12px;
 }
+
+.form-wrapper.custom-radius {
+    --mdc-outlined-text-field-container-shape: var(--field-border-radius, 4px);
+    --mdc-filled-text-field-container-shape: var(--field-border-radius, 4px);
+    --mat-form-field-container-shape: var(--field-border-radius, 4px);
+    --mdc-shape-small: var(--field-border-radius, 4px);
+}
+
+:host ::ng-deep .form-wrapper.custom-radius {
+    .mat-mdc-text-field-wrapper,
+    .mdc-text-field--outlined {
+        border-radius: var(--field-border-radius, 4px) !important;
+    }
+
+    .mdc-notched-outline__leading {
+        border-radius: var(--field-border-radius, 4px) 0 0 var(--field-border-radius, 4px) !important;
+        width: var(--field-border-radius, 4px) !important;
+    }
+
+    .mdc-notched-outline__trailing {
+        border-radius: 0 var(--field-border-radius, 4px) var(--field-border-radius, 4px) 0 !important;
+    }
+
+    .mat-form-field-outline-start {
+        border-radius: var(--field-border-radius, 4px) 0 0 var(--field-border-radius, 4px) !important;
+        width: var(--field-border-radius, 4px) !important;
+    }
+
+    .mat-form-field-outline-end {
+        border-radius: 0 var(--field-border-radius, 4px) var(--field-border-radius, 4px) 0 !important;
+    }
+
+    .mat-form-field-wrapper,
+    .mat-form-field-flex,
+    .mat-mdc-form-field-flex {
+        border-radius: var(--field-border-radius, 4px) !important;
+    }
+
+    .mat-mdc-raised-button,
+    .mat-mdc-flat-button,
+    .mat-mdc-unelevated-button,
+    .mat-raised-button,
+    .mat-flat-button {
+        border-radius: var(--field-border-radius, 4px) !important;
+    }
+
+    .register-user-details {
+        .iti {
+            border-radius: var(--field-border-radius, 4px) !important;
+        }
+
+        input[type='tel'] {
+            border-radius: var(--field-border-radius, 4px) !important;
+        }
+    }
+}
+.register-user-details {
+    border-radius: var(--field-border-radius, 4px) !important;
+}
+
+// Dark theme styles
+.dark-text {
+    color: #ffffff !important;
+
+    a {
+        color: #ffffff !important;
+    }
+}
+
+.dark-divider {
+    border-top-color: #ffffff !important;
+}
+
+:host ::ng-deep .form-wrapper.dark-theme-login {
+    .mat-mdc-text-field-wrapper,
+    .mdc-text-field--outlined {
+        background-color: transparent !important;
+    }
+
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+        border-color: #ffffff !important;
+    }
+
+    .mat-mdc-form-field-flex {
+        background-color: transparent !important;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label,
+    .mat-mdc-form-field .mdc-floating-label {
+        color: #ffffff !important;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input,
+    .mat-mdc-input-element {
+        color: #ffffff !important;
+    }
+
+    // Legacy Material — use `color` on outline containers so children
+    // inherit via `currentColor`, preserving the gap's transparent top border
+    .mat-form-field-appearance-outline {
+        .mat-form-field-outline,
+        .mat-form-field-outline-thick {
+            color: #ffffff !important;
+        }
+
+        &.mat-form-field-invalid {
+            .mat-form-field-outline,
+            .mat-form-field-outline-thick {
+                color: red !important;
+            }
+        }
+    }
+
+    .mat-form-field-flex {
+        background-color: transparent !important;
+    }
+
+    .mat-input-element {
+        color: #ffffff !important;
+    }
+
+    .mat-form-field-label {
+        color: #ffffff !important;
+    }
+
+    .register-user-details {
+        input[type='tel'],
+        [id^='init-contact'] {
+            border-color: #ffffff !important;
+            color: #ffffff !important;
+            background-color: #616161 !important;
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.7) !important;
+            }
+        }
+
+        .iti__selected-flag {
+            background-color: #616161 !important;
+        }
+
+        .iti__arrow {
+            border-top-color: #ffffff;
+        }
+
+        .iti__dial-code {
+            color: #ffffff !important;
+        }
+    }
+}
diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.ts b/apps/proxy-auth/src/app/otp/component/register/register.component.ts
index 72831308..54e01c6e 100644
--- a/apps/proxy-auth/src/app/otp/component/register/register.component.ts
+++ b/apps/proxy-auth/src/app/otp/component/register/register.component.ts
@@ -34,6 +34,7 @@ import {
     selectVerifyOtpV2InProcess,
     selectVerifyOtpV2Success,
     selectApiErrorResponse,
+    selectWidgetTheme,
 } from '../../store/selectors';
 import { IGetOtpRes } from '../../model/otp';
 
@@ -49,6 +50,8 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     @Input() public registrationViaLogin: boolean;
     @Input() public prefillDetails;
     @Input() public showCompanyDetails: boolean = true;
+    @Input() public version: string = 'v1';
+    @Input() public theme: string;
     public showPassword: boolean = false;
     public showConfirmPassword: boolean = false;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
@@ -121,6 +124,9 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     public lastSentMobileNumber: string = '';
     private timerSubscription: Subscription;
 
+    public selectWidgetTheme$: Observable<any>;
+    public uiPreferences: any = {};
+
     @ViewChild('otp1', { static: false }) otp1Ref: ElementRef;
     @ViewChild('otp2', { static: false }) otp2Ref: ElementRef;
     @ViewChild('otp3', { static: false }) otp3Ref: ElementRef;
@@ -168,9 +174,17 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             distinctUntilChanged(_.isEqual),
             takeUntil(this.destroy$)
         );
+        this.selectWidgetTheme$ = this.store.pipe(
+            select(selectWidgetTheme),
+            distinctUntilChanged(_.isEqual),
+            takeUntil(this.destroy$)
+        );
     }
 
     ngOnInit(): void {
+        this.selectWidgetTheme$.pipe(takeUntil(this.destroy$)).subscribe((theme) => {
+            this.uiPreferences = theme?.ui_preferences || {};
+        });
         this.registrationForm
             .get('user.mobile')
             .valueChanges.pipe(takeUntil(this.destroy$))
@@ -601,4 +615,46 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         this.otpForm.reset();
         this.cdr.detectChanges();
     }
+
+    public get primaryColor(): string | null {
+        if (this.version !== 'v2') {
+            return null;
+        }
+        const isDark = this.theme === 'dark';
+        return isDark
+            ? this.uiPreferences?.dark_theme_primary_color || null
+            : this.uiPreferences?.light_theme_primary_color || null;
+    }
+
+    public get borderRadiusValue(): string | null {
+        if (this.version !== 'v2') {
+            return null;
+        }
+        switch (this.uiPreferences?.border_radius) {
+            case 'none':
+                return '0';
+            case 'small':
+                return '4px';
+            case 'medium':
+                return '8px';
+            case 'large':
+                return '12px';
+            default:
+                return null;
+        }
+    }
+
+    public get buttonColor(): string | null {
+        if (this.version !== 'v2') return null;
+        return this.uiPreferences?.button_color || null;
+    }
+
+    public get buttonTextColor(): string | null {
+        if (this.version !== 'v2') return null;
+        return this.uiPreferences?.button_text_color || null;
+    }
+
+    public get isDarkTheme(): boolean {
+        return this.theme === 'dark';
+    }
 }
diff --git a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html
index bbed09e7..25169fc6 100644
--- a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html
+++ b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html
@@ -3,13 +3,13 @@
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M11.8334 1.34163L10.6584 0.166626L6.00008 4.82496L1.34175 0.166626L0.166748 1.34163L4.82508 5.99996L0.166748 10.6583L1.34175 11.8333L6.00008 7.17496L10.6584 11.8333L11.8334 10.6583L7.17508 5.99996L11.8334 1.34163Z"
-                fill="#5D6164"
+                [attr.fill]="isDarkTheme ? '#ffffff' : '#5D6164'"
             />
         </svg>
     </button>
     <div class="otp-verification-content button-gap">
         <ng-container *ngIf="selectWidgetData$ | async as widgetDataArray">
-            <!-- Login Title - Always at top -->
+            <!-- Logo + Login Title - Always at top -->
             <ng-container *ngFor="let widgetData of widgetDataArray">
                 <ng-container
                     *ngIf="
@@ -18,7 +18,17 @@
                         loginStep === 1
                     "
                 >
-                    <div class="heading">Login</div>
+                    <ng-container *ngIf="selectWidgetTheme$ | async as widgetTheme">
+                        <div class="logo-container" *ngIf="widgetTheme?.ui_preferences?.logo_url">
+                            <img
+                                [src]="widgetTheme.ui_preferences.logo_url"
+                                alt="Logo"
+                                class="logo-image"
+                                loading="lazy"
+                            />
+                        </div>
+                    </ng-container>
+                    <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">{{ titleText }}</div>
                 </ng-container>
             </ng-container>
 
@@ -60,7 +70,7 @@
 
             <!-- Create Account - Always at bottom -->
             <ng-container *ngIf="loginStep === 1 && widgetDataArray?.length && isCreateAccountLink">
-                <p class="create-account">
+                <p class="create-account" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
                     Are you a new User?
                     <a href="javascript:void(0)" (click)="showRegistration()"> Create an account</a>
                 </p>
@@ -116,7 +126,9 @@
             >
                 <div class="divider-container" *ngIf="hasOtherAuthOptions(widgetDataArray)">
                     <div class="divider-line"></div>
-                    <span class="divider-text">OR</span>
+                    <span class="divider-text" [ngStyle]="primaryColor ? { color: primaryColor } : {}"
+                        >Or continue with
+                    </span>
                     <div class="divider-line"></div>
                 </div>
             </ng-container>
@@ -129,7 +141,14 @@
             <ng-container
                 *ngIf="widgetData?.service_id === featureServiceIds.PasswordAuthentication && version === 'v2'"
             >
-                <div class="login-section" *ngIf="loginStep === 1" [formGroup]="loginForm">
+                <div
+                    class="login-section"
+                    *ngIf="loginStep === 1"
+                    [formGroup]="loginForm"
+                    [class.custom-radius]="!!borderRadiusValue"
+                    [style.--field-border-radius]="borderRadiusValue || '8px'"
+                    [class.dark-theme-login]="isDarkTheme"
+                >
                     <mat-form-field
                         appearance="outline"
                         class="input-width"
@@ -145,7 +164,7 @@
                         <mat-error *ngIf="userNameControl.errors?.required"
                             >Email or Mobile number is required.</mat-error
                         >
-                        <mat-hint class="note">
+                        <mat-hint class="note" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
                             <span class="subheading">Note:</span> Please enter your Mobile number with the country code
                             (e.g. 91)
                         </mat-hint>
@@ -198,10 +217,21 @@
                         </p>
                         <button
                             mat-flat-button
-                            color="primary"
+                            [color]="buttonColor ? null : 'primary'"
                             (click)="login()"
                             [disabled]="isLoginLoading$ | async"
                             class="w-100"
+                            [ngStyle]="
+                                buttonColor
+                                    ? {
+                                          'background-color': buttonColor,
+                                          color: buttonTextColor || '#ffffff',
+                                          'border-radius': borderRadiusValue || '8px'
+                                      }
+                                    : borderRadiusValue
+                                    ? { 'border-radius': borderRadiusValue }
+                                    : {}
+                            "
                         >
                             <div class="loader">
                                 <mat-spinner matPrefix diameter="20" *ngIf="isLoginLoading$ | async"></mat-spinner>
@@ -212,19 +242,26 @@
                 </div>
 
                 <!-- Step 2: Reset Password (Send OTP) -->
-                <div class="login-section" *ngIf="loginStep === 2" [formGroup]="sendOtpLoginForm">
+                <div
+                    class="login-section"
+                    *ngIf="loginStep === 2"
+                    [formGroup]="sendOtpLoginForm"
+                    [class.custom-radius]="!!borderRadiusValue"
+                    [style.--field-border-radius]="borderRadiusValue || '8px'"
+                    [class.dark-theme-login]="isDarkTheme"
+                >
                     <button mat-icon-button class="back-button" (click)="changeLoginStep(1)" type="button">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             height="16px"
                             viewBox="0 -960 960 960"
                             width="16px"
-                            fill="#5f6368"
+                            [attr.fill]="isDarkTheme ? '#ffffff' : '#5f6368'"
                         >
                             <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" />
                         </svg>
                     </button>
-                    <div class="heading">Reset Password</div>
+                    <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Reset Password</div>
 
                     <mat-form-field appearance="outline" class="input-width">
                         <mat-label>Email or Mobile</mat-label>
@@ -246,10 +283,21 @@
 
                     <button
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         (click)="sendResetPasswordOtp()"
                         [disabled]="isLoginLoading$ | async"
                         class="w-100"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '8px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
                     >
                         <div class="loader">
                             <mat-spinner matPrefix diameter="20" *ngIf="isLoginLoading$ | async"></mat-spinner>
@@ -259,19 +307,26 @@
                 </div>
 
                 <!-- Step 3: Change Password (Verify OTP) -->
-                <div class="login-section" *ngIf="loginStep === 3" [formGroup]="resetPasswordForm">
+                <div
+                    class="login-section"
+                    *ngIf="loginStep === 3"
+                    [formGroup]="resetPasswordForm"
+                    [class.custom-radius]="!!borderRadiusValue"
+                    [style.--field-border-radius]="borderRadiusValue || '8px'"
+                    [class.dark-theme-login]="isDarkTheme"
+                >
                     <button mat-icon-button class="back-button" (click)="changeLoginStep(2)" type="button">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             height="16px"
                             viewBox="0 -960 960 960"
                             width="16px"
-                            fill="#5f6368"
+                            [attr.fill]="isDarkTheme ? '#ffffff' : '#5f6368'"
                         >
                             <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" />
                         </svg>
                     </button>
-                    <div class="heading">Change Password</div>
+                    <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Change Password</div>
 
                     <p class="user-info">
                         {{ sendOtpLoginForm.get('userDetails').value }}
@@ -364,10 +419,21 @@
 
                     <button
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         (click)="verifyResetPasswordOtp()"
                         [disabled]="isLoginLoading$ | async"
                         class="w-100"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '8px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
                     >
                         <div class="loader">
                             <mat-spinner matPrefix diameter="20" *ngIf="isLoginLoading$ | async"></mat-spinner>
@@ -399,12 +465,15 @@
                             (click)="onVerificationBtnClick(widgetData)"
                             class="auth-icon-btn"
                             type="button"
+                            [ngStyle]="borderRadiusValue ? { 'border-radius': borderRadiusValue } : {}"
+                            [class.dark-theme]="isDarkTheme"
                         >
                             <img
                                 [src]="widgetData.icon"
                                 [alt]="widgetData.text"
                                 class="auth-icon-only"
                                 loading="lazy"
+                                [class.dark-invert]="isDarkTheme && widgetData.text?.toLowerCase()?.includes('apple')"
                             />
                         </button>
                     </ng-container>
@@ -428,6 +497,8 @@
                             mat-stroked-button
                             (click)="onVerificationBtnClick(widgetData)"
                             class="auth-option-btn"
+                            [ngStyle]="borderRadiusValue ? { 'border-radius': borderRadiusValue } : {}"
+                            [class.dark-theme]="isDarkTheme"
                         >
                             <div class="auth-option-content">
                                 <img
@@ -435,8 +506,13 @@
                                     [alt]="widgetData.text"
                                     class="auth-option-icon"
                                     loading="lazy"
+                                    [class.dark-invert]="
+                                        isDarkTheme && widgetData.text?.toLowerCase()?.includes('apple')
+                                    "
                                 />
-                                <span class="auth-option-text">{{ widgetData.text }}</span>
+                                <span class="auth-option-text" [class.dark-theme]="isDarkTheme">{{
+                                    widgetData.text
+                                }}</span>
                             </div>
                         </button>
                     </ng-container>
diff --git a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss
index 7fc87fb6..7c03a515 100644
--- a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss
+++ b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss
@@ -74,6 +74,65 @@ input[matinput]::-webkit-inner-spin-button {
     width: 100%;
 }
 
+.login-section.custom-radius {
+    --mdc-outlined-text-field-container-shape: var(--field-border-radius, 8px);
+    --mdc-filled-text-field-container-shape: var(--field-border-radius, 8px);
+    --mat-form-field-container-shape: var(--field-border-radius, 8px);
+    --mdc-shape-small: var(--field-border-radius, 8px);
+
+    ::ng-deep {
+        .mat-mdc-text-field-wrapper,
+        .mdc-text-field--outlined {
+            border-radius: var(--field-border-radius, 8px) !important;
+        }
+
+        .mdc-notched-outline__leading {
+            border-radius: var(--field-border-radius, 8px) 0 0 var(--field-border-radius, 8px) !important;
+            width: var(--field-border-radius, 8px) !important;
+        }
+
+        .mdc-notched-outline__trailing {
+            border-radius: 0 var(--field-border-radius, 8px) var(--field-border-radius, 8px) 0 !important;
+        }
+
+        // Legacy Material
+        .mat-form-field-outline-start {
+            border-radius: var(--field-border-radius, 8px) 0 0 var(--field-border-radius, 8px) !important;
+            width: var(--field-border-radius, 8px) !important;
+        }
+
+        .mat-form-field-outline-end {
+            border-radius: 0 var(--field-border-radius, 8px) var(--field-border-radius, 8px) 0 !important;
+        }
+
+        .mat-form-field-wrapper,
+        .mat-form-field-flex {
+            border-radius: var(--field-border-radius, 8px) !important;
+        }
+
+        .mat-mdc-raised-button,
+        .mat-mdc-flat-button,
+        .mat-mdc-unelevated-button,
+        .mat-raised-button,
+        .mat-flat-button {
+            border-radius: var(--field-border-radius, 8px) !important;
+        }
+    }
+}
+
+.logo-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12px;
+}
+
+.logo-image {
+    max-height: 48px;
+    max-width: 200px;
+    object-fit: contain;
+}
+
 .heading {
     font-size: 16px;
     line-height: 20px;
@@ -215,7 +274,7 @@ p {
     width: 100%;
     height: 44px;
     border: 1px solid #7d7c7c !important;
-    border-radius: 8px !important;
+    border-radius: 8px;
     font-size: 14px;
     font-weight: 600;
     background-color: #fff !important;
@@ -259,7 +318,7 @@ p {
     width: 56px !important;
     height: 56px !important;
     border: 1px solid #d1d5db !important;
-    border-radius: 8px !important;
+    border-radius: 8px;
     background-color: #fff !important;
     display: flex;
     align-items: center;
@@ -278,3 +337,90 @@ p {
     width: 24px;
     object-fit: contain;
 }
+
+// Dark theme styles
+.dark-text {
+    color: #ffffff !important;
+
+    a {
+        color: #ffffff !important;
+    }
+}
+
+.dark-theme-login {
+    ::ng-deep {
+        .mat-mdc-text-field-wrapper,
+        .mdc-text-field--outlined {
+            background-color: transparent !important;
+        }
+
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+            border-color: #ffffff !important;
+        }
+
+        .mat-mdc-form-field-flex {
+            background-color: transparent !important;
+        }
+
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label,
+        .mat-mdc-form-field .mdc-floating-label {
+            color: #ffffff !important;
+        }
+
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input,
+        .mat-mdc-input-element {
+            color: #ffffff !important;
+        }
+
+        // Legacy Material — set `color` on outline containers so children
+        // inherit it via `border-color: currentColor`. Angular Material's own
+        // `border-top-color: transparent` on the gap when the label floats
+        // has higher specificity and remains unaffected.
+        .mat-form-field-appearance-outline {
+            .mat-form-field-outline,
+            .mat-form-field-outline-thick {
+                color: #ffffff !important;
+            }
+
+            &.mat-form-field-invalid {
+                .mat-form-field-outline,
+                .mat-form-field-outline-thick {
+                    color: red !important;
+                }
+            }
+        }
+
+        .mat-form-field-flex {
+            background-color: transparent !important;
+        }
+
+        .mat-input-element {
+            color: #ffffff !important;
+        }
+
+        .mat-form-field-label {
+            color: #ffffff !important;
+        }
+    }
+}
+
+.auth-option-btn.dark-theme {
+    background-color: transparent !important;
+    border-color: #ffffff !important;
+}
+
+.auth-option-icon.dark-invert,
+.auth-icon-only.dark-invert {
+    filter: invert(1);
+}
+
+.auth-option-text.dark-theme {
+    color: #ffffff;
+}
+
+.auth-icon-btn.dark-theme {
+    background-color: transparent !important;
+    border-color: #ffffff !important;
+}
diff --git a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts
index be823af8..5a5cc265 100644
--- a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts
+++ b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts
@@ -39,6 +39,7 @@ import {
     selectVerifyOtpInProcess,
     selectVerifyOtpSuccess,
     selectWidgetData,
+    selectWidgetTheme,
 } from '../../store/selectors';
 import { isEqual } from 'lodash-es';
 import { debounceTime, distinctUntilChanged, skip, take, takeUntil } from 'rxjs/operators';
@@ -109,6 +110,7 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
     public selectVerifyOtpSuccess$: Observable<boolean>;
 
     public selectWidgetData$: Observable<any>;
+    public selectWidgetTheme$: Observable<any>;
     public selectGetOtpRes$: Observable<IGetOtpRes>;
     public selectResendCount$: Observable<number>;
     public selectApiErrorResponse$: Observable<any>;
@@ -176,6 +178,8 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
     public otpData$: Observable<any>;
     public resetPasswordResult$: Observable<any>;
 
+    public uiPreferences: any = {};
+
     constructor(
         private store: Store<IAppState>,
         private cdr: ChangeDetectorRef,
@@ -242,6 +246,7 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
             takeUntil(this.destroy$)
         );
         this.selectWidgetData$ = this.store.pipe(select(selectWidgetData), takeUntil(this.destroy$));
+        this.selectWidgetTheme$ = this.store.pipe(select(selectWidgetTheme), takeUntil(this.destroy$));
         this.isLoginLoading$ = this.loginComponentStore.isLoading$;
         this.otpData$ = this.loginComponentStore.otpdata$;
         this.resetPasswordResult$ = this.loginComponentStore.resetPassword$;
@@ -344,6 +349,10 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
                 }
             });
 
+        this.selectWidgetTheme$.pipe(filter(Boolean), takeUntil(this.destroy$)).subscribe((theme) => {
+            this.uiPreferences = theme?.ui_preferences || {};
+        });
+
         // Subscribe to forgot password mode from service
         this.otpWidgetService.forgotPasswordMode.pipe(takeUntil(this.destroy$)).subscribe((mode) => {
             if (mode.active) {
@@ -625,6 +634,60 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
         this.loginComponentStore.verfyPasswordOtp(verifyOtpData);
     }
 
+    public get titleText(): string {
+        if (this.version === SendOtpCenterVersion.V2 && this.uiPreferences?.title) {
+            return this.uiPreferences.title;
+        }
+        return 'Login';
+    }
+
+    public get primaryColor(): string | null {
+        if (this.version !== SendOtpCenterVersion.V2) {
+            return null;
+        }
+        const isDark = this.theme === 'dark';
+        return isDark
+            ? this.uiPreferences?.dark_theme_primary_color || null
+            : this.uiPreferences?.light_theme_primary_color || null;
+    }
+
+    public get borderRadiusValue(): string | null {
+        if (this.version !== SendOtpCenterVersion.V2) {
+            return null;
+        }
+        switch (this.uiPreferences?.border_radius) {
+            case 'none':
+                return '0';
+            case 'small':
+                return '4px';
+            case 'medium':
+                return '8px';
+            case 'large':
+                return '12px';
+            default:
+                return null;
+        }
+    }
+
+    public get buttonColor(): string | null {
+        if (this.version !== SendOtpCenterVersion.V2) return null;
+        return this.uiPreferences?.button_color || null;
+    }
+
+    public get buttonHoverColor(): string | null {
+        if (this.version !== SendOtpCenterVersion.V2) return null;
+        return this.uiPreferences?.button_hover_color || null;
+    }
+
+    public get buttonTextColor(): string | null {
+        if (this.version !== SendOtpCenterVersion.V2) return null;
+        return this.uiPreferences?.button_text_color || null;
+    }
+
+    public get isDarkTheme(): boolean {
+        return this.theme === 'dark';
+    }
+
     private startResetPasswordTimer(): void {
         this.remainingSeconds = 15;
         this.resetPasswordTimerSubscription = interval(1000).subscribe(() => {
diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html
index e95ddf11..45ec9db2 100644
--- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html
+++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html
@@ -9,8 +9,13 @@
 >
     <div
         class="otp-verification-dialog"
-        [ngClass]="{ 'animation-complete': animate, 'register-user': showRegistration | async }"
+        [ngClass]="{
+            'animation-complete': animate,
+            'register-user': showRegistration | async,
+            'dark-theme': theme === 'dark'
+        }"
         *ngIf="!authToken && type !== 'subscription' && type !== 'user-management'"
+        [ngStyle]="dialogBorderRadius ? { 'border-radius': dialogBorderRadius } : {}"
     >
         <mat-progress-bar
             mode="indeterminate"
@@ -42,6 +47,8 @@
             [loginServiceData]="loginWidgetData"
             [registrationViaLogin]="registrationViaLogin"
             [showCompanyDetails]="showCompanyDetails"
+            [version]="version"
+            [theme]="theme"
             (togglePopUp)="setShowRegistration(false)"
             (successReturn)="setShowRegistration(false)"
             (failureReturn)="returnFailureObj($event)"
diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
index f44e9e96..11a32a43 100644
--- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
+++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
@@ -110,6 +110,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
     public showLogin: BehaviorSubject<boolean> = this.otpWidgetService.showlogin;
     public showSkeleton: boolean = false;
     public upgradeSubscriptionData: any;
+    public dialogBorderRadius: string = null;
     private createAccountTextAppended: boolean = false; // Flag to track if create account text has been appended
     private hcaptchaLoading: boolean = false;
     private hcaptchaRenderQueue: Array<() => void> = [];
@@ -152,14 +153,15 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             this.theme = prefersDark.matches ? Theme.DARK : Theme.LIGHT;
         }
         this.selectWidgetTheme$.pipe(filter(Boolean), takeUntil(this.destroy$)).subscribe((theme) => {
-            if (theme?.theme !== Theme.SYSTEM) {
-                this.theme = theme?.theme || theme;
+            if (theme?.ui_preferences?.theme !== Theme.SYSTEM) {
+                this.theme = theme?.ui_preferences.theme || theme;
             }
             this.loginWidgetData = theme?.registerState;
-            this.version = theme?.version || 'v1';
-            this.input_fields = theme?.input_fields || 'top';
-            this.show_social_login_icons = theme?.icons || false;
-            this.isCreateAccountTextAppended = theme?.create_account_link || false;
+            this.version = theme?.ui_preferences?.version || 'v1';
+            this.input_fields = theme?.ui_preferences?.input_fields || 'top';
+            this.show_social_login_icons = theme?.ui_preferences?.icons || false;
+            this.isCreateAccountTextAppended = theme?.ui_preferences?.create_account_link || false;
+            this.dialogBorderRadius = this.getBorderRadiusCssValue(theme?.ui_preferences?.border_radius);
         });
         if (this.type === 'subscription') {
             // Load subscription plans first
@@ -1051,11 +1053,82 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             });
     }
 
+    /**
+     * Maps ui_preferences.border_radius to CSS value.
+     * Values: 'none' | 'small' | 'medium' | 'large' -> 0 | 4px | 8px | 12px
+     */
+    private getBorderRadiusCssValue(borderRadius?: string): string {
+        if (this.version !== SendOtpCenterVersion.V2) {
+            return '8px';
+        }
+        switch (borderRadius) {
+            case 'none':
+                return '0';
+            case 'small':
+                return '4px';
+            case 'medium':
+                return '8px';
+            case 'large':
+                return '12px';
+            default:
+                return '8px';
+        }
+    }
+
+    /**
+     * Returns primary color from ui_preferences for the current effective theme.
+     * If theme is 'system', resolves via prefers-color-scheme.
+     */
+    private getPrimaryColorForCurrentTheme(uiPreferences?: {
+        light_theme_primary_color?: string;
+        dark_theme_primary_color?: string;
+    }): string {
+        const isDark =
+            this.theme === Theme.DARK ||
+            this.theme === 'dark' ||
+            (this.theme === Theme.SYSTEM &&
+                typeof window !== 'undefined' &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (this.version !== SendOtpCenterVersion.V2) {
+            return isDark ? '#FFFFFF' : '#000000';
+        }
+        return isDark
+            ? uiPreferences?.dark_theme_primary_color ?? '#FFFFFF'
+            : uiPreferences?.light_theme_primary_color ?? '#000000';
+    }
+
+    private createLogoElement(logoUrl: string): HTMLElement | null {
+        if (!logoUrl) {
+            return null;
+        }
+        const wrapper: HTMLElement = this.renderer.createElement('div');
+        wrapper.style.cssText = `
+            width: 316px;
+            display: flex;
+            justify-content: center;
+            margin: 0 8px 12px 8px;
+        `;
+        const img: HTMLImageElement = this.renderer.createElement('img');
+        img.src = logoUrl;
+        img.alt = 'Logo';
+        img.loading = 'lazy';
+        img.style.cssText = `
+            max-height: 48px;
+            max-width: 200px;
+            object-fit: contain;
+        `;
+        this.renderer.appendChild(wrapper, img);
+        return wrapper;
+    }
+
     public appendPasswordAuthenticationButtonV2(element, buttonsData, totalButtons: number): void {
         if (this.showSkeleton) {
             this.showSkeleton = false;
             this.removeSkeletonLoader(element);
         }
+        const selectWidgetTheme = this.getValueFromObservable(this.selectWidgetTheme$);
+        const borderRadius = this.getBorderRadiusCssValue(selectWidgetTheme?.ui_preferences?.border_radius);
+        const primaryColor = this.getPrimaryColorForCurrentTheme(selectWidgetTheme?.ui_preferences);
 
         const loginContainer: HTMLElement = this.renderer.createElement('div');
         loginContainer.style.cssText = `
@@ -1067,15 +1140,16 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             gap: 8px;
             box-sizing: border-box;
             font-family: 'Inter', sans-serif;
+            border-radius: ${borderRadius};
         `;
 
         const title: HTMLElement = this.renderer.createElement('div');
-        title.textContent = 'Login';
+        title.textContent = selectWidgetTheme?.ui_preferences?.title;
         title.style.cssText = `
             font-size: 16px;
             line-height: 20px;
             font-weight: 600;
-            color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
+            color: ${primaryColor};
             margin: 0 8px 20px 8px;
             text-align: center;
             width: 316px;
@@ -1105,7 +1179,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             height: 44px;
             padding: 0 16px;
             border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #cbd5e1'};
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             background: ${this.theme === 'dark' ? 'transparent' : '#ffffff'};
             color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
             font-size: 14px;
@@ -1115,10 +1189,11 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
 
         const usernameNote: HTMLElement = this.renderer.createElement('p');
         usernameNote.textContent = 'Note: Please enter your Mobile number with the country code (e.g. 91)';
+        const noteColor = this.version === 'v2' ? primaryColor : this.theme === 'dark' ? '#e5e7eb' : '#5d6164';
         usernameNote.style.cssText = `
             font-size: 12px;
             line-height: 18px;
-            color: ${this.theme === 'dark' ? '#e5e7eb' : '#5d6164'};
+            color: ${noteColor};
             margin: 0;
         `;
 
@@ -1150,7 +1225,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             height: 44px;
             padding: 0 44px 0 16px;
             border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #cbd5e1'};
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             background: ${this.theme === 'dark' ? 'transparent' : '#ffffff'};
             color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
             font-size: 14px;
@@ -1173,6 +1248,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         hcaptchaPlaceholder.style.cssText = `
             display: inline-block;
             background: ${this.theme === 'dark' ? 'transparent' : 'transparent'};
+            border-radius: ${borderRadius};
         `;
         this.renderer.appendChild(hcaptchaWrapper, hcaptchaPlaceholder);
 
@@ -1189,14 +1265,18 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         `;
 
         const loginButton: HTMLButtonElement = this.renderer.createElement('button');
-        loginButton.textContent = 'Login';
+        loginButton.textContent = 'Sign in';
+        const isV2 = this.version === SendOtpCenterVersion.V2;
+        const buttonColor = isV2 ? selectWidgetTheme?.ui_preferences?.button_color || '#3f51b5' : '#3f51b5';
+        const buttonHoverColor = isV2 ? selectWidgetTheme?.ui_preferences?.button_hover_color || '#303f9f' : '#303f9f';
+        const buttonTextColor = isV2 ? selectWidgetTheme?.ui_preferences?.button_text_color || '#ffffff' : '#ffffff';
         loginButton.style.cssText = `
             height: 36px;
             padding: 0 12px;
-            background-color: #3f51b5;
-            color: #ffffff;
+            background-color: ${buttonColor};
+            color: ${buttonTextColor};
             border: none;
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
@@ -1204,6 +1284,12 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             box-shadow: 0 1px 2px rgba(0,0,0,0.08);
             margin-top: 4px;
         `;
+        loginButton.addEventListener('mouseenter', () => {
+            if (buttonHoverColor) loginButton.style.backgroundColor = buttonHoverColor;
+        });
+        loginButton.addEventListener('mouseleave', () => {
+            if (buttonColor) loginButton.style.backgroundColor = buttonColor;
+        });
 
         const forgotPasswordWrapper: HTMLElement = this.renderer.createElement('div');
         forgotPasswordWrapper.style.cssText = `
@@ -1299,9 +1385,21 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         // Position login form based on input_fields setting
         const isInputFieldsTop = this.input_fields === 'top';
 
-        // Always insert the "Login" title at the very top
-        if (element.firstChild) {
-            this.renderer.insertBefore(element, title, element.firstChild);
+        // Insert logo above the title if logo_url is available
+        const logoUrl = selectWidgetTheme?.ui_preferences?.logo_url;
+        const logoElement = this.createLogoElement(logoUrl);
+        if (logoElement) {
+            if (element.firstChild) {
+                this.renderer.insertBefore(element, logoElement, element.firstChild);
+            } else {
+                this.renderer.appendChild(element, logoElement);
+            }
+        }
+
+        // Always insert the "Login" title at the very top (after logo if present)
+        const logoOrFirst = logoElement ? logoElement.nextSibling : element.firstChild;
+        if (logoOrFirst) {
+            this.renderer.insertBefore(element, title, logoOrFirst);
         } else {
             this.renderer.appendChild(element, title);
         }
@@ -1335,11 +1433,11 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 background-color: #e0e0e0;
             `;
             const dividerText: HTMLElement = this.renderer.createElement('span');
-            dividerText.textContent = 'OR';
+            dividerText.textContent = 'Or continue with';
             dividerText.style.cssText = `
                 padding: 0 12px;
                 font-size: 12px;
-                color: ${this.theme === 'dark' ? '#e5e7eb' : '#5d6164'};
+                color: ${primaryColor};
                 font-weight: 500;
                 letter-spacing: 0.5px;
             `;
@@ -1505,6 +1603,9 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         // Clear the login container
         loginContainer.innerHTML = '';
 
+        const selectWidgetTheme = this.getValueFromObservable(this.selectWidgetTheme$);
+        const borderRadius = this.getBorderRadiusCssValue(selectWidgetTheme?.ui_preferences?.border_radius);
+
         // Create back button
         const backButton: HTMLButtonElement = this.renderer.createElement('button');
         backButton.type = 'button';
@@ -1556,7 +1657,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             height: 44px;
             padding: 0 16px;
             border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #cbd5e1'};
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             background: ${this.theme === 'dark' ? 'transparent' : '#ffffff'};
             color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
             font-size: 14px;
@@ -1583,7 +1684,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             background-color: #3f51b5;
             color: #ffffff;
             border: none;
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
@@ -1660,6 +1761,9 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         // Clear the login container
         loginContainer.innerHTML = '';
 
+        const selectWidgetTheme = this.getValueFromObservable(this.selectWidgetTheme$);
+        const borderRadius = this.getBorderRadiusCssValue(selectWidgetTheme?.ui_preferences?.border_radius);
+
         let remainingSeconds = 15;
         let timerInterval: any = null;
 
@@ -1786,7 +1890,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             height: 44px;
             padding: 0 16px;
             border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #cbd5e1'};
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             background: ${this.theme === 'dark' ? 'transparent' : '#ffffff'};
             color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
             font-size: 14px;
@@ -1838,7 +1942,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             background-color: #3f51b5;
             color: #ffffff;
             border: none;
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
@@ -1948,6 +2052,10 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
      * Builds the login form content within the given container
      */
     private buildLoginFormContent(loginContainer: HTMLElement, buttonsData: any): void {
+        const selectWidgetTheme = this.getValueFromObservable(this.selectWidgetTheme$);
+        const borderRadius = this.getBorderRadiusCssValue(selectWidgetTheme?.ui_preferences?.border_radius);
+        const primaryColor = this.getPrimaryColorForCurrentTheme(selectWidgetTheme?.ui_preferences);
+
         const title: HTMLElement = this.renderer.createElement('div');
         title.textContent = 'Login';
         title.style.cssText = `
@@ -1975,7 +2083,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             height: 44px;
             padding: 0 16px;
             border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #cbd5e1'};
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             background: ${this.theme === 'dark' ? 'transparent' : '#ffffff'};
             color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
             font-size: 14px;
@@ -1985,10 +2093,11 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
 
         const usernameNote: HTMLElement = this.renderer.createElement('p');
         usernameNote.textContent = 'Note: Please enter your Mobile number with the country code (e.g. 91)';
+        const noteColor = this.version === 'v2' ? primaryColor : this.theme === 'dark' ? '#e5e7eb' : '#5d6164';
         usernameNote.style.cssText = `
             font-size: 12px;
             line-height: 18px;
-            color: ${this.theme === 'dark' ? '#e5e7eb' : '#5d6164'};
+            color: ${noteColor};
             margin: 0;
         `;
 
@@ -2016,7 +2125,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             height: 44px;
             padding: 0 44px 0 16px;
             border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #cbd5e1'};
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             background: ${this.theme === 'dark' ? 'transparent' : '#ffffff'};
             color: ${this.theme === 'dark' ? '#ffffff' : '#1f2937'};
             font-size: 14px;
@@ -2039,6 +2148,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         hcaptchaPlaceholder.style.cssText = `
             display: inline-block;
             background: ${this.theme === 'dark' ? 'transparent' : 'transparent'};
+            border-radius: ${borderRadius};
         `;
         this.renderer.appendChild(hcaptchaWrapper, hcaptchaPlaceholder);
 
@@ -2062,7 +2172,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             background-color: #3f51b5;
             color: #ffffff;
             border: none;
-            border-radius: 4px;
+            border-radius: ${borderRadius};
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
@@ -2148,6 +2258,11 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             })
         );
 
+        const logoUrl = selectWidgetTheme?.ui_preferences?.logo_url;
+        const logoElement = this.createLogoElement(logoUrl);
+        if (logoElement) {
+            this.renderer.appendChild(loginContainer, logoElement);
+        }
         this.renderer.appendChild(loginContainer, title);
         this.renderer.appendChild(usernameField, usernameInput);
         this.renderer.appendChild(usernameField, usernameNote);
@@ -2245,6 +2360,9 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             this.removeSkeletonLoader(element);
         }
 
+        const selectWidgetTheme = this.getValueFromObservable(this.selectWidgetTheme$);
+        const borderRadius = this.getBorderRadiusCssValue(selectWidgetTheme?.ui_preferences?.border_radius);
+
         const button: HTMLButtonElement = this.renderer.createElement('button');
         const image: HTMLImageElement = this.renderer.createElement('img');
 
@@ -2294,13 +2412,17 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 font-size: 14px;
                 background-color: transparent;
                 border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #d1d5db'};
-                border-radius: 8px;
+                border-radius: ${borderRadius};
                 cursor: pointer;
                 visibility: ${isOtpButton ? 'hidden' : 'visible'};
             `;
+            const isApple = buttonsData?.text?.toLowerCase()?.includes('apple');
+            const isPassword = buttonsData?.service_id === FeatureServiceIds.PasswordAuthentication;
+            const invertIcon = this.theme === 'dark' && (isApple || isPassword);
             image.style.cssText = `
                 height: 24px;
                 width: 24px;
+                ${invertIcon ? 'filter: invert(1);' : ''}
             `;
             image.src = buttonsData.icon;
             image.alt = buttonsData.text;
@@ -2334,7 +2456,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 font-size: 14px;
                 background-color: transparent;
                 border: ${this.theme === 'dark' ? '1px solid #ffffff' : '1px solid #000000'};
-                border-radius: 4px;
+                border-radius: ${borderRadius};
                 height: 44px;
                 color: ${this.theme === 'dark' ? '#ffffff' : '#111827'};
                 margin: 8px 8px 16px 8px;
@@ -2342,9 +2464,13 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 width: ${useDiv ? '316px' : '260px'};
                 visibility: ${isOtpButton ? 'hidden' : 'visible'}; // Hide only OTP buttons until ready
             `;
+            const isApple = buttonsData?.text?.toLowerCase()?.includes('apple');
+            const isPassword = buttonsData?.service_id === FeatureServiceIds.PasswordAuthentication;
+            const invertIcon = this.theme === 'dark' && (isApple || isPassword);
             image.style.cssText = `
                 height: 20px;
                 width: 20px;
+                ${invertIcon ? 'filter: invert(1);' : ''}
             `;
             span.style.cssText = `
                 color: ${this.theme === 'dark' ? '#ffffff' : '#111827'};
@@ -2417,6 +2543,9 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
         }
         this.createAccountTextAppended = true;
 
+        const selectWidgetTheme = this.getValueFromObservable(this.selectWidgetTheme$);
+        const primaryColor = this.getPrimaryColorForCurrentTheme(selectWidgetTheme?.ui_preferences);
+
         const paragraph: HTMLParagraphElement = this.renderer.createElement('p');
         const link: HTMLAnchorElement = this.renderer.createElement('a');
 
@@ -2430,7 +2559,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
     align-items: center !important;
     justify-content: center !important;
     gap: 8px !important;
-    color: ${this.theme === 'dark' ? '#ffffff' : '#3f4346'};
+    color: ${primaryColor} !important;
     cursor: pointer !important;
     width: ${this.version === 'v1' ? '260px' : '316px'} !important;
 `;
diff --git a/apps/proxy-auth/src/otp-global.scss b/apps/proxy-auth/src/otp-global.scss
index f402b022..fe218982 100644
--- a/apps/proxy-auth/src/otp-global.scss
+++ b/apps/proxy-auth/src/otp-global.scss
@@ -38,6 +38,10 @@
         width: 600px;
         z-index: 9999999 !important;
     }
+    &.dark-theme {
+        background-color: #616161 !important;
+        color: #ffffff !important;
+    }
 
     .otp-verification-header {
         position: relative;

From 229245685ea3ecf121b2cb02fc40e179ae0371a6 Mon Sep 17 00:00:00 2001
From: Chandan-walker <chandan@whozzat.com>
Date: Wed, 25 Feb 2026 17:59:40 +0530
Subject: [PATCH 2/2] pr changes

---
 .../src/app/otp/send-otp/send-otp.component.ts    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
index 11a32a43..d44c8014 100644
--- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
+++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
@@ -1085,7 +1085,6 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
     }): string {
         const isDark =
             this.theme === Theme.DARK ||
-            this.theme === 'dark' ||
             (this.theme === Theme.SYSTEM &&
                 typeof window !== 'undefined' &&
                 window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -2416,9 +2415,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 cursor: pointer;
                 visibility: ${isOtpButton ? 'hidden' : 'visible'};
             `;
-            const isApple = buttonsData?.text?.toLowerCase()?.includes('apple');
-            const isPassword = buttonsData?.service_id === FeatureServiceIds.PasswordAuthentication;
-            const invertIcon = this.theme === 'dark' && (isApple || isPassword);
+            const invertIcon = this.shouldInvertIcon(buttonsData);
             image.style.cssText = `
                 height: 24px;
                 width: 24px;
@@ -2464,9 +2461,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 width: ${useDiv ? '316px' : '260px'};
                 visibility: ${isOtpButton ? 'hidden' : 'visible'}; // Hide only OTP buttons until ready
             `;
-            const isApple = buttonsData?.text?.toLowerCase()?.includes('apple');
-            const isPassword = buttonsData?.service_id === FeatureServiceIds.PasswordAuthentication;
-            const invertIcon = this.theme === 'dark' && (isApple || isPassword);
+            const invertIcon = this.shouldInvertIcon(buttonsData);
             image.style.cssText = `
                 height: 20px;
                 width: 20px;
@@ -2842,4 +2837,10 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             window.location.href = this.loginRedirectUrl;
         }
     }
+
+    private shouldInvertIcon(buttonsData: any): boolean {
+        const isApple = buttonsData?.text?.toLowerCase()?.includes('apple');
+        const isPassword = buttonsData?.service_id === FeatureServiceIds.PasswordAuthentication;
+        return this.theme === Theme.DARK && (isApple || isPassword);
+    }
 }