diff --git a/ui/ui/customer/register-otp.tpl b/ui/ui/customer/register-otp.tpl
index 6aff70ad..649c2010 100644
--- a/ui/ui/customer/register-otp.tpl
+++ b/ui/ui/customer/register-otp.tpl
@@ -16,12 +16,13 @@
                 <div class="panel-heading">1. {Lang::T('Register as Member')}</div>
                 <div class="panel-body">
                     <div class="form-container">
+                        <!-- Phone Number Field -->
                         <div class="form-group">
                             <label>{Lang::T('Phone Number')}</label>
                             <div class="input-group">
                                 <span class="input-group-addon" id="basic-addon1"><i
                                             class="glyphicon glyphicon-phone-alt"></i></span>
-                                <input type="text" class="form-control" name="username" value="{$username}"
+                                <input type="text" class="form-control" name="phone_number" value="{$phone_number}" readonly
                                     placeholder="{if $_c['country_code_phone']!= '' || $_c['registration_username'] == 'phone'}{$_c['country_code_phone']} {Lang::T('Phone Number')}{else}{Lang::T('Phone Number')}{/if}">
                             </div>
                         </div>
@@ -50,9 +51,15 @@
         </div>
         <div class="col-md-4">
             <div class="panel panel-primary">
-                <div class="panel-heading">2. {Lang::T('Password')}</div>
+                <div class="panel-heading">2. {Lang::T('Username & Password')}</div>
                 <div class="panel-body">
                     <div class="form-container">
+                        <!-- Username Field -->
+                        <div class="form-group">
+                            <label>{Lang::T('Username')}</label>
+                            <input type="text" required class="form-control" id="username" name="username" placeholder="{Lang::T('Choose a Username')}">
+                        </div>
+                        <!-- Password Fields -->
                         <div class="form-group">
                             <label>{Lang::T('Password')}</label>
                             <input type="password" required class="form-control" id="password" name="password">
@@ -82,36 +89,5 @@
     </form>
 </div>
 
-<!-- Modal -->
-<div class="modal fade" id="HTMLModal" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-            </div>
-            <div class="modal-body" id="HTMLModal_konten"></div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">&times;</button>
-            </div>
-        </div>
-    </div>
-</div>
-{if $_c['tawkto'] != ''}
-    <!--Start of Tawk.to Script-->
-    <script type="text/javascript">
-        var Tawk_API = Tawk_API || {},
-            Tawk_LoadStart = new Date();
-        (function() {
-            var s1 = document.createElement("script"),
-                s0 = document.getElementsByTagName("script")[0];
-            s1.async = true;
-            s1.src='https://embed.tawk.to/{$_c['tawkto']}';
-            s1.charset = 'UTF-8';
-            s1.setAttribute('crossorigin', '*');
-            s0.parentNode.insertBefore(s1, s0);
-        })();
-    </script>
-    <!--End of Tawk.to Script-->
-{/if}
-{include file="customer/footer-public.tpl"}
\ No newline at end of file
+<!-- Modal and Footer Code -->
+{include file="customer/footer-public.tpl"}