diff --git a/keycloak/themes/aastrika/login/login.ftl b/keycloak/themes/aastrika/login/login.ftl
index 066252b0..97a203fd 100644
--- a/keycloak/themes/aastrika/login/login.ftl
+++ b/keycloak/themes/aastrika/login/login.ftl
@@ -1,261 +1,333 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout displayInfo=social.displayInfo; section>
-<#if section = "title">
-    ${msg("loginTitle",(realm.displayName!''))}
-    <#elseif section = "header">
-    <#elseif section = "form">
-    <#if realm.password>
-    <div class="custom-wrapper">
-        <div class="">
-           
-            <div class="ui raised shadow container segment  login-section">
-                <div class="ui one column grid stackable">
-                    <#--  <div class="ui column tablet only computer only"></div>  -->
-                    <div class="ui column height-fix">
-                        <div class="max-container">
-                            <div class="ui header mb-40 centered">
-                                <h1 > Welcome! </h1>
+  <@layout.registrationLayout displayInfo=social.displayInfo; section>
+    <#if section="title">
+      ${msg("loginTitle",(realm.displayName!''))}
+      <#elseif section="header">
+        <#elseif section="form">
+          <#if realm.password>
+            <div class="custom-wrapper">
+              <div class="">
+
+                <div class="ui raised shadow container segment  login-section">
+                  <div class="ui one column grid stackable">
+                    <#-- <div class="ui column tablet only computer only">
+                  </div> -->
+                  <div class="ui column height-fix">
+                    <div class="logo">
+                      <a href="/public/home">
+                        <img alt="Logo" src="${url.resourcesPath}/img/sphere-new-logo.svg" width="120">
+                      </a>
+                    </div>
+                    <div class="max-container">
+                      <div class="ui header mtb">
+                        <h1> Welcome! </h1>
+                      </div>
+                      <p class="fwb">Login with your Aastrika account</p>
+                      <div class="formMsg  textCenter">
+                        <#if message?has_content>
+                          <div class="ui text mb-30 ${message.type}">
+                            ${message.summary}
+                          </div>
+                        </#if>
+                        <div id="success-msg" class="ui text success hide">suceess</div>
+                        <div id="error-msg" class="ui text error hide">error</div>
+                      </div>
+                      <div class="field ${properties.kcFormGroupClass!} type-container mw-100">
+                        <div>
+                          <input type="radio" onclick="javascript:passwordOrOtp();" name="usePasswordOrOTP"
+                            id="useOTPRB" class="" checked=true>&nbsp;
+                          <label id="useOTPLabel" for="useOTPRB" class="">
+                            Login with OTP
+                          </label>
+
+                        </div>
+                        <div>
+                          <input type="radio" onclick="javascript:passwordOrOtp();" name="usePasswordOrOTP"
+                            id="usePasswordRB">&nbsp;
+                          <label id="usePasswordLabel" for="usePasswordRB" class="">
+                            Login with Password
+                          </label>
+                        </div>
+                      </div>
+                      <div id="usePasswordDiv" class="mw-100" style="display:none">
+                        <form id="kc-form-login-pwd" onsubmit="login.disabled = true; return true;" class="ui form"
+                          method="POST" action="${url.loginAction}">
+                          <input type="hidden" name="page_type" value="login_with_pass" />
+                          <div class="field">
+                            <!-- <label id="usernameLabel" for="username" class="">
+                              <#if !realm.loginWithEmailAllowed>${msg("username")}
+                                <#elseif !realm.registrationEmailAsUsername>
+                                  ${msg("emailOrPhone")}
+                                  <#else>${msg("email")}
+                              </#if>
+                            </label>
+                            <label id="usernameLabelPlaceholder" for="username" class="activeLabelColor hide">
+                              <#if !realm.loginWithEmailAllowed>${msg("username")}
+                                <#elseif !realm.registrationEmailAsUsername>
+                                  ${msg("placeholderForEmailOrPhone")}
+                                  <#else>${msg("email")}
+                              </#if>
+                            </label> -->
+                            <#if usernameEditDisabled??>
+                              <#-- TODO: need to find alternative for prepopulating username -->
+                                <input class="mt-8" id="username" name="username" type="text" disabled />
+                                <#else>
+                                  <input class="mt-8" id="username" name="username" onfocusin="inputBoxFocusIn(this)"
+                                    placeholder="Phone Number/Email ID" onfocusout="inputBoxFocusOut(this)" type="text"
+                                    autofocus autocomplete="off" />
+                            </#if>
+                          </div>
+                          <div class="field">
+                            <div>
+                              <label id="passwordLabel" for="password" class="">
+                                ${msg("password")}
+                              </label>
+                              <label id="passwordLabelPlaceholder" for="password" class="activeLabelColor hide">
+                                ${msg("placeholderForPassword")}
+                              </label>
                             </div>
-                            <div class="formMsg  textCenter">
-                                <#if message?has_content>
-                                <div class="ui text mb-30 ${message.type}">
-                                    ${message.summary}
+                            <input placeholder="${msg('passwordPlaceholder')}" class=" mt-8" id="password"
+                              onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)" name="password"
+                              type="password" autocomplete="off" />
+                            <span class="ui text error hide"
+                              id="inCorrectPasswordError">${msg("inCorrectPasswordError")}</span>
+                          </div>
+                          <div class="field">
+                            <#if recaptchaRequired??>
+                              <div class="form-group">
+                                <div class="${properties.kcInputWrapperClass!}">
+                                  <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
                                 </div>
-                                </#if>
-                                <div id="success-msg" class="ui text success hide">suceess</div>
-                                <div id="error-msg" class="ui text error hide">error</div>
+                              </div>
+                            </#if>
+                          </div>
+                          <div>
+                            <#if realm.resetPasswordAllowed>
+                            <a id="fgtKeycloakFlow" class="ui right floated forgetPasswordLink hide" tabindex="1"
+                              onclick="javascript:storeLocation(); javascript:makeDivUnclickable()"
+                              href="${client.baseUrl}public/forgot-password?value=true">${msg("doForgotPassword")}</a>
+                            
+                          </#if>
+                          </div>
+                          <div class="field mt-10">
+                            <button id="login-username-password" class="ui fluid button blueButton" onclick="otpClick(event, 'Login Button', 'login-username-password')">${msg("doLogIn")}</button>
+                          </div>
+                          <div class="field or-container">
+                            <div class="or-holder">
+                              <span class=""></span>
+                              <span class="">OR</span>
                             </div>
-                              <div class="field ${properties.kcFormGroupClass!} type-container mw-100">
-                                <div>
-                                  <input type="radio" onclick="javascript:passwordOrOtp();" name="usePasswordOrOTP" id="useOTPRB" class="" checked=true>&nbsp;
-                                    <label id="useOTPLabel" for="useOTPRB" class="">
-                                        Login with OTP
-                                    </label>
-                                    
-                                </div>
-                                <div>
-                                  <input type="radio" onclick="javascript:passwordOrOtp();" name="usePasswordOrOTP" id="usePasswordRB" >&nbsp;
-                                    <label id="usePasswordLabel" for="usePasswordRB" class="">
-                                        Login with password
-                                    </label>
-                                </div>
+                          </div>
+
+                          <div id="kc-registration" class="field">
+                            <div class="ui content mt-20 signUpMsg">
+                              <!-- <span> -->
+                                <!-- ${msg("noAccount")} -->
+                                <a class="ui fluid button whiteButton"
+                                  href="${client.baseUrl}app/create-account" onclick="otpClick(event, 'Create Account', 'createAccount-loginOTP')" id="createAccount-loginOTP">${msg("registerHere")}</a>
+                                  <span class="whatsApp">
+                                    <img alt="Logo" src="${url.resourcesPath}/img/whatsapp.png" width="30">
+                                </span>
+                                  <a class="ui fluid button greenButton"
+                                  href="https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform"
+                                  target="_blank" id="WhatsApp-loginOTP" onclick="otpClick(event,'WhatsApp', 'WhatsApp-loginOTP')">Get Help on WhatsApp?</a>
+                              <!-- </span> -->
+                            </div>
+                          </div>
+                          <div id="selfSingUp" class="hide">
+                            
+                            <div class="field">
+                             
+                             
                             </div>
