diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3f0cb52..01307208 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 # CHANGELOG
 
+## 2024.3.6
+
+- change attributes view
+
 ## 2024.3.4
 
 - add [[username]] for reminder
diff --git a/system/lan/english.json b/system/lan/english.json
index 96b553d0..dc2cfac8 100644
--- a/system/lan/english.json
+++ b/system/lan/english.json
@@ -460,5 +460,6 @@
     "Users_Announcement": "Users Announcement",
     "Customer_Announcement": "Customer Announcement",
     "1_Period___1_Month__Expires_the_20th_of_each_month": "1 Period = 1 Month, Expires the 20th of each month",
-    "Period": "Period"
+    "Period": "Period",
+    "Add": "Add"
 }
\ No newline at end of file
diff --git a/ui/ui/customers-add.tpl b/ui/ui/customers-add.tpl
index f93b208a..1b2f026d 100644
--- a/ui/ui/customers-add.tpl
+++ b/ui/ui/customers-add.tpl
@@ -1,21 +1,20 @@
 {include file="sections/header.tpl"}
 
-<div class="row">
-    <div class="col-sm-12 col-md-12">
-        <div class="panel panel-primary panel-hovered panel-stacked mb30">
-            <div class="panel-heading">{Lang::T('Add New Contact')}</div>
-            <div class="panel-body">
-
-                <form class="form-horizontal" method="post" role="form" action="{$_url}customers/add-post">
+<form class="form-horizontal" method="post" role="form" action="{$_url}customers/add-post">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="panel panel-primary panel-hovered panel-stacked mb30">
+                <div class="panel-heading">{Lang::T('Add New Contact')}</div>
+                <div class="panel-body">
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Username')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Username')}</label>
+                        <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
-                                <span class="input-group-addon" id="basic-addon1">+</span>
+                                    <span class="input-group-addon" id="basic-addon1">+</span>
                                 {else}
-                                <span class="input-group-addon" id="basic-addon1"><i
-                                        class="glyphicon glyphicon-phone-alt"></i></span>
+                                    <span class="input-group-addon" id="basic-addon1"><i
+                                            class="glyphicon glyphicon-phone-alt"></i></span>
                                 {/if}
                                 <input type="text" class="form-control" name="username" required
                                     placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']}{/if} {Lang::T('Phone Number')}">
@@ -23,26 +22,26 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Full Name')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Full Name')}</label>
+                        <div class="col-md-9">
                             <input type="text" required class="form-control" id="fullname" name="fullname">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Email')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Email')}</label>
+                        <div class="col-md-9">
                             <input type="email" class="form-control" id="email" name="email">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Phone Number')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Phone Number')}</label>
+                        <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
-                                <span class="input-group-addon" id="basic-addon1">+</span>
+                                    <span class="input-group-addon" id="basic-addon1">+</span>
                                 {else}
-                                <span class="input-group-addon" id="basic-addon1"><i
-                                        class="glyphicon glyphicon-phone-alt"></i></span>
+                                    <span class="input-group-addon" id="basic-addon1"><i
+                                            class="glyphicon glyphicon-phone-alt"></i></span>
                                 {/if}
                                 <input type="text" class="form-control" name="phonenumber"
                                     placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']}{/if} {Lang::T('Phone Number')}">
@@ -50,15 +49,15 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Password')}</label>
-                        <div class="col-md-6">
-                            <input type="password" class="form-control" autocomplete="off" required id="password"
+                        <label class="col-md-3 control-label">{Lang::T('Password')}</label>
+                        <div class="col-md-9">
+                            <input type="password" class="form-control" autocomplete="off" required id="password" value="{rand(000000,999999)}"
                                 name="password" onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('PPPOE Password')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('PPPOE Password')}</label>
+                        <div class="col-md-9">
                             <input type="password" class="form-control" id="pppoe_password" name="pppoe_password"
                                 value="{$d['pppoe_password']}" onmouseleave="this.type = 'password'"
                                 onmouseenter="this.type = 'text'">
@@ -68,14 +67,14 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Address')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Address')}</label>
+                        <div class="col-md-9">
                             <textarea name="address" id="address" class="form-control"></textarea>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Service Type')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Service Type')}</label>
+                        <div class="col-md-9">
                             <select class="form-control" id="service_type" name="service_type">
                                 <option value="Hotspot" {if $d['service_type'] eq 'Hotspot' }selected{/if}>Hotspot
                                 </option>
@@ -84,64 +83,65 @@
                             </select>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="panel panel-primary panel-hovered panel-stacked mb30">
+                <div class="panel-heading">{Lang::T('Attributes')}</div>
+                <div class="panel-body">
                     <!-- Customers Attributes add start -->
-                    <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Attributes')}</label>
-                        <div id="custom-fields-container" class="col-md-6">
-                            <button class="btn btn-success btn-sm" type="button"
-                                id="add-custom-field">+</button>
-                        </div>
+                    <div id="custom-fields-container">
+
                     </div>
                     <!-- Customers Attributes add end -->
