diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts
index 4f1d4515..da1a3280 100644
--- a/apps/proxy-auth/src/app/element.module.ts
+++ b/apps/proxy-auth/src/app/element.module.ts
@@ -43,6 +43,14 @@ function documentReady(fn: any) {
 
 window['initVerification'] = (config: any) => {
     documentReady(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const isRegisterFormOnlyFromParams = urlParams.get('isRegisterFormOnly') === 'true';
+        const paramsData = {
+            ...(urlParams.get('first_name') && { firstName: urlParams.get('first_name') }),
+            ...(urlParams.get('last_name') && { lastName: urlParams.get('last_name') }),
+            ...(urlParams.get('email') && { email: urlParams.get('email') }),
+            ...(urlParams.get('signup_service_id') && { signupServiceId: urlParams.get('signup_service_id') }),
+        };
         if (config?.referenceId || config?.authToken || config?.showCompanyDetails) {
             const findOtpProvider = document.querySelector('proxy-auth');
             if (findOtpProvider) {
@@ -65,6 +73,7 @@ window['initVerification'] = (config: any) => {
             sendOtpElement.exclude_role_ids = config?.exclude_role_ids;
             sendOtpElement.include_role_ids = config?.include_role_ids;
             sendOtpElement.isHidden = config?.isHidden;
+            sendOtpElement.isRegisterFormOnly = config?.isRegisterFormOnly || isRegisterFormOnlyFromParams;
             sendOtpElement.target = config?.target ?? '_self';
             sendOtpElement.css = config.style;
             if (!config.success || typeof config.success !== 'function') {
@@ -73,8 +82,8 @@ window['initVerification'] = (config: any) => {
             sendOtpElement.successReturn = config.success;
             sendOtpElement.failureReturn = config.failure;
 
-            // omitting keys which are not required in API payload
-            sendOtpElement.otherData = omit(config, RESERVED_KEYS);
+            // omitting keys which are not required in API payload; query params fill in missing values
+            sendOtpElement.otherData = { ...paramsData, ...omit(config, RESERVED_KEYS) };
             if (document.getElementById('proxyContainer') && config?.type !== 'user-management') {
                 document.getElementById('proxyContainer').append(sendOtpElement);
             } else if (config?.type === 'user-management') {
diff --git a/apps/proxy-auth/src/app/otp/component/login/login.component.html b/apps/proxy-auth/src/app/otp/component/login/login.component.html
index 0862177c..42ec7708 100644
--- a/apps/proxy-auth/src/app/otp/component/login/login.component.html
+++ b/apps/proxy-auth/src/app/otp/component/login/login.component.html
@@ -1,4 +1,4 @@
-<div class="dialog-header">
+<div class="dialog-header" [ngClass]="{ 'dark-theme': theme === 'dark' }">
     <button mat-icon-button class="back-button close-dialog" (click)="changeStep(step - 1)">
         <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#5f6368">
             <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" />
@@ -13,7 +13,14 @@
         </svg>
     </button>
 </div>
-<div *ngIf="step === 1" [formGroup]="loginForm" proxyMarkAllAsTouched [buttonRef]="loginBtn" (valid)="login()">
+<div
+    *ngIf="step === 1"
+    [formGroup]="loginForm"
+    proxyMarkAllAsTouched
+    [buttonRef]="loginBtn"
+    (valid)="login()"
+    [class.dark-theme-login]="theme === 'dark'"
+>
     <div class="heading">Login</div>
     <mat-form-field appearance="outline" class="input-width" *ngIf="loginForm.get('username') as userNameControl">
         <mat-label>Email or Mobile</mat-label>
@@ -47,15 +54,29 @@
 
     <!-- hCaptcha Component -->
     <div class="hcaptcha-container">
-        <ng-hcaptcha
-            #hCaptcha
-            (verify)="onHCaptchaVerify($event)"
-            (expired)="onHCaptchaExpired()"
-            (error)="onHCaptchaError($event)"
-            theme="light"
-            size="normal"
-        >
-        </ng-hcaptcha>
+        <!-- hCaptcha is in 2.6 version but angular is in 14, due to this incompatibility, we are using ng-container to wrap the hCaptcha component instead of using [theme]="theme === 'dark' ? 'dark' : 'light'"-->
+        <ng-container *ngIf="theme === 'dark'">
+            <ng-hcaptcha
+                #hCaptcha
+                (verify)="onHCaptchaVerify($event)"
+                (expired)="onHCaptchaExpired()"
+                (error)="onHCaptchaError($event)"
+                theme="dark"
+                size="normal"
+            >
+            </ng-hcaptcha>
+        </ng-container>
+        <ng-container *ngIf="theme === 'light'">
+            <ng-hcaptcha
+                #hCaptcha
+                (verify)="onHCaptchaVerify($event)"
+                (expired)="onHCaptchaExpired()"
+                (error)="onHCaptchaError($event)"
+                theme="light"
+                size="normal"
+            >
+            </ng-hcaptcha>
+        </ng-container>
     </div>
 
     <div class="error-message" *ngIf="apiError | async">
@@ -72,7 +93,14 @@
     </div>
 </div>
 
-<div *ngIf="step === 2" [formGroup]="sendOtpForm" [buttonRef]="sendOtpBtn" (valid)="sendOtp()" proxyMarkAllAsTouched>
+<div
+    *ngIf="step === 2"
+    [formGroup]="sendOtpForm"
+    [buttonRef]="sendOtpBtn"
+    (valid)="sendOtp()"
+    proxyMarkAllAsTouched
+    [class.dark-theme-login]="theme === 'dark'"
+>
     <div class="heading">Reset Password</div>
     <ng-container
         [ngTemplateOutlet]="formField"
@@ -99,6 +127,7 @@
     proxyMarkAllAsTouched
     [buttonRef]="verifyOtpBtn"
     (valid)="verfiyOtp()"
+    [class.dark-theme-login]="theme === 'dark'"
 >
     <div class="heading">Change Password</div>
 
diff --git a/apps/proxy-auth/src/app/otp/component/login/login.component.scss b/apps/proxy-auth/src/app/otp/component/login/login.component.scss
index cba8f3f8..63cea40e 100644
--- a/apps/proxy-auth/src/app/otp/component/login/login.component.scss
+++ b/apps/proxy-auth/src/app/otp/component/login/login.component.scss
@@ -47,6 +47,15 @@ p {
 .close-button {
     right: 16px;
 }
+
+.dark-theme {
+    .back-button svg {
+        fill: #ffffff;
+    }
+    .close-button svg path {
+        fill: #ffffff;
+    }
+}
 .heading {
     font-size: 16px;
     line-height: 20px;
@@ -91,3 +100,70 @@ p {
     justify-content: center;
     padding: 8px 0;
 }
+
+// Dark theme — mat-form-field overrides (mirrors register.component.scss pattern)
+:host ::ng-deep .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 outline fields
+    .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;
+    }
+
+    // Hint text
+    .mat-hint,
+    .mat-mdc-form-field-hint,
+    .mat-mdc-form-field-hint-wrapper {
+        color: rgba(255, 255, 255, 0.7) !important;
+    }
+
+    // Suffix icon (password toggle)
+    .mat-icon-button svg path {
+        fill: #ffffff;
+    }
+}
diff --git a/apps/proxy-auth/src/app/otp/component/login/login.component.ts b/apps/proxy-auth/src/app/otp/component/login/login.component.ts
index 7d154538..3ad8a054 100644
--- a/apps/proxy-auth/src/app/otp/component/login/login.component.ts
+++ b/apps/proxy-auth/src/app/otp/component/login/login.component.ts
@@ -23,6 +23,7 @@ import { NgHcaptchaComponent } from 'ng-hcaptcha';
 })
 export class LoginComponent extends BaseComponent implements OnInit, OnDestroy {
     @Input() public loginServiceData: any;
+    @Input() public theme: string;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
     @Output() public closePopUp: EventEmitter<any> = new EventEmitter();
     @Output() public openPopUp: EventEmitter<any> = new EventEmitter();
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..a6fa3626 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>
-        <button mat-icon-button class="close-dialog" (click)="close(true)" type="button">
+        <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Register</div>
+        <button mat-icon-button class="close-dialog" (click)="close(true)" type="button" *ngIf="!isRegisterFormOnly">
             <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,21 @@
                     <button
                         (click)="isOtpSent ? resendOtp() : getOtp()"
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         [disabled]="(selectGetOtpInProcess$ | async) || (isOtpSent && !canResendOtp)"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
+                        [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 +186,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 +234,26 @@
                     </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'"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
+                        [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..bc72e341 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,197 @@ 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;
+        }
+
+        .iti--allow-dropdown {
+            .iti__flag-container {
+                .iti__country-list {
+                    background-color: #616161 !important;
+
+                    .iti__country:hover,
+                    .iti__country.iti__highlight {
+                        background-color: #757575 !important;
+                    }
+
+                    .iti__country {
+                        .iti__country-name {
+                            color: #ffffff !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+:host ::ng-deep .form-wrapper {
+    .register-user-details {
+        .iti--allow-dropdown {
+            .iti__flag-container {
+                .iti__selected-flag {
+                    border-top-left-radius: var(--field-border-radius, 4px) !important;
+                    border-bottom-left-radius: var(--field-border-radius, 4px) !important;
+                }
+            }
+        }
+    }
+}
+
+// Custom button hover color applied via --btn-hover-color CSS property.
+// .has-hover-color is only added when buttonHoverColor is truthy.
+.has-hover-color:hover:not([disabled]) {
+    background-color: var(--btn-hover-color) !important;
+
+    .mdc-button__ripple::before,
+    .mat-mdc-button-ripple::before {
+        opacity: 0 !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..61064c23 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,13 @@ 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;
+    @Input() public firstName: string;
+    @Input() public lastName: string;
+    @Input() public email: string;
+    @Input() public signupServiceId: string | number;
+    @Input() public isRegisterFormOnly: boolean = false;
     public showPassword: boolean = false;
     public showConfirmPassword: boolean = false;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
@@ -114,6 +122,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     public isOtpSent: boolean = false;
     public isNumberChanged: boolean = false;
     public otpError: string = '';
+    public otpVerificationToken: string = '';
 
     // Resend OTP timer properties
     public resendTimer: number = 0;
@@ -121,6 +130,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 +180,20 @@ 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 || {};
+        });
+        if (this.isRegisterFormOnly) {
+            this.registrationForm.get('user.email').disable();
+        }
         this.registrationForm
             .get('user.mobile')
             .valueChanges.pipe(takeUntil(this.destroy$))
@@ -194,6 +217,9 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
                 this.otpError = ''; // Clear error on successful verification
             }
         });
+        this.selectVerifyOtpV2Data$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
+            this.otpVerificationToken = res?.data?.otp_verification_token;
+        });
         this.selectGetOtpSuccess$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
             this.isOtpSent = res;
             if (res) {
@@ -219,6 +245,15 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         if (changes?.prefillDetails?.currentValue) {
             this.checkPrefillDetails();
         }
+        if (changes?.firstName?.currentValue) {
+            this.registrationForm.get('user.firstName').setValue(changes.firstName.currentValue);
+        }
+        if (changes?.lastName?.currentValue) {
+            this.registrationForm.get('user.lastName').setValue(changes.lastName.currentValue);
+        }
+        if (changes?.email?.currentValue) {
+            this.registrationForm.get('user.email').setValue(changes.email.currentValue);
+        }
     }
     checkPrefillDetails() {
         if (isNaN(Number(this.prefillDetails))) {
@@ -406,7 +441,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             this.registrationForm.get('user.mobile').setErrors({ otpVerificationFailed: true });
             return;
         }
-        const formData = removeEmptyKeys(cloneDeep(this.registrationForm.value), true);
+        const formData = removeEmptyKeys(cloneDeep(this.registrationForm.getRawValue()), true);
         const state = JSON.parse(
             this.otpUtilityService.aesDecrypt(
                 this.registrationViaLogin ? this.loginServiceData.state : this.serviceData?.state ?? '',
@@ -431,6 +466,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             service_id: this.registrationViaLogin ? this.loginServiceData.service_id : this.serviceData.service_id,
             url_unique_id: state?.url_unique_id,
             request_data: formData,
+            ...(this.signupServiceId && { signup_service_id: this.signupServiceId }),
         };
         const encodedData = this.otpUtilityService.aesEncrypt(
             JSON.stringify(payload),
@@ -439,14 +475,20 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             true
         );
         const registrationState = this.registrationViaLogin ? this.loginServiceData.state : this.serviceData.state;
-        this.otpService.register({ proxy_state: encodedData, state: registrationState }).subscribe(
-            (response) => {
-                window.location.href = response.data.redirect_url;
-            },
-            (err) => {
-                this.apiError.next(errorResolver(err?.error.errors));
-            }
-        );
+        this.otpService
+            .register({
+                proxy_state: encodedData,
+                state: registrationState,
+                otp_verification_token: this.otpVerificationToken,
+            })
+            .subscribe(
+                (response) => {
+                    window.location.href = response.data.redirect_url;
+                },
+                (err) => {
+                    this.apiError.next(errorResolver(err?.error.errors));
+                }
+            );
     }
 
     public getOtp() {
@@ -601,4 +643,51 @@ 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 buttonHoverColor(): string | null {
+        if (this.version !== 'v2') return null;
+        return this.uiPreferences?.button_hover_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..698b6836 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,9 +70,9 @@
 
             <!-- 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>
+                    <a href="javascript:void(0)" (click)="showRegistration()">{{ signUpButtonText }}</a>
                 </p>
             </ng-container>
 
@@ -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>
@@ -179,15 +198,29 @@
 
                     <!-- hCaptcha Component -->
                     <div class="hcaptcha-container">
-                        <ng-hcaptcha
-                            #hCaptcha
-                            (verify)="onHCaptchaVerify($event)"
-                            (expired)="onHCaptchaExpired()"
-                            (error)="onHCaptchaError($event)"
-                            theme="light"
-                            size="normal"
-                        >
-                        </ng-hcaptcha>
+                        <!-- hCaptcha is in 2.6 version but angular is in 14, due to this incompatibility, we are using ng-container to wrap the hCaptcha component instead of using [theme]="theme === 'dark' ? 'dark' : 'light'"-->
+                        <ng-container *ngIf="theme === 'dark'">
+                            <ng-hcaptcha
+                                #hCaptcha
+                                (verify)="onHCaptchaVerify($event)"
+                                (expired)="onHCaptchaExpired()"
+                                (error)="onHCaptchaError($event)"
+                                theme="dark"
+                                size="normal"
+                            >
+                            </ng-hcaptcha>
+                        </ng-container>
+                        <ng-container *ngIf="theme === 'light'">
+                            <ng-hcaptcha
+                                #hCaptcha
+                                (verify)="onHCaptchaVerify($event)"
+                                (expired)="onHCaptchaExpired()"
+                                (error)="onHCaptchaError($event)"
+                                theme="light"
+                                size="normal"
+                            >
+                            </ng-hcaptcha>
+                        </ng-container>
                     </div>
 
                     <div class="error-message" *ngIf="loginError">{{ loginError }}</div>
@@ -198,33 +231,59 @@
                         </p>
                         <button
                             mat-flat-button
-                            color="primary"
+                            [color]="buttonColor ? null : 'primary'"
                             (click)="login()"
                             [disabled]="isLoginLoading$ | async"
                             class="w-100"
+                            [class.has-hover-color]="!!buttonHoverColor"
+                            [style.--btn-hover-color]="buttonHoverColor"
+                            [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>
-                                Login
+                                Sign in
                             </div>
                         </button>
                     </div>
                 </div>
 
                 <!-- Step 2: Reset Password (Send OTP) -->
-                <div class="login-section" *ngIf="loginStep === 2" [formGroup]="sendOtpLoginForm">
-                    <button mat-icon-button class="back-button" (click)="changeLoginStep(1)" type="button">
+                <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"
+                        *ngIf="isUserProxyContainer"
+                    >
                         <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 +305,23 @@
 
                     <button
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         (click)="sendResetPasswordOtp()"
                         [disabled]="isLoginLoading$ | async"
                         class="w-100"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
+                        [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 +331,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 +443,23 @@
 
                     <button
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         (click)="verifyResetPasswordOtp()"
                         [disabled]="isLoginLoading$ | async"
                         class="w-100"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
+                        [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 +491,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 +523,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 +532,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..48487d67 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,103 @@ 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;
+}
+
+// Custom button hover color applied via --btn-hover-color CSS property.
+// The .has-hover-color class is only added when buttonHoverColor is truthy,
+// so this rule is a no-op when the preference is not configured.
+.has-hover-color:hover:not([disabled]) {
+    background-color: var(--btn-hover-color) !important;
+
+    // Suppress Material's default state-layer ripple so it doesn't wash over the custom color
+    .mdc-button__ripple::before,
+    .mat-mdc-button-ripple::before {
+        opacity: 0 !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..a255acbd 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';
@@ -83,6 +84,7 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
     @Input() public show_social_login_icons: boolean = false;
     @Input() public isCreateAccountLink: boolean;
     @Input() public theme: string;
+    @Input() public isUserProxyContainer: boolean = true;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
     @Output() public successReturn: EventEmitter<any> = new EventEmitter();
     @Output() public failureReturn: EventEmitter<any> = new EventEmitter();
@@ -109,6 +111,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 +179,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 +247,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 +350,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) {
@@ -449,7 +459,9 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
 
     public close(closeByUser: boolean = false) {
         document.getElementById(META_TAG_ID)?.remove();
-        this.resetStore();
+        if (this.isUserProxyContainer) {
+            this.resetStore();
+        }
         this.togglePopUp.emit();
         this.timeRemain = 0;
         if (closeByUser) {
@@ -625,6 +637,64 @@ 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';
+    }
+
+    public get signUpButtonText(): string {
+        return this.uiPreferences?.sign_up_button_text || 'Create an account';
+    }
+
     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 97bbf1b5..30251e04 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
@@ -12,8 +12,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"
@@ -37,6 +42,7 @@
             (openPopUp)="setShowRegistrationFromSendOtpCenter($event)"
             (successReturn)="returnSuccessObj($event)"
             (failureReturn)="returnFailureObj($event)"
+            [isUserProxyContainer]="isUserProxyContainer"
         ></proxy-send-otp-center>
         <proxy-register
             *ngIf="showRegistration | async"
@@ -45,16 +51,24 @@
             [loginServiceData]="loginWidgetData"
             [registrationViaLogin]="registrationViaLogin"
             [showCompanyDetails]="showCompanyDetails"
+            [version]="version"
+            [theme]="theme"
             (togglePopUp)="setShowRegistration(false)"
             (successReturn)="setShowRegistration(false)"
             (failureReturn)="returnFailureObj($event)"
             [prefillDetails]="prefillDetails"
+            [firstName]="otherData?.firstName"
+            [lastName]="otherData?.lastName"
+            [email]="otherData?.email"
+            [signupServiceId]="otherData?.signupServiceId"
+            [isRegisterFormOnly]="isRegisterFormOnly"
         ></proxy-register>
         <proxy-login
             *ngIf="showLogin | async"
             (togglePopUp)="toggleSendOtp()"
             (closePopUp)="setShowLogin(false)"
             [loginServiceData]="loginWidgetData"
+            [theme]="theme"
             (openPopUp)="setShowRegistrationFromLogin($event)"
             (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..46f9709d 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
@@ -65,6 +65,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
     @Input() public isHidden: boolean = false;
     @Input() public input_fields: string = InputFields.TOP;
     @Input() public show_social_login_icons: boolean = false;
+    @Input() public isRegisterFormOnly: boolean = false;
     set css(type: NgStyle['ngStyle']) {
         this.cssSubject$.next(type);
     }
@@ -110,9 +111,11 @@ 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> = [];
+    public isUserProxyContainer: boolean = true;
 
     constructor(
         private ngZone: NgZone,
@@ -152,14 +155,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
@@ -185,6 +189,10 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             }, 3000);
         } else {
             this.toggleSendOtp(true);
+            if (this.isRegisterFormOnly) {
+                this.registrationViaLogin = false;
+                this.setShowRegistration(true);
+            }
         }
         this.loadExternalFonts();
         this.store.dispatch(
@@ -254,7 +262,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             });
         } else {
             this.setShowLogin(false);
-
+            this.isUserProxyContainer = false;
             this.show$ = of(false);
             this.animate = false;
             this.createAccountTextAppended = false;
@@ -1051,11 +1059,81 @@ 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 === 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 +1145,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 +1184,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 +1194,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 +1230,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 +1253,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 +1270,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 +1289,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 +1390,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 +1438,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 +1608,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 +1662,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 +1689,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 +1766,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 +1895,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 +1947,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 +2057,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 +2088,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 +2098,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 +2130,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 +2153,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 +2177,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 +2263,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 +2365,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 +2417,15 @@ 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 invertIcon = this.shouldInvertIcon(buttonsData);
             image.style.cssText = `
                 height: 24px;
                 width: 24px;
+                ${invertIcon ? 'filter: invert(1);' : ''}
             `;
             image.src = buttonsData.icon;
             image.alt = buttonsData.text;
@@ -2334,7 +2459,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 +2467,11 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 width: ${useDiv ? '316px' : '260px'};
                 visibility: ${isOtpButton ? 'hidden' : 'visible'}; // Hide only OTP buttons until ready
             `;
+            const invertIcon = this.shouldInvertIcon(buttonsData);
             image.style.cssText = `
                 height: 20px;
                 width: 20px;
+                ${invertIcon ? 'filter: invert(1);' : ''}
             `;
             span.style.cssText = `
                 color: ${this.theme === 'dark' ? '#ffffff' : '#111827'};
@@ -2417,6 +2544,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 +2560,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;
 `;
@@ -2444,7 +2574,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
 
         // Set the text content
         paragraph.innerHTML = 'Are you a new user? ';
-        link.textContent = 'Create an account';
+        link.textContent = selectWidgetTheme?.ui_preferences?.sign_up_button_text || 'Create an account';
 
         // Add click event to the link
         link.addEventListener('click', (event) => {
@@ -2713,4 +2843,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);
+    }
 }
diff --git a/apps/proxy-auth/src/app/otp/service/otp.service.ts b/apps/proxy-auth/src/app/otp/service/otp.service.ts
index 0585230a..20d7df94 100644
--- a/apps/proxy-auth/src/app/otp/service/otp.service.ts
+++ b/apps/proxy-auth/src/app/otp/service/otp.service.ts
@@ -74,7 +74,7 @@ export class OtpService {
         return this.http.get<any>(requestUrl, params, this.options);
     }
 
-    public register(body: { proxy_state?: string; state?: string }): Observable<any> {
+    public register(body: { proxy_state?: string; state?: string; otp_verification_token?: string }): Observable<any> {
         return this.http.post<any>(otpVerificationUrls.register(this.baseUrl), body, this.options);
     }
 
diff --git a/apps/proxy-auth/src/app/shadow-dom-overlay-container.ts b/apps/proxy-auth/src/app/shadow-dom-overlay-container.ts
index 5418e4da..a7a4d837 100644
--- a/apps/proxy-auth/src/app/shadow-dom-overlay-container.ts
+++ b/apps/proxy-auth/src/app/shadow-dom-overlay-container.ts
@@ -4,14 +4,21 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 
 const CONTAINER_CLASS = 'cdk-overlay-container';
-/** Full-viewport overlay container style so positioning is viewport-based when in shadow root */
+/**
+ * Full-viewport overlay container style so positioning is viewport-based when in shadow root.
+ * z-index is set to 9999 — well above the content z-indices used inside the shadow root
+ * (send-otp .container = 1000, user-profile/user-management .container = 10).  The container
+ * is also appended as the LAST child of the shadow root so that, even when a content element
+ * ends up with an equal z-index via the CSS cascade, DOM-order tie-breaking still favours the
+ * overlay.
+ */
 const OVERLAY_CONTAINER_STYLE =
-    'position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;pointer-events:none!important;z-index:1000!important;';
+    'position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;pointer-events:none!important;z-index:9999!important;';
 /**
  * OverlayContainer that:
  * - When proxy-auth with shadow root exists (script load): attaches the overlay as the
- *   **first** child of the shadow root with full-viewport fixed style, so it is NOT
- *   inside the fixed .container and positioning is correct (dropdown below the right field).
+ *   **last** child of the shadow root with full-viewport fixed style and a high z-index,
+ *   ensuring MatDialog / MatSnackBar / dropdowns always render above the component content.
  * - Otherwise: attaches to document.body (default behaviour).
  */
 @Injectable()
@@ -49,15 +56,8 @@ export class ShadowDomOverlayContainer extends OverlayContainer {
         const parent = this._getOverlayParent();
         if (parent !== this._document.body) {
             container.setAttribute('style', OVERLAY_CONTAINER_STYLE);
-            const first = parent.firstChild;
-            if (first) {
-                parent.insertBefore(container, first);
-            } else {
-                parent.appendChild(container);
-            }
-        } else {
-            parent.appendChild(container);
         }
+        parent.appendChild(container);
         this._containerElement = container;
     }
 
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;
diff --git a/apps/proxy/src/app/app.routes.ts b/apps/proxy/src/app/app.routes.ts
index 5aed8f96..8bae04c5 100644
--- a/apps/proxy/src/app/app.routes.ts
+++ b/apps/proxy/src/app/app.routes.ts
@@ -25,4 +25,8 @@ export const appRoutes: Route[] = [
         path: 'p',
         loadChildren: () => import('./public.module').then((p) => p.PublicModule),
     },
+    {
+        path: 'client',
+        loadChildren: () => import('./client.module').then((p) => p.ClientModule),
+    },
 ];
diff --git a/apps/proxy/src/app/client.module.ts b/apps/proxy/src/app/client.module.ts
new file mode 100644
index 00000000..5b2a9bef
--- /dev/null
+++ b/apps/proxy/src/app/client.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+    {
+        path: 'registration',
+        loadChildren: () => import('./registration/registration.module').then((p) => p.RegistrationModule),
+    },
+];
+
+@NgModule({
+    declarations: [],
+    imports: [CommonModule, RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class ClientModule {}
diff --git a/apps/proxy/src/app/registration/registration.component.ts b/apps/proxy/src/app/registration/registration.component.ts
new file mode 100644
index 00000000..91b666d2
--- /dev/null
+++ b/apps/proxy/src/app/registration/registration.component.ts
@@ -0,0 +1,74 @@
+import { Component, NgZone, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { ProxyAuthScriptUrl } from '@proxy/models/features-model';
+import { PrimeNgToastService } from '@proxy/ui/prime-ng-toast';
+import { environment } from '../../environments/environment';
+
+@Component({
+    selector: 'app-registration',
+    template: '',
+})
+export class RegistrationComponent implements OnInit {
+    private scriptLoaded = new BehaviorSubject<boolean>(false);
+    public loadingScript = new BehaviorSubject<boolean>(false);
+
+    constructor(private route: ActivatedRoute, private ngZone: NgZone, private toast: PrimeNgToastService) {}
+
+    ngOnInit(): void {
+        const params = this.route.snapshot.queryParamMap;
+        this.loadScript({
+            referenceId: params.get('reference_id'),
+            firstName: params.get('first_name'),
+            lastName: params.get('last_name'),
+            signupServiceId: params.get('signup_service_id'),
+            email: params.get('email'),
+        });
+    }
+
+    private loadScript(params: {
+        referenceId: string;
+        firstName: string;
+        lastName: string;
+        signupServiceId: string;
+        email: string;
+    }): void {
+        const configuration = {
+            referenceId: params.referenceId,
+            type: 'authorization',
+            isPreview: false,
+            isRegisterFormOnly: true,
+            firstName: params.firstName,
+            lastName: params.lastName,
+            signupServiceId: params.signupServiceId,
+            email: params.email,
+            success: (data) => {
+                this.ngZone.run(() => {
+                    this.toast.success('Authorization successfully completed');
+                });
+            },
+            failure: (error) => {
+                this.ngZone.run(() => {
+                    this.toast.error(error?.message);
+                });
+            },
+        };
+
+        if (!this.scriptLoaded.getValue()) {
+            this.loadingScript.next(true);
+            const head = document.getElementsByTagName('head')[0];
+            const currentTimestamp = new Date().getTime();
+            const otpProviderScript = document.createElement('script');
+            otpProviderScript.type = 'text/javascript';
+            otpProviderScript.src = ProxyAuthScriptUrl(environment.proxyServer, currentTimestamp);
+            head.appendChild(otpProviderScript);
+            otpProviderScript.onload = () => {
+                this.loadingScript.next(false);
+                window?.['initVerification']?.(configuration);
+            };
+            this.scriptLoaded.next(true);
+        } else {
+            window?.['initVerification']?.(configuration);
+        }
+    }
+}
diff --git a/apps/proxy/src/app/registration/registration.module.ts b/apps/proxy/src/app/registration/registration.module.ts
new file mode 100644
index 00000000..e527bc9b
--- /dev/null
+++ b/apps/proxy/src/app/registration/registration.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { RegistrationComponent } from './registration.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: RegistrationComponent,
+        pathMatch: 'full',
+    },
+];
+
+@NgModule({
+    declarations: [RegistrationComponent],
+    imports: [CommonModule, RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class RegistrationModule {}