-                            <div id="usePasswordDiv" class="mw-100" style="display:none">
-                                <form id="kc-form-login" onsubmit="login.disabled = true; return true;" class="ui form" method="POST" action="${url.loginAction}">
-				                    <input type="hidden" name="page_type" value="login_with_pass" />
-                                    <div class="field">
-                                        <label id="usernameLabel" for="username" class="">
-                                            <#if !realm.loginWithEmailAllowed>${msg("username")}
-                                            <#elseif !realm.registrationEmailAsUsername>${msg("emailOrPhone")}
-                                            <#else>${msg("email")}
-                                            </#if>
-                                        </label>
-                                        <label id="usernameLabelPlaceholder" for="username" class="activeLabelColor hide">
-                                            <#if !realm.loginWithEmailAllowed>${msg("username")}
-                                            <#elseif !realm.registrationEmailAsUsername>${msg("placeholderForEmailOrPhone")}
-                                            <#else>${msg("email")}
-                                            </#if>
-                                        </label>
-                                        <#if usernameEditDisabled??>
-                                        <#-- TODO: need to find alternative for prepopulating username -->
-                                        <input class="mt-8" id="username" name="username" type="text" disabled />
-                                        <#else>
-                                        <input class="mt-8" id="username" name="username" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)" type="text" autofocus autocomplete="off" />
-                                        </#if>
-                                    </div>
-                                    <div class="field">
-                                        <div>
-                                            <label id="passwordLabel" for="password" class="">
-                                                ${msg("password")}
-                                            </label>
-                                            <#if realm.resetPasswordAllowed>
-                                                <a id="fgtKeycloakFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:storeLocation(); javascript:makeDivUnclickable()" href="${client.baseUrl}public/forgot-password?value=true">${msg("doForgotPassword")}</a>
-                                                <div id="fgtPortalFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:forgetPassword('/recover/identify/account');javascript:makeDivUnclickable()">${msg("doForgotPassword")}</div>
-                                            </#if>
-                                            <label id="passwordLabelPlaceholder" for="password" class="activeLabelColor hide">
-                                                ${msg("placeholderForPassword")}
-                                            </label>
-                                        </div>
-                                        <input placeholder="${msg('passwordPlaceholder')}" class=" mt-8" id="password" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)" name="password" type="password" autocomplete="off" />
-                                        <span class="ui text error hide" id="inCorrectPasswordError">${msg("inCorrectPasswordError")}</span>
-                                    </div>
-                                    <div class="field">
-                                    <#if recaptchaRequired??>
-                                        <div class="form-group">
-                                            <div class="${properties.kcInputWrapperClass!}">
-                                                <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
-                                            </div>
-                                        </div>
-                                    </#if>
-                                    </div>
-                                    <div class="field">
-                                        <button id="login" class="ui fluid button">${msg("doLogIn")}</button>
-                                    </div>
-                                    <div class="field or-container">
-                                        <div class="or-holder">
-                                            <span class="or-divider"></span>
-                                            <span class="or-text">or</span>
-                                        </div>
-                                    </div>
-                                    
-                                    <div id="kc-registration" class="field">
-                                        <div class="ui content mt-40 signUpMsg">
-                                            <span>${msg("noAccount")} <a class="signUpLink" href="${client.baseUrl}app/create-account">${msg("registerHere")}</a></span>
-                                        </div>
-                                    </div>
-                                    <div id="selfSingUp" class="hide">
-                                        <p class="or my-16 textCenter">OR</p>
-                                        <div class="field">
-                                            <#if realm.password && social.providers??>
-                                                <!--div id="kc-social-providers">
-                                                    <#list social.providers as p>
-                                                    <a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} ui fluid blue basic button textCenter">
-                                                    <i class="icon signInWithGoogle"></i>${msg("doSignIn")} ${msg("doSignWithGoogle")}
-                                                    </a>
-                                                    </#list>
-                                                </div-->
-                                            </#if>
-                                            <button type="button" id="stateButton" class="sb-btn sb-btn-normal sb-btn-success width-100 mb-16" onclick="navigate('state')">
-                                                ${msg("doSignWithState")}
-                                            </button>
-                                            <button type="button" class="sb-btn sb-btn-normal sb-btn-outline-primary width-100 d-flex flex-ai-center flex-jc-center" onclick="navigate('google')">
-                                            <img class="signInWithGoogle" src="${url.resourcesPath}/img/google.png">
-                                            ${msg("doLogIn")} ${msg("doSignWithGoogle")}
-                                            </button>
-                                        </div>
-                                        <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
-                                            <div id="kc-registration" class="field">
-                                                <div class="ui content mt-40 signUpMsg">
-                                                    ${msg("noAccount")} <span id="signup" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span>
-                                                    <span>${msg("noAccount")} <a class="signUpLink" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
-                                                </div>
-                                            </div>
-                                        </#if>
-                                    </div>
-                                </form>
+                           
+                          </div>
+                        </form>
+                      </div>
+                      <div id="useOTPDiv" class="mw-100">
+                        <form id="kc-form-login" class="${properties.kcFormClass!} ui form"
+                          action="${url.loginAction}" method="post">
+                          <input type="hidden" name="page_type" value="login_page" />
+                          <#-- <div class="${properties.kcFormGroupClass!}">
+                            <div
+                              class="mdc-text-field mdc-text-field--with-leading-icon ${properties.kcLabelClass!} <#if usernameEditDisabled??>mdc-text-field--disabled</#if>">
+                              <i class="material-icons mdc-text-field__icon" role="button">phone</i>
+                              <input tabindex="0" required id="user.attributes.mobile_number"
+                                class="mdc-text-field__input ${properties.kcInputClass!}"
+                                name="user.attributes.mobile_number" type="text" autofocus autocomplete="off">
+                              <div class="mdc-line-ripple"></div>
+                              <label for="user.attributes.mobile_number"
+                                class="mdc-floating-label ${properties.kcLabelClass!}">
+                                Phone Number
+                              </label>
                             </div>
-                            <div id="useOTPDiv" class="mw-100" >
-                                <form id="kc-form-login" class="${properties.kcFormClass!} ui form" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
-                                    <input type="hidden" name="page_type" value="login_page" />
-                                    <#--  <div class="${properties.kcFormGroupClass!}">
-                                        <div class="mdc-text-field mdc-text-field--with-leading-icon ${properties.kcLabelClass!} <#if usernameEditDisabled??>mdc-text-field--disabled</#if>">
-                                            <i class="material-icons mdc-text-field__icon" role="button">phone</i>
-                                            <input tabindex="0" required id="user.attributes.mobile_number" class="mdc-text-field__input ${properties.kcInputClass!}" name="user.attributes.mobile_number" type="text" autofocus autocomplete="off">
-                                            <div class="mdc-line-ripple"></div>
-                                            <label for="user.attributes.mobile_number" class="mdc-floating-label ${properties.kcLabelClass!}">
-                                                Phone Number
-                                            </label>
-                                        </div>
-                                    </div>  -->
+                      </div> -->
 
-                                    <div class="field">
-                                        <div>
-                                            <label id="phoneNumberLabel" for="emailOrPhone" class="">
+                      <div class="field">
+                        <div>
+                          <!-- <label id="phoneNumberLabel" for="emailOrPhone" class="">
                                                 Email/Phone number
-                                            </label>
-                                            <label id="phoneNumberLabelPlaceholder" for="emailOrPhone" class="activeLabelColor hide">
-                                                Email/Phone number
-                                            </label>
-                                        </div>
-                                        <input tabindex="0" required id="emailOrPhone" placeholder="Email/Phone number (10 digit number)"
-                                        class="mdc-text-field__input ${properties.kcInputClass!} mt-8" 
-                                        name="emailOrPhone" type="text" autofocus autocomplete="off" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)">
-                                    </div>
-                                    
-                                    <div class="mdc-card__actions">
-                                        <#--  <a href="${url.registrationUrl}" class="mdc-button mdc-card__action mdc-card__action--button">
-                                            <i class="material-icons mdc-button__icon">arrow_back</i>Sign Up
-                                        </a>  -->
-                                        
-                                        <div class="field">
-                                            <button tabindex="0" name="login" id="kc-login" type="submit" class="ui fluid button">
-                                                    Request OTP
-                                            </button>
-                                        </div>
-                                        <div class="field or-container">
-                                            <div class="or-holder">
-                                                <span class="or-divider"></span>
-                                                <span class="or-text">or</span>
-                                            </div>
-                                        </div>
-                                       
-                                        <div id="kc-registration" class="field">
-                                            <div class="ui content mt-40 signUpMsg">
-                                                <span>${msg("noAccount")} <a class="signUpLink" href="${client.baseUrl}app/create-account">${msg("registerHere")}</a></span>
-                                            </div>
-                                            <a href = "https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform" target="_blank">Get help on Whatsapp</a>
-                                        </div>
-                                        <div id="selfSingUp" class="hide">
-                                            <p class="or my-16 textCenter">OR</p>
-                                            <div class="field">
-                                                <#if realm.password && social.providers??>
-                                                    <!--div id="kc-social-providers">
-                                                        <#list social.providers as p>
-                                                        <a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} ui fluid blue basic button textCenter">
-                                                        <i class="icon signInWithGoogle"></i>${msg("doSignIn")} ${msg("doSignWithGoogle")}
-                                                        </a>
-                                                        </#list>
-                                                    </div-->
-                                                </#if>
-                                                <button type="button" id="stateButton" class="sb-btn sb-btn-normal sb-btn-success width-100 mb-16" onclick="navigate('state')">
-                                                    ${msg("doSignWithState")}
-                                                </button>
-                                                <button type="button" class="sb-btn sb-btn-normal sb-btn-outline-primary width-100 d-flex flex-ai-center flex-jc-center" onclick="navigate('google')">
-                                                <img class="signInWithGoogle" src="${url.resourcesPath}/img/google.png">
-                                                ${msg("doLogIn")} ${msg("doSignWithGoogle")}
-                                                </button>
-                                            </div>
-                                            <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
-                                                <div id="kc-registration" class="field">
-                                                    <div class="ui content mt-40 signUpMsg">
-                                                        ${msg("noAccount")} <span id="signup" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span>
-                                                        <span>${msg("noAccount")} <a class="signUpLink" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
-                                                    </div>
-                                                </div>
-                                            </#if>
-                                        </div>
-                                    </div>
-                                </form>
-                            </div>
+                                            </label> -->
+                          <label id="phoneNumberLabelPlaceholder" for="emailOrPhone" class="activeLabelColor hide">
+                            Phone Number/Email ID
+                          </label>
                         </div>
+                        <input tabindex="0" required id="emailOrPhone" placeholder="Phone Number/Email ID"
+                          class="mdc-text-field__input ${properties.kcInputClass!} mt-8" name="emailOrPhone" type="text"
+                          autofocus autocomplete="off" onfocusin="inputBoxFocusIn(this)"
+                          onfocusout="inputBoxFocusOut(this)">
+                      </div>
+
+                      <div class="mdc-card__actions">
+                        <#-- <a href="${url.registrationUrl}"
+                          class="mdc-button mdc-card__action mdc-card__action--button">
+                          <i class="material-icons mdc-button__icon">arrow_back</i>Sign Up
+                          </a> -->
+
+                          <div class="field">
+                            <button tabindex="0" name="otp-login" id="otp-login" type="submit" class="ui fluid button blueButton" onclick="otpClick(event, 'Login Button with OTP', 'otp-login')">Get OTP</button>
+                          </div>
+                          <div class="field or-container">
+                            <div class="or-holder">
+                              <span class=""></span>
+                              <span class="">OR</span>
+                            </div>
+                          </div>
+
+                          <div id="kc-registration" class="field">
+                            <div class="ui content mt-20 signUpMsg">
+                              <!-- <span> -->
+                                <!-- ${msg("noAccount")}  -->
+                                <a class="ui fluid button whiteButton"
+                                  href="${client.baseUrl}app/create-account" onclick="return otpClick(event, 'Create Account', 'createAccount-loginOTP')" id="createAccount-loginOTP">${msg("registerHere")}</a>
+                              <!-- </span> -->
+                              <span class="whatsApp">
+                                <img alt="Logo" src="${url.resourcesPath}/img/whatsapp.png" width="30">
+                            </span>
+                              <a class="ui fluid button greenButton"
+                                href="https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform"
+                                target="_blank" id="WhatsApp-loginOTP" onclick="return otpClick(event, 'WhatsApp', 'WhatsApp-loginOTP')">Get Help on WhatsApp?</a>
+                            </div>
+                          </div>
+                          <div id="selfSingUp" class="hide">
+                            <p class="or my-16 textCenter">OR</p>
+                            <div class="field">
+                             
+                             
+                            </div>
+                          
+                          </div>
+                      </div>
+                      </form>
                     </div>
-                    <#--  <div class="ui column tablet only computer only"></div>  -->
+                  </div>
                 </div>
+                <#-- <div class="ui column tablet only computer only">
+              </div> -->
+            </div>
             </div>