-
-                    <div class="form-group">
-                        <div class="col-lg-offset-2 col-lg-10">
-                            <button class="btn btn-primary" type="submit">
-                                {Lang::T('Save Changes')}
-                            </button>
-                            Or <a href="{$_url}customers/list">{Lang::T('Cancel')}</a>
-                        </div>
-                    </div>
-                </form>
+                </div>
+                <div class="panel-footer">
+                    <button class="btn btn-success btn-block" type="button"
+                        id="add-custom-field">{Lang::T('Add')}</button>
+                </div>
             </div>
         </div>
     </div>
-</div>
-</div>
+    <center>
+        <button class="btn btn-primary" type="submit">
+            {Lang::T('Save Changes')}
+        </button>
+        <br><a href="{$_url}customers/list" class="btn btn-link">{Lang::T('Cancel')}</a>
+    </center>
+</form>
 {literal}
-<script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", function() {
-        var customFieldsContainer = document.getElementById('custom-fields-container');
-        var addCustomFieldButton = document.getElementById('add-custom-field');
+    <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", function() {
+            var customFieldsContainer = document.getElementById('custom-fields-container');
+            var addCustomFieldButton = document.getElementById('add-custom-field');
 
-        addCustomFieldButton.addEventListener('click', function() {
-            var fieldIndex = customFieldsContainer.children.length;
-            var newField = document.createElement('div');
-            newField.className = 'form-group';
-            newField.innerHTML = `
-                <label class="col-md-2 control-label">Name:</label>
-                <div class="col-md-3">
+            addCustomFieldButton.addEventListener('click', function() {
+                var fieldIndex = customFieldsContainer.children.length;
+                var newField = document.createElement('div');
+                newField.className = 'form-group';
+                newField.innerHTML = `
+                <div class="col-md-4">
                     <input type="text" class="form-control" name="custom_field_name[]" placeholder="Name">
                 </div>
-                <label class="col-md-2 control-label">Value:</label>
-                <div class="col-md-3">
+                <div class="col-md-6">
                     <input type="text" class="form-control" name="custom_field_value[]" placeholder="Value">
                 </div>
                 <div class="col-md-2">
                     <button type="button" class="remove-custom-field btn btn-danger btn-sm">-</button>
                 </div>
             `;
-            customFieldsContainer.appendChild(newField);
-        });
+                customFieldsContainer.appendChild(newField);
+            });
 
-        customFieldsContainer.addEventListener('click', function(event) {
-            if (event.target.classList.contains('remove-custom-field')) {
-                var fieldContainer = event.target.parentNode.parentNode;
-                fieldContainer.parentNode.removeChild(fieldContainer);
-            }
+            customFieldsContainer.addEventListener('click', function(event) {
+                if (event.target.classList.contains('remove-custom-field')) {
+                    var fieldContainer = event.target.parentNode.parentNode;
+                    fieldContainer.parentNode.removeChild(fieldContainer);
+                }
+            });
         });
-    });
-</script>
+    </script>
 {/literal}
 
 
diff --git a/ui/ui/customers-edit.tpl b/ui/ui/customers-edit.tpl
index 46a71202..219fdf42 100644
--- a/ui/ui/customers-edit.tpl
+++ b/ui/ui/customers-edit.tpl
@@ -1,16 +1,15 @@
 {include file="sections/header.tpl"}
 
-<div class="row">
-    <div class="col-sm-12 col-md-12">
-        <div class="panel panel-primary panel-hovered panel-stacked mb30">
-            <div class="panel-heading">{Lang::T('Edit Contact')}</div>
-            <div class="panel-body">
-
-                <form class="form-horizontal" method="post" role="form" action="{$_url}customers/edit-post">
+<form class="form-horizontal" method="post" role="form" action="{$_url}customers/edit-post">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="panel panel-primary panel-hovered panel-stacked mb30">
+                <div class="panel-heading">{Lang::T('Edit Contact')}</div>
+                <div class="panel-body">
                     <input type="hidden" name="id" value="{$d['id']}">
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Username')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Username')}</label>
+                        <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
                                     <span class="input-group-addon" id="basic-addon1">+</span>
@@ -25,21 +24,21 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Full Name')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Full Name')}</label>
+                        <div class="col-md-9">
                             <input type="text" class="form-control" id="fullname" name="fullname"
                                 value="{$d['fullname']}">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Email')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Email')}</label>
+                        <div class="col-md-9">
                             <input type="email" class="form-control" id="email" name="email" value="{$d['email']}">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Phone Number')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Phone Number')}</label>
+                        <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
                                     <span class="input-group-addon" id="basic-addon1">+</span>
@@ -53,8 +52,8 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Password')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Password')}</label>
+                        <div class="col-md-9">
                             <input type="password" autocomplete="off" class="form-control" id="password" name="password"
                                 onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'"
                                 value="{$d['password']}">
@@ -62,8 +61,8 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('PPPOE Password')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('PPPOE Password')}</label>
+                        <div class="col-md-9">
                             <input type="password" autocomplete="off" class="form-control" id="pppoe_password"
                                 name="pppoe_password" value="{$d['pppoe_password']}"
                                 onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
@@ -73,14 +72,14 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Address')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Address')}</label>
+                        <div class="col-md-9">
                             <textarea name="address" id="address" class="form-control">{$d['address']}</textarea>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Service Type')}</label>
-                        <div class="col-md-6">
+                        <label class="col-md-3 control-label">{Lang::T('Service Type')}</label>
+                        <div class="col-md-9">
                             <select class="form-control" id="service_type" name="service_type">
                                 <option value="Hotspot" {if $d['service_type'] eq 'Hotspot' }selected{/if}>Hotspot
                                 </option>
@@ -89,43 +88,49 @@
                             </select>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="panel panel-primary panel-hovered panel-stacked mb30">
+                <div class="panel-heading">{Lang::T('Attributes')}</div>
+                <div class="panel-body">
                     <!--Customers Attributes edit start -->
                     {if $customFields}
                         {foreach $customFields as $customField}
                             <div class="form-group">
-                                <label class="col-md-2 control-label"
+                                <label class="col-md-4 control-label"
                                     for="{$customField.field_name}">{$customField.field_name}</label>
                                 <div class="col-md-6">
                                     <input class="form-control" type="text" name="custom_fields[{$customField.field_name}]"
                                         id="{$customField.field_name}" value="{$customField.field_value}">
                                 </div>
+                                <label class="col-md-2">
                                 <input type="checkbox" name="delete_custom_fields[]" value="{$customField.field_name}"> Delete
+                                </label>
                             </div>
                         {/foreach}
                     {/if}
                     <!--Customers Attributes edit end -->
-                    <!--Customers Attributes add start -->
-                    <div class="form-group">
-                        <label class="col-md-2 control-label">{Lang::T('Attributes')}</label>
-                        <div id="custom-fields-container" class="col-md-6">
-                            <button class="btn btn-success btn-sm" type="button" id="add-custom-field">+</button>
-                        </div>
+                    <!-- Customers Attributes add start -->
+                    <div id="custom-fields-container">
                     </div>
-                    <!--Customers Attributes add end -->
-                    <div class="form-group">
-                        <div class="col-lg-offset-2 col-lg-10">
-                            <button class="btn btn-primary" type="submit">
-                                {Lang::T('Save Changes')}
-                            </button>
-                            Or <a href="{$_url}customers/list">{Lang::T('Cancel')}</a>
-                        </div>
-                    </div>
-                </form>
+                    <!-- Customers Attributes add end -->
+                </div>
+                <div class="panel-footer">
+                    <button class="btn btn-success btn-block" type="button"
+                        id="add-custom-field">{Lang::T('Add')}</button>
+                </div>
             </div>
         </div>
     </div>
-</div>
-</div>
+    <center>
+        <button class="btn btn-primary" type="submit">
+            {Lang::T('Save Changes')}
+        </button>
+        <br><a href="{$_url}customers/list" class="btn btn-link">{Lang::T('Cancel')}</a>
+    </center>
+</form>
 
 {literal}
     <script type="text/javascript">
@@ -138,12 +143,10 @@
                 var newField = document.createElement('div');
                 newField.className = 'form-group';
                 newField.innerHTML = `
-                <label class="col-md-2 control-label">Name:</label>
-                <div class="col-md-3">
+                <div class="col-md-4">
                     <input type="text" class="form-control" name="custom_field_name[]" placeholder="Name">
                 </div>
-                <label class="col-md-2 control-label">Value:</label>
-                <div class="col-md-3">
+                <div class="col-md-6">
                     <input type="text" class="form-control" name="custom_field_value[]" placeholder="Value">
                 </div>
                 <div class="col-md-2">
diff --git a/ui/ui/sections/footer.tpl b/ui/ui/sections/footer.tpl
index 27091788..9805486e 100644
--- a/ui/ui/sections/footer.tpl
+++ b/ui/ui/sections/footer.tpl
@@ -29,9 +29,9 @@
                                 $(this).html(
                                     `<span class="loading"></span>`
                                 );
-                                setTimeout(() => {
-                                    $(this).prop("disabled", true);
-                                }, 100);
+                                // setTimeout(() => {
+                                //     $(this).prop("disabled", true);
+                                // }, 100);
                             }, false);
                         } else {
                             if (el.attachEvent) { // IE before version 9
@@ -39,9 +39,9 @@
                                     $(this).html(
                                         `<span class="loading"></span>`
                                     );
-                                    setTimeout(() => {
-                                        $(this).prop("disabled", true);
-                                    }, 100);
+                                    // setTimeout(() => {
+                                    //     $(this).prop("disabled", true);
+                                    // }, 100);
                                 });
                             }
                         }
diff --git a/version.json b/version.json
index 13e1f5cc..7a93c669 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-    "version": "2024.3.5"
+    "version": "2024.3.6"
 }
\ No newline at end of file