-        </div>
-    </div>
-    <script type="text/javascript">
-        var slideIndex = 0;
-        showSlides();
+            </div>
+            </div>
+            <script type="text/javascript">
+              var slideIndex = 0;
+              showSlides();
+              function otpClick(e, param1, param2){
+                try {
+                e.preventDefault()
+                let obj = {
+                EventDetails: {
+                  EventName: param1,
+                  Name : param2
+                }
+              }
+              const userdata = Object.assign(MainVisitorDetails, obj)
+              fetch("https://track.plumb5.com/EventDetails/SaveEventDetails", {
+                method: "POST",
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify( userdata)
+              }).then(res => {
+                if(param1 === 'Login Button with OTP') {
+                  setTimeout(document.getElementById("kc-form-login").submit(), 1000);
+                } else if(param1 === 'Login Button'){
+                  setTimeout(document.getElementById("kc-form-login-pwd").submit(), 1000);
+                } else if(param1 === 'Create Account'){
+                  var url = `${client.baseUrl}app/create-account`
+                  window.open(url, '_self').focus();
+                } else if(param1 === 'WhatsApp'){
+                  var url = `https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform`
+                  window.open(url, '_blank').focus();
+                }
 
-        function showSlides() {
-		var i;
-		var slides = document.getElementsByClassName("mySlides");
-		var dots = document.getElementsByClassName("dot");
-		for (i = 0; i < slides.length; i++) {
-		    slides[i].style.display = "none";  
-		}
-		slideIndex++;
-		if (slideIndex > slides.length) {slideIndex = 1}    
-		for (i = 0; i < dots.length; i++) {
-		    dots[i].className = dots[i].className.replace(" active", "");
-		}
-		slides[slideIndex-1].style.display = "block";  
-		dots[slideIndex-1].className += " active";
-		setTimeout(showSlides, 5000); // Change image every 5 seconds
-        }
+                // if (document.getElementById("kc-form-login")) {
+                //   setTimeout("submitForm()", 1000); // set timout
+                // }
+              }).catch(error => {
+              // do something with error
+              if(param1 === 'Login Button with OTP') {
+                  setTimeout(document.getElementById("kc-form-login").submit(), 1000);
+                } else if(param1 === 'Login Button'){
+                  setTimeout(document.getElementById("kc-form-login-pwd").submit(), 1000);
+                } else if(param1 === 'Create Account'){
+                  var url = `${client.baseUrl}app/create-account`
+                  window.open(url, '_self').focus();
+                } else if(param1 === 'WhatsApp'){
+                  var url = `https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform`
+                  window.open(url, '_blank').focus();
+                }
+              })
+            } catch(error) {
+                // code to run if there are any problems
+                if(param1 === 'Login Button with OTP') {
+                  setTimeout(document.getElementById("kc-form-login").submit(), 1000);
+                } else if(param1 === 'Login Button'){
+                  setTimeout(document.getElementById("kc-form-login-pwd").submit(), 1000);
+                } else if(param1 === 'Create Account'){
+                  var url = `${client.baseUrl}app/create-account`
+                  window.open(url, '_self').focus();
+                } else if(param1 === 'WhatsApp'){
+                  var url = `https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform`
+                  window.open(url, '_blank').focus();
+                }
+              }
+              return true
+            }
+            // function submitForm() { // submits form
+            //   console.log(document.getElementById("kc-form-login"))
+            //   debugger
+            //   if(param1 === 'Login Button with OTP') {
+            //   document.getElementById("kc-form-login").submit();
+            //   } else {
+            //     document.getElementById("kc-form-login-pwd").submit();
+            //   }
+            // }
+              function showSlides() {
+                var i;
+                var slides = document.getElementsByClassName("mySlides");
+                var dots = document.getElementsByClassName("dot");
+                for (i = 0; i < slides.length; i++) {
+                  slides[i].style.display = "none";
+                }
+                slideIndex++;
+                if (slideIndex > slides.length) { slideIndex = 1 }
+                for (i = 0; i < dots.length; i++) {
+                  dots[i].className = dots[i].className.replace(" active", "");
+                }
+                slides[slideIndex - 1].style.display = "block";
+                dots[slideIndex - 1].className += " active";
+                setTimeout(showSlides, 5000); // Change image every 5 seconds
+              }
 
-	function passwordOrOtp() {
+              function passwordOrOtp() {
                 if (document.getElementById('usePasswordRB').checked) {
-                    document.getElementById('usePasswordDiv').style.display = 'block';
-                    document.getElementById('useOTPDiv').style.display = 'none';
+                  document.getElementById('usePasswordDiv').style.display = 'block';
+                  document.getElementById('useOTPDiv').style.display = 'none';
                 } else {
-                    document.getElementById('usePasswordDiv').style.display = 'none';
-                    document.getElementById('useOTPDiv').style.display = 'block';
+                  document.getElementById('usePasswordDiv').style.display = 'none';
+                  document.getElementById('useOTPDiv').style.display = 'block';
                 }
-            }
+              }
 
-    </script>
+            </script>
+          </#if>
     </#if>
-</#if>
-</@layout.registrationLayout>
\ No newline at end of file
+  </@layout.registrationLayout>
diff --git a/keycloak/themes/aastrika/login/messages/messages_en.properties b/keycloak/themes/aastrika/login/messages/messages_en.properties
index fd648ef3..a6f0f7d4 100644
--- a/keycloak/themes/aastrika/login/messages/messages_en.properties
+++ b/keycloak/themes/aastrika/login/messages/messages_en.properties
@@ -276,7 +276,7 @@ requiredAction.UPDATE_PROFILE=Update Profile
 requiredAction.VERIFY_EMAIL=Verify Email
 user_not_found=This email ID doesn''t belong to a valid user
 p3pPolicy=CP="This is not a P3P policy!"
-usernamePlaceholder = Enter your Registered Email address/Mobile number
-passwordPlaceholder = Enter password
+usernamePlaceholder = Enter your Registered Email Address/Mobile Number
+passwordPlaceholder = Enter Password
 loginDiksha = Log into Sphere
-registerHere = Create an account
+registerHere = Create an Account
diff --git a/keycloak/themes/aastrika/login/resources/css/login.css b/keycloak/themes/aastrika/login/resources/css/login.css
index 6d2a7e83..f7cf41e2 100644
--- a/keycloak/themes/aastrika/login/resources/css/login.css
+++ b/keycloak/themes/aastrika/login/resources/css/login.css
@@ -1,11 +1,13 @@
 @import "./fonts/notosans/notosans.css";
 @import "./fonts/poppins/poppins.css";
-body{
+
+body {
     font-family: "Poppins Regular";
     position: relative;
     letter-spacing: 0.2px;
 }
-.ui.container.fullpage-background-image{
+
+.ui.container.fullpage-background-image {
     max-width: 320px !important;
     margin: 0 auto !important;
     box-shadow: none !important;
@@ -15,10 +17,12 @@ body{
     border: none !important;
     box-shadow: 0px 20px 60px #3E3E3E29 !important;
 }
-.fs-14{
+
+.fs-14 {
     font-size: 14px !important;
 }
-.custom-grid{
+
+.custom-grid {
     display: grid;
     align-items: center;
     grid-template-columns: 1.3fr 1fr;
@@ -29,13 +33,14 @@ body{
     height: inherit; */
 }
 
-.login-section{
+.login-section {
     height: 100%;
-    display: flex !important;;
+    display: flex !important;
+    ;
     /* align-items: center; */
     justify-content: center;
     width: 100% !important;
-    min-width: 100%;
+    /* min-width: 100%; */
     /* overflow-y: auto;
     overflow-x: hidden;
     justify-content: center;
@@ -55,10 +60,10 @@ body{
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    
+
 }
 
-.dots-menu{
+.dots-menu {
     position: relative;
     z-index: 900;
     width: 100%;
@@ -68,7 +73,7 @@ body{
     justify-content: center;
 }
 
-.img-container{
+.img-container {
     flex: auto;
     display: flex;
     align-items: center;
@@ -86,64 +91,73 @@ body{
     display: inline-block;
     transition: background-color 0.6s ease;
     background: #BEBEBE 0% 0% no-repeat padding-box;
-    color: rgba(255,255,255, 0);
-    
+    color: rgba(255, 255, 255, 0);
+
 }
-  
+
 .dot.active {
     background: #00A9F4 0% 0% no-repeat padding-box;
 }
+
 @media screen and (min-width: 768px) {
-    body{
+    body {
         background-size: cover;
         background-repeat: no-repeat;
         min-height: 100vh;
-        
-        
-     }
-     .ui.container.fullpage-background-image{
-        max-width: 944px !important;
+
+
+    }
+
+    .ui.container.fullpage-background-image {
+        /* max-width: 944px !important; */
         /* padding: 20px 0 !important; */
         /* margin: 30px auto!important; */
-        box-shadow: 0px 20px 60px #3E3E3E29 !important;;
+        box-shadow: 0px 20px 60px #3E3E3E29 !important;
+        ;
         width: auto;
         min-width: auto;
         border-radius: 6px !important;
         border: none !important;
     }
 
-    .custom-wrapper .custom-grid .left-box{
+    .custom-wrapper .custom-grid .left-box {
         box-shadow: none !important;
     }
 }
-.ui.button:focus{
-    box-shadow: 0 2px 8px 0 rgba(0,0,0,.16) !important;
+
+.ui.button:focus {
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16) !important;
 }
+
 .w-100 {
     width: 100px !important;
 }
+
 .w-95 {
     width: 95px !important;
 }
 
-.activeLabelColor{
-    color:#024f9d !important;
+.activeLabelColor {
+    color: #024f9d !important;
 }
-.ui.form input[type=text], .ui.form input[type=password], .ui.form input[type=email]{
+
+.ui.form input[type=text],
+.ui.form input[type=password],
+.ui.form input[type=email] {
     border-radius: 8px;
     border: 1px solid #70707069;
     font-family: 'Poppins Regular', 'Noto Sans', sans-serif;
 }
 
 .ui.form .field {
-    margin: 0 0 2.2em;
+    margin: 0 0 1em;
 }
 
-input:focus{ 
+input:focus {
     border: 1px solid #024f9d !important;
 }
 
-input::placeholder{
+input::placeholder {
     color: #BEBEBE;
 }
 
@@ -156,54 +170,61 @@ input[type='password']::placeholder {
     -webkit-text-security: disc !important;
 }
 
-.signInWithGoogle{
+.signInWithGoogle {
     vertical-align: bottom;
     height: 18px !important;
     margin-right: 5px;
-    
+
 }
-.ui.basic.blue.button.googleButton{
+
+.ui.basic.blue.button.googleButton {
     color: #333 !important;
     vertical-align: middle;
     line-height: 18px;
 }
+
 .ui.basic.blue.button.googleButton:hover,
-.ui.basic.blue.button.googleButton:focus{
+.ui.basic.blue.button.googleButton:focus {
     color: #024f9d !important;
 }
-.ui.basic.blue.button.stateButton{
+
+.ui.basic.blue.button.stateButton {
     margin-top: 10px !important;
-    box-shadow: 0 0 0 1px #2CA58D inset!important;
+    box-shadow: 0 0 0 1px #2CA58D inset !important;
 }
+
 .ui.basic.blue.button.stateButton:hover,
-.ui.basic.blue.button.stateButton:focus{
+.ui.basic.blue.button.stateButton:focus {
     color: #2CA58D !important;
 }
+
 .ui.fluid.large.submit.button {
     color: #F9F9F9;
 }
-.or{
+
+.or {
     color: #9B9B9B;
-    background-image:linear-gradient(#979797,#979797),linear-gradient(#979797,#979797);
-    background-size:45% 1px;
-    background-position:center left,center right;
-    background-repeat:no-repeat;
+    background-image: linear-gradient(#979797, #979797), linear-gradient(#979797, #979797);
+    background-size: 45% 1px;
+    background-position: center left, center right;
+    background-repeat: no-repeat;
 }
-.signUpMsg{
+
+.signUpMsg {
     font-family: 'Poppins Medium', 'Noto Sans', sans-serif;
     font-size: 14px;
     text-align: center;
     color: #707070;
 }
 
-.page-info{
+.page-info {
     font-family: 'Poppins Medium', 'Noto Sans', sans-serif;
     font-size: 14px;
     text-align: center;
     color: #707070;
 }
 
-.page-title{
+.page-title {
     font-family: 'Poppins Medium', 'Noto Sans', sans-serif;
     font-size: 16px;
     text-align: center;
@@ -212,21 +233,24 @@ input[type='password']::placeholder {
 
 .signUpLink {
     font-family: 'Poppins SemiBold', 'Noto Sans', sans-serif;
-    color: rgb(0, 116, 182,1);
+    color: rgb(0, 116, 182, 1);
     transition: all .23s ease-in;
 }
+
 .signUpLink:hover {
     color: rgb(0, 116, 182, 0.8);
 }
 
-.formMsg{
-    font-size: 14px;	
+.formMsg {
+    font-size: 14px;
     line-height: normal;
 }
-.signInHead{
+
+.signInHead {
     font-size: 16px;
     font-family: 'Poppins SemiBold', 'Noto Sans', sans-serif;
 }
+
 .ui.form .field>label {
     font-family: 'Poppins Regular', 'Noto Sans', sans-serif;
     font-size: 1em;
@@ -235,86 +259,134 @@ input[type='password']::placeholder {
     font-weight: normal;
     margin: 0 0 .715rem 0;
 }
-.forgetPasswordLink{
-    color: rgb(0, 116, 182,1) !important;
+
+.forgetPasswordLink {
+    color: rgb(0, 116, 182, 1) !important;
     font-size: 12px;
-    line-height: 17px;
-    position: absolute;
-    right: 0;
-    top: 97px;
+    /* line-height: 17px;
+    position: absolute; */
+    /* right: 0;
+    top: 97px; */
     transition: all .25s ease-in;
     font-family: 'Poppins Medium', 'Noto Sans', sans-serif;
 }
+
 .forgetPasswordLink:hover,
-.forgetPasswordLink:focus{
-    color:rgb(0, 116, 182, .8) !important;
+.forgetPasswordLink:focus {
+    color: rgb(0, 116, 182, .8) !important;
     outline: none;
-    font-weight:bold;
+    font-weight: bold;
 }
+
 .textCenter {
     text-align: center !important;
 }
-.mb-28{
+.mb-20 {
+    margin-bottom: 20px !important;
+}
+.mb-28 {
     margin-bottom: 28px !important;
 }
-.mb-30{
+
+.mb-30 {
     margin-bottom: 30px !important;
 }
-.mb-40{
+
+.mb-40 {
     margin-bottom: 40px !important;
 }
-.mt-46{
+
+.mt-46 {
     margin-top: 46px;
 }
-.mt-20{
+
+.mt-20 {
     margin-top: 20px;
 }
-.mt-30{
+
+.mt-30 {
     margin-top: 30px;
 }
-.mt-40{
+
+.mt-40 {
     margin-top: 40px;
 }
+.mt-20 {
+    margin-top: 20px;
+}
+.warnText{
+    color: #DB4848 !important;
+}
+.whatsApp{
+    position: absolute !important;
+    left: 46px !important;
+    bottom: 2px !important;
+    z-index: 9 !important;
+}
+.whatsApp-otp{
+    position: absolute !important;
+    left: 26px !important;
+    bottom: 3px !important;
+    z-index: 9 !important;
+}
+.rel{
+    position: relative !important;
+}
 .mt-8 {
     margin-top: 8px !important;
 }
+.mt-10{
+    margin-top: 10px !important;
+}
 .mb-18 {
     margin-bottom: 18px !important;
 }
-.mt-90{
+
+.mt-90 {
     margin-top: 90px;
 }
-.mt-65{
+
+.mt-65 {
     margin-top: 65px !important;
 }
-.mt-127{
+
+.mt-127 {
     margin-top: 127px;
 }
-.mt-27{
+
+.mt-27 {
     margin-top: 27px;
 }
+
 .mb-36 {
     margin-bottom: 36px !important;
 }
-.mt-36{
+
+.mt-36 {
     margin-top: 36px !important;
 }
-.mt-40{
+
+.mt-40 {
     margin-top: 40px !important;
 }
+
 .mb-30 {
     margin-bottom: 30px !important;
 }
-.mt-30{
+
+.mt-30 {
     margin-top: 30px !important;
 }
-.mb-56{
+
+.mb-56 {
     margin-bottom: 56px;
 }
-.mt-76{
+
+.mt-76 {
     margin-top: 76px;
 }
-.ml-16{
+
+.ml-16 {
     margin-left: 16px;
 }
 
@@ -323,17 +395,18 @@ input[type='password']::placeholder {
     display: flex;
     width: inherit;
     align-items: center;
-    margin: 0 0 2em;
+    margin: 0 0 1em;
 }
 
-.backToLogin {	
+.backToLogin {
     color: #E76026 !important;
-    font-size: 14px;	
+    font-size: 14px;
     line-height: 19px;
     margin-top: 10px;
     display: block;
 }
-.logo-image{
+
+.logo-image {
     max-width: 100% !important;
     width: auto !important;
     /* max-height: 56px !important; */
@@ -341,19 +414,19 @@ input[type='password']::placeholder {
     /* height: 120px !important; */
 }
 
-.or-container {
+/* .or-container {
     height: 40px;
     position: relative;
     opacity: 0.4;
-}
+} */
 
 .or-holder {
-    position: absolute;
-    width: 100%;
+    /* position: absolute;
+    width: 100%; */
     display: flex;
     align-items: center;
     justify-content: center;
-    top: 50%;
+    /* top: 50%; */
 }
 
 .or-divider {
@@ -364,86 +437,155 @@ input[type='password']::placeholder {
 }
 
 .or-text {
-    background: #e5e5e5;
+    /* background: #e5e5e5;
     border: 1px solid #b9babe;
-    border-radius: 100%;
+    border-radius: 100%; */
     color: #000;
-    font-size: 14px;
+    font-weight: 500;
+    /* font-size: 14px;
     height: 34px;
     line-height: 16px;
     padding: 7px;
     text-align: center;
     width: 34px;
-    position: absolute;
+    position: absolute; */
 }
 
-.ui.button{
-    font-family: 'Poppins SemiBold', 'Noto Sans', sans-serif !important;
-    color: #F9F9F9 !important;
-    font-size: 14px;	
+.ui.button {
+    /* font-family: 'Roboto' !important; */
+    font-size: 14px;
+    /* line-height: 19px; */
+    /* height: 35px; */
+    border-radius: 50px;
+    transition: all .25s ease-in;
+}
+.blueButton {
+    color: #FFFFFF !important;
+    background-color: #1C5D95 !important;
+}
+.whiteButton {
+    /* font-family: 'Roboto' !important; */
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    color: #1C5D95 !important;
+    background-color: #fff !important;
+    border: 1px solid #1C5D95 !important;
     line-height: 19px;
-    height: 40px;
-    background-color:rgb(0, 116, 182, 1) !important;
-    border-radius: 8px;
+    height: 35px;
+    border-radius: 50px;
     transition: all .25s ease-in;
 }
-.button:hover{
-    background-color:rgb(0, 116, 182, .8) !important;
+.greenButton {
+    /* font-family: 'Roboto' !important; */
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    color: #4BCA59 !important;
+    background-color: #fff !important;
+    border: 1px solid #4BCA59 !important;
+    line-height: 19px;
+    height: 35px;
+    border-radius: 50px;
+    transition: all .25s ease-in;
+    margin-top: 70px !important;
+    position: relative !important;
 }
 
-.ui.text.success{
+.mb-10 {
+    margin-bottom: 10px;
+}
+/* .button:hover {
+    background-color: rgb(0, 116, 182, .8) !important;
+} */
+
+.ui.text.success {
     color: #33B17B;
 }
-.ui.text.warning{
+
+.ui.text.warning {
     color: #794b02;
 }
-.ui.text.error{
-    color:#9f3a38;
+
+.ui.text.error {
+    color: #9f3a38;
+    font-weight: bold;
+    text-align: left;
 }
-.ui.text.info{
-    color:#276f86;
+
+.ui.text.info {
+    color: #276f86;
 }
-.hide{
+
+.hide {
     display: none !important;
 }
+
 i.icon.eye.slash:before {
     content: "\f070";
 }
-.mt-45{
+
+.mt-45 {
     margin-top: 45px;
 }
+
 /* a{
     color: #024f9d !important;
 } */
-.registerLink{
+.registerLink {
     color: #024f9d !important;
     font-weight: bold;
 }
+
 .registerLink:hover,
-.registerLink:focus{
+.registerLink:focus {
     font-weight: bold;
-    outline:none;
+    outline: none;
     cursor: pointer;
 }
 
-.ui.form{
-    width: 340px;;
+.ui.form {
+    width: 340px;
 }
-.ui.blue.button{
-    box-shadow: 0 0 0 1px #024f9d inset!important;
+
+.ui.blue.button {
+    box-shadow: 0 0 0 1px #024f9d inset !important;
 }
-.smsinput{
+
+/* .smsinput {
     letter-spacing: 3px;
-}
-.ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url]{
+} */
+
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url] {
     font-family: 'Poppins Regular', 'Noto Sans', sans-serif;
-    
+
 }
+
 .loginupdate .ui.text.warning {
     color: #333;
 }
-button,input,textarea,optgroup,select,
-h1, h2, h3, h4, h5,
+
+button,
+input,
+textarea,
+optgroup,
+select,
+h1,
+h2,
+h3,
+h4,
+h5,
 .ui.header,
 .ui.text.container,
 .ui.input input,
@@ -482,20 +624,25 @@ h1, h2, h3, h4, h5,
 .ui.form input[type=url],
 .ui.menu,
 .ui.dropdown,
-.ui.category.search>.results .category>.name
-{
+.ui.category.search>.results .category>.name {
     font-family: 'Poppins Regular', 'Noto Sans', sans-serif;
 }
-.height-fix{
+
+.height-fix {
     min-height: auto;
-    display: flex !important;
+    /* display: flex !important; */
     flex-direction: column;
     /* justify-content: center; */
     min-height: auto;
-    padding: 4.5rem 1rem 0 1rem !important;
+    padding: 1.5rem 1rem 0 1rem !important;
     align-items: center;
 }
 
+.mtb {
+    margin-bottom: 0px !important;
+    margin-top: 10px !important;
+}
+
 .custom-wrapper {
     min-height: 100vh;
     position: relative;
@@ -505,31 +652,41 @@ h1, h2, h3, h4, h5,
     /* padding: 30px; */
 }
 
-.max-container{
+.fwb {
+    font-weight: bold;
+}
+
+.max-container {
     max-width: 320px;
-    display: flex !important;
+    /* display: flex !important; */
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: inherit;
 }
 
-.mw-100{
+.mw-100 {
     max-width: 100% !important;
 }
 
-.mySlides {display: none;}
+.mySlides {
+    display: none;
+}
+
 .mySlides img {
     width: auto;
     height: 430px;
 }
-img {vertical-align: middle;}
+
+img {
+    vertical-align: middle;
+}
 
 /* Slideshow container */
 .slideshow-container {
-  max-width: 1000px;
-  position: relative;
-  margin: auto;
+    max-width: 1000px;
+    position: relative;
+    margin: auto;
 }
 
 /* Fading animation */
@@ -538,24 +695,52 @@ img {vertical-align: middle;}
     -webkit-animation-duration: 1.5s;
     animation-name: fade;
     animation-duration: 1.5s;
-  }
-  
-  @-webkit-keyframes fade {
-    from {opacity: .4} 
-    to {opacity: 1}
-  }
-  
-  @keyframes fade {
-    from {opacity: .4} 
-    to {opacity: 1}
-  }
+}
+
+@-webkit-keyframes fade {
+    from {
+        opacity: .4
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+@keyframes fade {
+    from {
+        opacity: .4
+    }
 
+    to {
+        opacity: 1
+    }
+}
+.ui.segment {
+    padding: 20px 15px !important;
+}
 
 @media screen and (max-width: 768px) {
-    .custom-wrapper .custom-grid .left-box{
+    .custom-wrapper {
+    min-height: 58vh;
+    /* justify-content: flex-start; */
+    /* margin-left: -30px; */
+    margin-top: 15px;
+    }
+    .ui.container.fullpage-background-image {
+        margin-right: 35px !important;
+    }
+    .max-container {
+        max-width: 318px;
+    }
+    .custom-wrapper .custom-grid .left-box {
         display: none !important;
     }
-    .custom-wrapper .custom-grid{
+
+    .custom-wrapper .custom-grid {
         grid-template-columns: 1fr;
     }
-}
+    .whatsApp-otp {
+        left: 26px !important;
+    }
+}
\ No newline at end of file
diff --git a/keycloak/themes/aastrika/login/resources/img/SMS.png b/keycloak/themes/aastrika/login/resources/img/SMS.png
new file mode 100644
index 00000000..ef66905b
Binary files /dev/null and b/keycloak/themes/aastrika/login/resources/img/SMS.png differ
diff --git a/keycloak/themes/aastrika/login/resources/img/aastar-logo.svg b/keycloak/themes/aastrika/login/resources/img/aastar-logo.svg
new file mode 100644
index 00000000..d551e8dd
--- /dev/null
+++ b/keycloak/themes/aastrika/login/resources/img/aastar-logo.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 395.54 146.73" style="enable-background:new 0 0 395.54 146.73;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7B6961;}
+</style>
+<path class="st0" d="M68.32,45.43L56.95,4.25l-2.49,0.69l11.39,41.22C66.66,45.87,67.49,45.63,68.32,45.43z M62.99,47.3L43.61,9.18
+	l-2.3,1.17l19.4,38.15C61.46,48.06,62.22,47.66,62.99,47.3z M53.62,54.46c0.29-0.34,0.58-0.67,0.88-0.99L22.35,25.06L20.65,27
+	l32.18,28.44C53.08,55.1,53.34,54.78,53.62,54.46z M74.29,44.67L71.9,1.99l-2.58,0.14l2.39,42.7
+	C72.57,44.74,73.43,44.68,74.29,44.67z M58.34,50.06L32.01,16.39l-2.03,1.59l26.35,33.71C56.98,51.11,57.65,50.57,58.34,50.06z
+	 M91.16,49.93l23.46-35.89l-2.16-1.41L89,48.52C89.74,48.95,90.46,49.43,91.16,49.93z M87.32,2.89l-2.55-0.42l-6.91,42.35
+	c0.85,0.09,1.7,0.22,2.55,0.39L87.32,2.89z M86.25,47.1l15.78-39.69l-2.4-0.95l-15.79,39.7C84.66,46.43,85.46,46.74,86.25,47.1z
+	 M122.2,20.48l-1.74,1.91c27.44,24.42,30.47,66.55,6.53,94.63c-11.75,13.78-28.17,22.16-46.22,23.6
+	c-16.56,1.32-32.67-3.35-45.86-13.2c0,0.02,4.65-5.95,4.65-5.97c10.68,7.91,23.26,11.79,35.79,11.79c17.04,0,33.99-7.17,45.88-21.13
+	c10.44-12.24,15.49-27.82,14.21-43.86c-1.24-15.64-8.37-29.89-20.07-40.27l-8.49,9.33c19.43,17.13,21.62,46.84,4.75,66.62
+	c-8.26,9.68-19.79,15.57-32.47,16.57c-11.48,0.91-22.67-2.27-31.87-9.01c0,0.01,4.67-6.02,4.69-6.02c7.69,5.57,17,8.19,26.57,7.43
+	c10.65-0.85,20.34-5.79,27.27-13.92c14.19-16.64,12.33-41.66-4.08-56.03l-8.48,9.32c5.51,4.74,8.86,11.34,9.43,18.59
+	c0.58,7.3-1.72,14.38-6.47,19.95c-4.75,5.57-11.38,8.96-18.68,9.54c-7.16,0.57-14.12-1.64-19.64-6.21l-1.59,2.03
+	c12.58,10.36,31.25,8.76,41.87-3.68c5.2-6.09,7.71-13.85,7.07-21.83c-0.57-7.14-3.59-13.71-8.59-18.73c-0.01,0,5-5.51,5.02-5.5
+	c13.8,13.64,14.94,35.9,2.16,50.89c-6.49,7.61-15.55,12.23-25.51,13.02c-9.68,0.76-19.09-2.18-26.6-8.3L43.9,112.1
+	c10.03,8.1,22.57,12,35.48,10.97c13.37-1.06,25.53-7.27,34.23-17.47c17.27-20.25,15.61-50.38-3.26-68.64c0,0,5.02-5.51,5.02-5.51
+	c21.82,20.95,23.79,55.67,3.91,78.98c-20.26,23.76-55.78,26.96-79.96,7.54l-7.83,10.04c12.54,10.03,27.84,15.4,43.8,15.4
+	c1.89,0,3.79-0.08,5.69-0.23c18.74-1.49,35.78-10.19,47.98-24.49C153.81,89.55,150.67,45.83,122.2,20.48z M47.94,79.95L7.21,92.73
+	l0.77,2.46L48.74,82.4C48.43,81.6,48.17,80.78,47.94,79.95z M50.09,85.43l-37.24,21.26l1.28,2.24l37.26-21.26
+	C50.91,86.94,50.48,86.19,50.09,85.43z M53.36,90.36L21.8,118.84l1.73,1.91L55.1,92.26C54.49,91.65,53.91,91.01,53.36,90.36z
+	 M48.87,62.38L8.41,47.91l-0.87,2.43l40.5,14.48C48.28,63.99,48.55,63.18,48.87,62.38z M51.4,57.45l-36.47-22l-1.33,2.21L50.1,59.68
+	C50.49,58.92,50.93,58.18,51.4,57.45z M46.98,73.86L4.4,77.28l0.21,2.57l42.61-3.42C47.1,75.58,47.02,74.72,46.98,73.86z
+	 M47.37,67.72l-42.35-6.1l-0.37,2.55l42.39,6.1C47.11,69.42,47.22,68.57,47.37,67.72z"/>
+<g>
+	<path class="st0" d="M166.22,73.81c3.05-1.27,5.13-1.79,8.63-2.08c3.5-0.37,4.76-0.37,7.44-0.37h2.46v-1.26
+		c0-7.37-3.42-11.09-10.19-11.09c-3.87,0-7.74,1.49-9.45,2.68l-1.19,0.89l-1.79-2.53c0.37-0.3,0.82-0.67,1.49-1.12
+		s2.08-1.04,4.24-1.79c2.16-0.82,4.47-1.19,6.85-1.19c8.63,0,13.17,4.84,13.17,14.06v24.04h-3.13v-4.91l0.3-3.35h-0.15
+		c0.15,0-3.42,9.15-13.02,9.15c-3.35,0-6.33-0.89-8.86-2.75s-3.8-4.54-3.8-8.04C159.23,78.8,162.13,75.6,166.22,73.81z
+		 M172.03,92.05c3.8,0,6.92-1.64,9.23-4.84c2.31-3.27,3.5-6.92,3.5-10.94v-2.01h-2.38c-1.56,0-2.83,0-3.79,0.07
+		c-0.97,0-2.31,0.07-4.17,0.3c-1.79,0.15-3.27,0.45-4.46,0.89c-3.57,1.04-7.81,3.65-7.44,8.41
+		C162.5,88.18,166.07,92.05,172.03,92.05z"/>
+	<path class="st0" d="M203.35,73.81c3.05-1.27,5.13-1.79,8.63-2.08c3.5-0.37,4.76-0.37,7.44-0.37h2.46v-1.26
+		c0-7.37-3.42-11.09-10.19-11.09c-3.87,0-7.74,1.49-9.45,2.68l-1.19,0.89l-1.79-2.53c0.37-0.3,0.82-0.67,1.49-1.12
+		s2.08-1.04,4.24-1.79c2.16-0.82,4.47-1.19,6.85-1.19c8.63,0,13.17,4.84,13.17,14.06v24.04h-3.13v-4.91l0.3-3.35h-0.15
+		c0.15,0-3.42,9.15-13.02,9.15c-3.35,0-6.33-0.89-8.86-2.75s-3.8-4.54-3.8-8.04C196.36,78.8,199.26,75.6,203.35,73.81z
+		 M209.16,92.05c3.8,0,6.92-1.64,9.23-4.84c2.31-3.27,3.5-6.92,3.5-10.94v-2.01h-2.38c-1.56,0-2.83,0-3.79,0.07
+		c-0.97,0-2.31,0.07-4.17,0.3c-1.79,0.15-3.27,0.45-4.46,0.89c-3.57,1.04-7.81,3.65-7.44,8.41
+		C199.63,88.18,203.21,92.05,209.16,92.05z"/>
+	<path class="st0" d="M233.34,89.59l2.01-2.38c0.3,0.37,0.74,0.82,1.34,1.34c0.59,0.52,1.86,1.19,3.87,2.08
+		c2.01,0.82,4.17,1.26,6.33,1.26c4.84,0,8.56-2.6,8.56-7c0-3.5-3.27-5.8-7.22-7.29c-5.8-2.16-13.25-4.54-13.25-11.61
+		c0-3.2,1.12-5.66,3.42-7.37c2.31-1.79,5.13-2.68,8.48-2.68c4.47,0,8.48,1.71,9.9,2.98l1.12,1.04l-1.86,2.53L255,61.53
+		c-0.89-0.82-4.54-2.53-8.33-2.53c-4.69,0-8.41,2.23-8.41,6.77c0,3.57,3.27,5.88,7.22,7.44c5.8,2.16,13.25,4.46,13.25,11.68
+		c0,5.95-4.99,10.05-11.91,10.05c-5.36,0-10.27-2.23-12.06-4.02L233.34,89.59z"/>
+	<path class="st0" d="M269.14,59.9h-4.91v-2.83h4.91V46.5h3.13v10.57h9.75v2.83h-9.75v20.46c0,4.54,1.34,7.81,3.35,9.3
+		c2.01,1.41,3.65,1.79,5.51,1.79l1.71-0.15v2.9c-0.52,0.08-1.12,0.15-1.86,0.15c-3.87,0-11.83-1.41-11.83-13.77V59.9z"/>
+	<path class="st0" d="M290.27,94.06V56.85h3.12v7.07l-0.3,3.05h0.15c2.01-6.03,6.33-10.42,11.91-10.42l2.16,0.22v3.13
+		c-0.59-0.07-1.19-0.15-1.71-0.15c-5.43,0-9.3,4.39-11.09,10.42c-0.74,2.38-1.12,4.99-1.12,7.81v16.07H290.27z"/>
+	<path class="st0" d="M314.08,47.4v-5.43h3.72v5.43H314.08z M314.38,94.06V56.85h3.12v37.21H314.38z"/>
+	<path class="st0" d="M329.56,94.06V41.96h3.12v29.54h6.62l12.06-14.66h4.09l-13.47,16V73l14.74,21.06h-3.94l-13.47-19.65h-6.62
+		v19.65H329.56z"/>
+	<path class="st0" d="M368.18,73.81c3.05-1.27,5.13-1.79,8.63-2.08c3.5-0.37,4.76-0.37,7.44-0.37h2.46v-1.26
+		c0-7.37-3.42-11.09-10.2-11.09c-3.87,0-7.74,1.49-9.45,2.68l-1.19,0.89l-1.79-2.53c0.37-0.3,0.82-0.67,1.49-1.12
+		c0.67-0.45,2.08-1.04,4.24-1.79c2.16-0.82,4.46-1.19,6.85-1.19c8.63,0,13.17,4.84,13.17,14.06v24.04h-3.13v-4.91l0.3-3.35h-0.15
+		c0.15,0-3.42,9.15-13.02,9.15c-3.35,0-6.33-0.89-8.86-2.75s-3.79-4.54-3.79-8.04C361.19,78.8,364.09,75.6,368.18,73.81z
+		 M373.99,92.05c3.8,0,6.92-1.64,9.23-4.84c2.31-3.27,3.5-6.92,3.5-10.94v-2.01h-2.38c-1.56,0-2.83,0-3.8,0.07
+		c-0.97,0-2.31,0.07-4.17,0.3c-1.79,0.15-3.27,0.45-4.46,0.89c-3.57,1.04-7.81,3.65-7.44,8.41
+		C364.46,88.18,368.03,92.05,373.99,92.05z"/>
+</g>
+</svg>
diff --git a/keycloak/themes/aastrika/login/resources/img/sphere-new-logo.svg b/keycloak/themes/aastrika/login/resources/img/sphere-new-logo.svg
new file mode 100644
index 00000000..e41d186c
--- /dev/null
+++ b/keycloak/themes/aastrika/login/resources/img/sphere-new-logo.svg
@@ -0,0 +1,39 @@
+<svg width="994" height="476" viewBox="0 0 994 476" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M425.867 330.562C425.867 330.562 432.101 336.805 440.168 336.805C444.568 336.805 448.602 334.602 448.602 329.827C448.602 319.545 421.467 321.381 421.467 303.754C421.467 294.206 429.534 287.228 440.535 287.228C451.902 287.228 457.769 293.471 457.769 293.471L453.369 301.918C453.369 301.918 447.868 296.776 440.535 296.776C435.768 296.776 431.734 299.714 431.734 303.754C431.734 314.036 458.502 311.466 458.502 329.827C458.502 339.008 451.535 346.72 439.801 346.72C426.967 346.72 420 339.008 420 339.008L425.867 330.562Z" fill="#7B6961" stroke="#7B6961" stroke-width="0.3779" stroke-miterlimit="10"/>
+<path d="M468.77 287.963H490.771C501.405 287.963 509.106 295.307 509.106 306.692C509.106 317.709 501.772 325.421 490.771 325.421H479.037V345.251H468.77V287.963ZM488.938 316.24C495.171 316.24 498.472 312.2 498.472 306.324C498.472 300.449 494.805 296.776 488.938 296.776H479.037V316.24H488.938V316.24Z" fill="#7B6961" stroke="#7B6961" stroke-width="0.3779" stroke-miterlimit="10"/>
+<path d="M517.906 287.963H528.174V312.2H554.575V287.963H564.843V345.251H554.575V321.014H528.174V345.251H517.906V287.963Z" fill="#7B6961" stroke="#7B6961" stroke-width="0.3779" stroke-miterlimit="10"/>
+<path d="M579.144 287.963H613.612V296.776H589.778V311.833H609.212V320.647H589.778V336.071H615.079V344.884H579.51V287.963H579.144Z" fill="#7B6961" stroke="#7B6961" stroke-width="0.3779" stroke-miterlimit="10"/>
+<path d="M624.98 287.963H643.314C649.548 287.963 652.481 288.33 654.682 289.431C660.549 292.002 664.216 297.511 664.216 305.223C664.216 312.2 660.549 318.443 654.682 321.014C654.682 321.014 655.415 321.748 656.515 323.952L668.249 345.251H656.515L645.148 323.952H635.614V345.251H625.346V287.963H624.98ZM644.781 314.771C650.281 314.771 653.948 311.466 653.948 305.59C653.948 300.081 651.748 296.776 643.314 296.776H635.614V314.771H644.781Z" fill="#7B6961" stroke="#7B6961" stroke-width="0.3779" stroke-miterlimit="10"/>
+<path d="M677.783 287.963H712.252V296.776H688.417V311.833H707.852V320.647H688.417V336.071H713.719V344.884H678.15V287.963H677.783Z" fill="#7B6961" stroke="#7B6961" stroke-width="0.3779" stroke-miterlimit="10"/>
+<path d="M182.284 245.261C182.026 243.712 181.768 241.905 181.768 240.098V239.323L95.5165 246.294H95L95.5165 252.748L182.542 245.778L182.284 245.261Z" fill="#7B6961"/>
+<path d="M193.647 203.436C194.164 202.662 194.68 202.145 195.197 201.371C195.713 200.596 196.23 200.08 197.004 199.305L197.521 198.789L132.187 141.473L131.67 140.957L127.28 145.862L193.131 203.953L193.647 203.436Z" fill="#7B6961"/>
+<path d="M185.384 257.137C184.867 255.588 184.351 253.781 183.834 252.232L183.576 251.457L101.199 277.275L100.682 277.533L102.748 283.729L185.642 257.653L185.384 257.137Z" fill="#7B6961"/>
+<path d="M183.835 222.799L184.093 222.024C184.609 220.475 185.126 218.668 185.642 217.119L185.9 216.602L103.265 187.17L101.199 193.108L183.318 222.54L183.835 222.799Z" fill="#7B6961"/>
+<path d="M182.026 233.641V232.867C182.284 231.06 182.284 229.511 182.801 227.703V226.929L97.066 214.794H96.5495L95.5166 221.249L181.251 233.641H182.026Z" fill="#7B6961"/>
+<path d="M254.591 184.846L255.107 185.104C256.657 185.62 258.206 186.395 259.756 186.911L260.272 187.169L292.552 106.876L292.81 106.359L286.87 104.036L254.849 184.071L254.591 184.846Z" fill="#7B6961"/>
+<path d="M248.394 183.298L249.169 183.556L262.855 97.5826V97.0663L256.399 96.0336L242.455 181.749V182.523H243.229C245.037 182.523 246.586 182.782 248.394 183.298Z" fill="#7B6961"/>
+<path d="M264.919 189.493L265.435 189.751C266.985 190.525 268.276 191.558 269.825 192.591L270.342 193.107L318.116 119.784L312.693 116.17L265.177 188.718L264.919 189.493Z" fill="#7B6961"/>
+<path d="M230.315 182.523H231.09C232.898 182.264 234.447 182.264 236.255 182.264H237.029L232.123 95.5164L231.865 95L225.409 95.2582L230.315 181.748V182.523Z" fill="#7B6961"/>
+<path d="M200.618 195.948C201.909 194.915 203.2 193.624 204.491 192.85L205.008 192.333L151.811 124.174L151.295 123.658L146.13 127.531L199.843 196.206L200.618 195.948Z" fill="#7B6961"/>
+<path d="M208.624 190.011L209.141 189.753C210.69 188.978 212.239 188.204 213.789 187.429L214.305 187.171L174.795 109.201L169.114 112.041L208.366 189.237L208.624 190.011Z" fill="#7B6961"/>
+<path d="M219.47 185.105C221.019 184.589 222.827 184.073 224.376 183.556L225.151 183.298L201.91 99.39L195.712 101.197L218.953 185.363L219.47 185.105Z" fill="#7B6961"/>
+<path d="M187.708 212.472L187.966 211.955C188.741 210.406 189.515 208.857 190.548 207.566L190.807 207.05L116.693 162.127L113.335 167.549L187.191 212.214L187.708 212.472Z" fill="#7B6961"/>
+<path d="M191.064 267.979L190.547 267.463C189.515 265.914 188.74 264.623 187.965 263.074L187.707 262.557L112.302 305.415L111.785 305.673L114.884 311.353L190.547 268.496L191.064 267.979Z" fill="#7B6961"/>
+<path d="M332.837 132.435L332.321 131.919L327.93 136.824L328.447 137.34C355.045 161.093 371.056 193.623 373.638 229.252C376.221 264.881 364.858 299.477 341.617 326.585C318.117 354.211 285.321 370.992 249.168 373.832C216.63 376.414 184.092 367.12 158.011 347.756C160.076 345.433 164.983 338.978 166.532 336.913C187.45 352.145 212.24 360.407 238.322 360.407C274.217 360.407 307.788 344.916 331.029 317.807C352.205 293.022 362.276 261.524 359.694 229.252C357.111 197.754 342.908 168.838 319.15 147.926L318.634 147.409L300.816 167.031L301.332 167.547C340.068 201.627 344.199 261.266 310.887 300.509C294.36 319.873 271.377 331.491 246.069 333.556C223.603 335.364 201.136 329.167 183.06 316C183.576 315.484 184.092 314.709 184.867 313.677C186.933 310.837 190.548 306.448 191.581 305.157C207.076 316.258 225.927 321.422 245.036 319.873C266.728 318.066 286.354 308.255 300.299 291.731C328.963 258.168 325.09 207.307 292.036 178.133L291.261 177.1L273.442 196.722L273.959 197.238C284.805 206.532 291.519 219.699 292.81 234.157C293.843 248.615 289.453 262.815 279.898 273.659C270.344 284.761 257.174 291.473 242.712 292.506C228.509 293.539 214.564 289.15 203.718 280.113L203.202 279.597L199.328 284.761L199.845 285.277C225.41 306.189 263.371 302.833 284.805 277.79C295.393 265.397 300.557 249.648 299.266 233.383C298.233 219.183 292.036 205.758 282.223 195.689C283.772 193.882 289.711 187.427 291.519 185.62C318.634 212.987 320.442 257.135 295.393 286.568C282.481 301.8 264.404 310.837 244.52 312.386C225.152 313.935 206.559 307.997 191.581 295.862L191.065 295.346L174.279 317.033L174.796 317.549C195.197 333.814 220.504 341.818 246.586 339.753C273.701 337.687 298.233 325.036 315.793 304.382C350.397 263.848 347.557 203.176 309.596 165.998C310.629 164.966 312.953 162.126 315.277 159.802C317.343 157.737 318.376 156.446 318.892 155.929C362.276 198.012 365.633 267.204 326.123 313.418C306.497 336.396 279.124 350.596 249.168 353.436C219.213 356.276 189.774 347.498 166.274 328.651L165.758 328.135L149.489 348.789L149.23 349.047L149.747 349.563C175.054 369.959 205.784 380.545 238.064 380.545C241.938 380.545 245.811 380.287 249.426 380.028C287.387 376.93 321.733 359.374 346.265 330.458C370.54 302.058 382.419 265.913 379.836 228.478C377.512 191.3 360.727 157.22 332.837 132.435Z" fill="#7B6961"/>
+<path d="M198.553 277.016L198.036 276.499C196.745 275.208 195.712 273.917 194.679 272.626L194.163 272.11L130.12 329.942L129.604 330.459L133.994 335.364L198.036 277.79L198.553 277.016Z" fill="#7B6961"/>
+<path d="M465.234 178.201H470.243V175.502C470.243 158.922 461.767 153.524 449.823 153.524C437.109 153.524 428.633 160.464 428.633 160.464L425.165 155.452C425.165 155.452 434.027 147.354 450.209 147.354C467.161 147.354 476.408 156.994 476.408 175.502V223.314H470.243V213.674C470.243 209.819 471.014 207.119 471.014 207.119H470.628C470.628 207.119 464.079 225.242 444.815 225.242C432.871 225.242 419.771 218.687 419.771 203.649C419.386 178.586 452.135 178.201 465.234 178.201ZM444.815 219.458C460.996 219.458 470.243 202.878 470.243 188.226V184.37H465.62C452.905 184.37 426.321 184.37 426.321 203.649C425.936 211.361 432.486 219.458 444.815 219.458Z" fill="#7B6961" stroke="#7B6961" stroke-width="1.31037" stroke-miterlimit="10"/>
+<path d="M539.593 178.201H544.602V175.502C544.602 158.922 536.126 153.524 524.182 153.524C511.468 153.524 502.992 160.464 502.992 160.464L499.524 155.452C499.524 155.452 508.386 147.354 524.567 147.354C541.52 147.354 550.766 156.994 550.766 175.502V223.314H544.602V213.674C544.602 209.819 545.373 207.119 545.373 207.119H544.987C544.987 207.119 538.438 225.242 519.174 225.242C507.23 225.242 494.13 218.687 494.13 203.649C493.745 178.586 526.494 178.201 539.593 178.201ZM519.174 219.458C535.355 219.458 544.602 202.878 544.602 188.226V184.37H539.979C527.264 184.37 500.68 184.37 500.68 203.649C500.295 211.361 506.845 219.458 519.174 219.458Z" fill="#7B6961" stroke="#7B6961" stroke-width="1.31037" stroke-miterlimit="10"/>
+<path d="M571.957 209.819C571.957 209.819 580.048 219.072 594.688 219.072C603.55 219.072 611.641 214.445 611.641 205.192C611.641 186.298 570.801 191.696 570.801 167.79C570.801 154.68 581.974 147.74 594.303 147.74C609.329 147.74 616.264 155.837 616.264 155.837L612.411 160.85C612.411 160.85 606.247 153.909 593.918 153.909C585.442 153.909 577.351 157.765 577.351 167.405C577.351 186.684 618.19 180.9 618.19 205.577C618.19 217.53 608.173 225.627 594.688 225.627C576.965 225.627 568.104 214.831 568.104 214.831L571.957 209.819Z" fill="#7B6961" stroke="#7B6961" stroke-width="1.31037" stroke-miterlimit="10"/>
+<path d="M639.766 155.452H630.134V149.668H639.766V128.846H645.931V149.668H665.195V155.452H645.931V196.323C645.931 215.988 657.489 218.301 663.654 218.301C665.58 218.301 667.121 217.916 667.121 217.916V223.699C667.121 223.699 665.58 224.085 663.268 224.085C655.563 224.085 639.766 221.386 639.766 196.709V155.452Z" fill="#7B6961" stroke="#7B6961" stroke-width="1.31037" stroke-miterlimit="10"/>
+<path d="M450.846 146.177C445.681 146.177 441.033 146.952 436.643 148.501C432.253 150.05 429.412 151.341 427.863 152.115C426.572 152.89 425.797 153.664 425.022 154.181L423.989 154.955L428.638 161.668L431.737 159.344C435.352 156.762 443.099 154.181 450.071 154.181C463.241 154.181 469.697 161.151 469.697 175.609V177.159H466.082C460.659 177.159 458.077 177.159 451.104 177.933C444.132 178.449 439.742 179.482 433.544 182.064C423.731 186.195 418.825 193.682 418.825 203.751C418.825 210.98 421.407 216.66 426.83 220.791C431.995 224.663 438.192 226.471 445.165 226.471C455.236 226.471 462.209 221.565 466.082 217.176C467.89 215.111 469.181 213.304 470.214 211.496L469.956 213.82V224.663H478.219V175.351C478.219 156.246 468.923 146.177 450.846 146.177ZM470.214 184.904V188.002C470.214 195.747 467.89 202.976 463.241 209.431C458.851 215.627 452.912 218.725 445.423 218.725C433.544 218.725 427.347 210.98 427.347 203.235C426.572 192.649 437.934 188.26 441.55 187.228C443.874 186.453 446.714 185.678 450.33 185.42C453.687 184.904 456.269 184.904 458.593 184.904C460.401 184.646 462.983 184.646 466.082 184.646H470.214V184.904Z" fill="#7B6961"/>
+<path d="M525.476 146.177C520.312 146.177 515.663 146.952 511.273 148.501C506.883 150.05 504.043 151.341 502.493 152.115C501.202 152.89 500.427 153.664 499.653 154.181L498.62 154.955L503.268 161.668L506.367 159.344C509.982 156.762 517.729 154.181 524.702 154.181C537.872 154.181 544.328 161.151 544.328 175.609V177.159H540.454C535.031 177.159 532.449 177.159 525.476 177.933C518.504 178.449 514.114 179.482 507.916 182.064C498.103 186.195 493.197 193.682 493.197 203.751C493.197 210.98 495.779 216.66 501.202 220.791C506.367 224.663 512.565 226.471 519.537 226.471C529.608 226.471 536.581 221.565 540.454 217.176C542.262 215.111 543.553 213.304 544.586 211.496L544.328 213.82V224.663H552.591V175.351C552.85 156.246 543.553 146.177 525.476 146.177ZM544.844 184.904V188.002C544.844 195.747 542.52 202.976 537.872 209.431C533.482 215.627 527.542 218.725 520.053 218.725C508.175 218.725 501.977 210.98 501.977 203.235C501.202 192.649 512.565 188.26 516.18 187.228C518.504 186.453 521.345 185.678 524.96 185.42C528.317 184.904 530.899 184.904 533.224 184.904C535.031 184.646 537.614 184.646 540.712 184.646H544.844V184.904Z" fill="#7B6961"/>
+<path d="M595.461 181.548L593.395 180.773C584.098 177.159 579.45 172.511 579.45 166.831C579.45 157.537 587.714 154.181 595.461 154.181C602.95 154.181 610.18 157.537 611.472 159.086L614.312 161.668L619.219 154.955L616.378 152.373C613.537 149.792 605.274 146.177 595.719 146.177C588.747 146.177 582.807 147.984 578.159 151.857C573.252 155.472 570.928 160.635 570.928 167.348C570.928 181.548 585.131 186.711 596.494 190.842L598.301 191.358C607.598 194.715 612.246 199.362 612.246 205.042C612.246 212.787 605.79 218.209 595.977 218.209C591.846 218.209 587.714 217.434 583.582 215.627C579.45 213.82 577.126 212.529 576.093 211.496C575.06 210.464 574.027 209.689 573.511 208.915L572.736 207.882L567.313 214.336L570.67 217.693C574.802 221.823 585.131 225.954 595.461 225.954C610.18 225.954 620.252 217.176 620.252 204.784C620.768 190.842 606.823 185.678 595.461 181.548Z" fill="#7B6961"/>
+<path d="M654.337 214.078C650.205 210.98 647.881 204.525 647.881 196.264V155.988H667.507V148.242H647.881V127.072H639.617V148.242H629.804V155.988H639.617V196.522C639.617 222.34 656.919 225.18 664.408 225.18C665.957 225.18 667.249 224.922 668.282 224.922H669.056V217.176L664.666 217.693C661.309 217.434 658.21 216.918 654.337 214.078Z" fill="#7B6961"/>
+<path d="M692.815 163.732V147.983H684.551V224.662H692.815V191.357C692.815 185.677 693.59 180.513 695.139 175.866C699.013 163.215 706.76 155.728 716.573 155.728C717.606 155.728 718.639 155.986 719.93 155.986L720.963 156.245V147.983L715.54 147.467C706.243 147.208 697.98 153.405 692.815 163.732Z" fill="#7B6961"/>
+<path d="M744.518 118H735.222V130.909H744.518V118Z" fill="#7B6961"/>
+<path d="M744.203 147.983H735.939V224.662H744.203V147.983Z" fill="#7B6961"/>
+<path d="M824 147.985H813.154L788.879 177.417H777V118.036H768.995V224.664H777V185.162H788.879L815.994 224.664H826.324L795.852 181.29L824 147.985Z" fill="#7B6961"/>
+<path d="M864.541 146.177C859.377 146.177 854.728 146.952 850.338 148.501C845.948 150.05 843.108 151.341 841.558 152.115C840.267 152.89 839.492 153.664 838.718 154.181L837.685 154.955L842.333 161.668L845.69 159.344C849.305 156.762 857.053 154.181 864.025 154.181C877.195 154.181 883.651 161.151 883.651 175.609V177.159H879.777C874.354 177.159 871.772 177.159 864.8 177.933C857.827 178.449 853.437 179.482 847.24 182.064C837.427 186.195 832.52 193.682 832.52 203.751C832.52 210.98 835.102 216.66 840.525 220.791C845.69 224.663 851.888 226.471 858.86 226.471C868.931 226.471 875.904 221.565 879.777 217.176C881.585 215.111 882.876 213.304 883.909 211.496L883.651 213.82V224.663H891.915V175.351C891.915 156.246 882.618 146.177 864.541 146.177ZM883.651 184.904V188.002C883.651 195.747 881.327 202.976 876.679 209.431C872.289 215.627 866.349 218.725 858.86 218.725C846.981 218.725 840.784 210.98 840.784 203.235C840.009 192.649 851.371 188.26 855.245 187.228C857.569 186.453 860.41 185.678 864.025 185.42C867.382 184.904 869.964 184.904 872.289 184.904C874.096 184.646 876.679 184.646 879.777 184.646H883.651V184.904Z" fill="#7B6961"/>
+<path d="M895.107 251.461H416.26C414.266 251.461 412.937 253.389 412.937 255.317C412.937 257.631 414.599 259.173 416.26 259.173H895.107C897.101 259.173 898.43 257.245 898.43 255.317C898.43 253.004 897.101 251.461 895.107 251.461Z" fill="#57A9B7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412.184 255.317C412.184 252.965 413.801 250.588 416.26 250.588H895.107C896.275 250.588 897.307 251.043 898.049 251.904C898.791 252.765 899.184 253.962 899.184 255.317C899.184 257.669 897.566 260.046 895.107 260.046H416.26C414.232 260.046 412.184 258.168 412.184 255.317ZM416.26 252.335C414.731 252.335 413.691 253.813 413.691 255.317C413.691 257.093 414.965 258.299 416.26 258.299H895.107C896.636 258.299 897.677 256.821 897.677 255.317C897.677 254.359 897.405 253.628 896.983 253.139C896.562 252.65 895.933 252.335 895.107 252.335H416.26Z" fill="#57A9B7"/>
+</svg>
diff --git a/keycloak/themes/aastrika/login/resources/img/whatsapp.png b/keycloak/themes/aastrika/login/resources/img/whatsapp.png
new file mode 100644
index 00000000..41a0b346
Binary files /dev/null and b/keycloak/themes/aastrika/login/resources/img/whatsapp.png differ
diff --git a/keycloak/themes/aastrika/login/sms-input-otp.ftl b/keycloak/themes/aastrika/login/sms-input-otp.ftl
index bcf2de7a..1c71dfec 100644
--- a/keycloak/themes/aastrika/login/sms-input-otp.ftl
+++ b/keycloak/themes/aastrika/login/sms-input-otp.ftl
@@ -7,9 +7,16 @@
         <div class="ui raised shadow container segment fullpage-background-image">
             <div class="ui one column grid stackable">
                 <div class="ui column height-fix">
+                    <img alt="Logo" src="${url.resourcesPath}/img/aastar-logo.svg" width="120">
                     <div class="max-container">
+                        <div class="logo">
+                            <a href="/public/home">
+                            <img alt="Logo" src="${url.resourcesPath}/img/SMS.png" width="100%">
+                            </a>
+                          </div>
                         <div class="signInHead mt-27">
-                            ${msg("enterCode")}
+                            <!-- ${msg("enterCode")} -->
+                            Check your Email/SMS for OTP!
                         </div>
                         <div class="ui content textCenter mt-8 mb-28">
                             <#if message?has_content>
@@ -19,27 +26,38 @@
                             </#if>
                         </div>
                         <form id="kc-totp-login-form" class="${properties.kcFormClass!} ui form pre-signin" action="${url.loginAction}" method="post">
-			                <input type="hidden" name="page_type" value="sms_otp_page" />
+                            <input type="hidden" name="page_type" value="sms_otp_page" />
                             <div class="field">
-                                <input id="totp" name="smsCode" type="text" class=" smsinput" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)"/>
+                                <input id="totp" name="smsCode" placeholder="Enter OTP" type="text" class=" smsinput" onfocusin="inputBoxFocusIn(this)" onfocusout="inputBoxFocusOut(this)"/>
                             </div>
                             <div class="field">
-                                <button onclick="javascript:makeDivUnclickable()" class="ui fluid submit button" name="login" id="login" type="submit" value="${msg("doLogIn")}">${msg("doSubmit")}</button>
+                                <p style="text-align: right !important">OTP Expires in <span class="warnText">10 Minutes</span></p>
                             </div>
-                            <div class="field or-container">
+                            <div class="field mb-20">
+                                <button onclick="otpClick(event,'Submit OTP', 'submit-OTP');javascript:makeDivUnclickable()" class="ui fluid submit button blueButton" name="submit-OTP" id="submit-OTP" type="submit" value="${msg("doLogIn")}">${msg("doSubmit")}</button>
+                            </div>
+                            <!-- <div class="field or-container">
                                 <div class="or-holder">
                                     <span class="or-divider"></span>
                                     <span class="or-text">or</span>
                                 </div>
                             </div>
-                            <div class="field"></div>
+                            <div class="field"></div> -->
                         </form>
                         <form id="kc-totp-login-form" class="${properties.kcFormClass!} ui form pre-signin" action="${url.loginAction}" method="post">
-			                <input type="hidden" name="page_type" value="sms_otp_resend_page" />
+                            <input type="hidden" name="page_type" value="sms_otp_resend_page" />
                             <div class="field">
-                                <button onclick="javascript:makeDivUnclickable()" class="ui fluid submit button" name="login" id="login" type="submit" value="${msg("doLogIn")}">${msg("doResendOTP")}</button>
+                                <button onclick="otpClick(event,'Resend OTP', 'resend-OTP');javascript:makeDivUnclickable()" class="ui fluid submit button whiteButton" name="resend-OTP" id="resend-OTP" type="submit" value="${msg("doLogIn")}">${msg("doResendOTP")}</button>
                             </div>
                         </form>
+                        <div class="field rel">
+                            <span class="whatsApp-otp">
+                            <img alt="Logo" src="${url.resourcesPath}/img/whatsapp.png" width="30">
+                        </span>
+                            <a class="ui fluid button greenButton"
+                            href="https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform"
+                            target="_blank" id="WhatsApp-loginOTP" onclick="return otpClick(event,'WhatsApp', 'WhatsApp-loginOTP')">Get Help on WhatsApp?</a>
+                        </div>
                         <#if client?? && client.baseUrl?has_content>
                             <div class="${properties.kcFormOptionsWrapperClass!} signUpMsg mb-56 mt-45 textCenter">
                                 <span>
@@ -55,6 +73,51 @@
             </div>
         </div>
     </div>
+    <script type="text/javascript">
+          function otpClick(e, param1, param2){
+						try {
+          e.preventDefault()
+          let obj = {
+          EventDetails: {
+            EventName: param1,
+            Name : param2
+          }
+        }
+        const userdata = Object.assign(MainVisitorDetails, obj)
+        fetch("https://track.plumb5.com/EventDetails/SaveEventDetails", {
+          method: "POST",
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify( userdata)
+        }).then(res => {
+          if (document.getElementById("kc-totp-login-form") && (param1 === 'Resend OTP' || param1 === 'Submit OTP')) {
+            setTimeout("submitForm()", 1000); // set timout
+          } else if(param1 === 'WhatsApp'){
+						var url = `https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform`
+						window.open(url, '_blank').focus();
+					}
+        }).catch(error => {
+        // do something with error
+				if (document.getElementById("kc-totp-login-form") && (param1 === 'Resend OTP' || param1 === 'Submit OTP')) {
+            setTimeout("submitForm()", 1000); // set timout
+          } else if(param1 === 'WhatsApp'){
+						var url = `https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform`
+						window.open(url, '_blank').focus();
+					}
+        })
+			} catch(error) {
+				if (document.getElementById("kc-totp-login-form") && (param1 === 'Resend OTP' || param1 === 'Submit OTP')) {
+            setTimeout("submitForm()", 1000); // set timout
+          } else if(param1 === 'WhatsApp'){
+						var url = `https://wa.me/919632013414?text=Hi%2C%20Need%20help%20on%20Aastrika%20Platform`
+						window.open(url, '_blank').focus();
+					}
+			}
+			return true
+      }
+      function submitForm() { // submits form
+        document.getElementById("kc-totp-login-form").submit();
+      }
+      </script>
     </#if>
 </@layout.registrationLayout>
 
diff --git a/keycloak/themes/aastrika/login/template.ftl b/keycloak/themes/aastrika/login/template.ftl
index 2e67cb95..9bd293c8 100644
--- a/keycloak/themes/aastrika/login/template.ftl
+++ b/keycloak/themes/aastrika/login/template.ftl
@@ -36,6 +36,15 @@
             <script src="${script}" type="text/javascript"></script>
         </#list>
     </#if>
+    <script type='text/javascript'>
+        (function () {
+          var p5 = document.createElement('script')
+          p5.type = 'text/javascript'
+          p5.src = 'https://src.plumb5.com/aastrika_org.js'
+          var p5s = document.getElementsByTagName('script')[0]
+          p5s.parentNode.insertBefore(p5, p5s)
+        })();
+      </script>
 </head>
 
 <body class="${properties.kcBodyClass!}">
@@ -84,7 +93,7 @@
                     </div>
                     <script type="text/javascript">
                         var sessionTenant = sessionStorage.getItem("rootTenantLogo");
-                        
+
                         if(sessionTenant){
                             var imgSrc = "${url.resourcesPath}/img/tenants/"+sessionTenant+".png";
                         }else{
diff --git a/keycloak/themes/aastrika/login/theme.properties b/keycloak/themes/aastrika/login/theme.properties
index 0c33ef86..38026fbd 100644
--- a/keycloak/themes/aastrika/login/theme.properties
+++ b/keycloak/themes/aastrika/login/theme.properties
@@ -16,6 +16,6 @@
 #
 
 parent=base
-styles=css/semantic.min.css?v=1.18.b css/login.css?v=1.22.b
+styles=css/semantic.min.css?v=1.20.g css/login.css?v=1.24.g
 scripts=js/login.js?v=1.21.b
 kcFeedbackAreaClass=ui info message