diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index ee1b010..2e31380 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -8,7 +8,13 @@
       <div class="form-group">
         <div class="input-group-container">
           <div class="form-floating">
-            <input class="input-email" id="inputEmail" type="text" placeholder="name@example.com" v-model="email" />
+            <input
+              class="input-email"
+              id="inputEmail"
+              type="text"
+              placeholder="name@example.com"
+              v-model="email"
+            />
             <label for="inputEmail">{{ $t('Email address') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
@@ -22,10 +28,7 @@
 </template>
 
 <script>
-import {
-  UserAuthApi,
-  applicantValidator
-} from '@/utils/index'
+import { UserAuthApi, applicantValidator } from '@/utils/index'
 import { signinActionEnum } from '@/types/index'
 
 export default {
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 9cba252..d33c621 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -5,8 +5,13 @@
         <div class="form-group">
           <div class="input-group-container">
             <div class="form-floating">
-              <input class="input-email" id="inputCode" type="password" :placeholder="'Type in your password'"
-                v-model="password" />
+              <input
+                class="input-email"
+                id="inputCode"
+                type="password"
+                :placeholder="'Type in your password'"
+                v-model="password"
+              />
               <label for="inputCode">{{ $t('Password') }}</label>
             </div>
             <button type="submit" class="btn-start">{{ $t('SIGN IN') }}</button>
@@ -45,7 +50,7 @@ export default {
 
   components: {},
 
-  created() { },
+  created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index 3d12673..6576ec3 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -7,43 +7,63 @@
           <span v-if="accountNeedAttention">!</span>
         </div>
         <div class="panel-content-container" id="account-summary">
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
-            aria-expanded="false" aria-controls="collapse-user-id">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-id"
+            aria-expanded="false"
+            aria-controls="collapse-user-id"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-id">{{
                 $t('User ID')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="account-summary-user-id">
                 {{ userProfile.account.basic.FLID.identity }}
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-password"
-            aria-expanded="false" aria-controls="collapse-password">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-password"
+            aria-expanded="false"
+            aria-controls="collapse-password"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-password">{{
                 $t('Password')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="account-summary-password"> ******** </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
-            aria-expanded="false" aria-controls="collapse-user-email">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-email"
+            aria-expanded="false"
+            aria-controls="collapse-user-email"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-email">{{
                 $t('Email')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="account-summary-email">
                 {{ userProfile.account.basic.email.address }}
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
-            aria-expanded="false" aria-controls="collapse-user-mobile">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-mobile"
+            aria-expanded="false"
+            aria-controls="collapse-user-mobile"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-mobile">{{
                 $t('Mobile')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="account-summary-mobile">
                 {{ userProfile.account.basic.mobile.number }}
               </span>
@@ -51,29 +71,61 @@
           </button>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-id" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-id"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="userProfile.account.basic.FLID.identity" readonly="true" v-tooltip
-              title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
+            <input
+              type="text"
+              v-model="userProfile.account.basic.FLID.identity"
+              readonly="true"
+              v-tooltip
+              title="Generated automatically"
+              delay='{"show":"500", "hide":"100"}'
+            />
           </div>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-password" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-password"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="password" v-model="passwordOperation.password" :placeholder="passwordOperation.placeholder"
-              readonly="true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword($event)" @blur="stopEdittingPassword($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="password"
+              v-model="passwordOperation.password"
+              :placeholder="passwordOperation.placeholder"
+              readonly="true"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword($event)"
+              @blur="stopEdittingPassword($event)"
+              @keyup.enter="blurInput($event)"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
           </div>
           <div class="collapse-item-input">
-            <input type="password" v-model="passwordOperation.password2" :placeholder="passwordOperation.placeholder2"
-              readonly=" true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword2($event)" @blur="stopEdittingPassword2($event)" @keyup.enter="blurInput($event)"
-              ref="password2Input" />
+            <input
+              type="password"
+              v-model="passwordOperation.password2"
+              :placeholder="passwordOperation.placeholder2"
+              readonly=" true"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword2($event)"
+              @blur="stopEdittingPassword2($event)"
+              @keyup.enter="blurInput($event)"
+              ref="password2Input"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="passwordOperation.message" class="error-message">
               {{ passwordOperation.message }}
@@ -81,50 +133,104 @@
           </div>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-email" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-email"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="emailOperation.email.address" readonly="true" v-tooltip title="Click to update"
-              delay='{"show":"500", "hide":"100"}' @click="edittingEmail($event)" @blur="stopEdittingEmail($event)"
-              @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="emailOperation.email.address"
+              readonly="true"
+              v-tooltip
+              title="Click to update"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingEmail($event)"
+              @blur="stopEdittingEmail($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
           <div v-if="emailOperation.verifyingMode" class="collapse-item-input">
-            <input type="text" v-model="emailOperation.verificationCode" placeholder="verification code" v-tooltip
-              title="Put the verification code received in the email" delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingEmailVerificationCode($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="emailOperation.verificationCode"
+              placeholder="verification code"
+              v-tooltip
+              title="Put the verification code received in the email"
+              delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingEmailVerificationCode($event)"
+              @keyup.enter="blurInput($event)"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p>
           </div>
 
-          <button v-if="!emailOperation.verifyingMode" class="btn btn-link" :disabled="emailOperation.email.verified"
-            @click="startVerifyingEmail()" v-tooltip :title="emailOperation.email.verified
-              ? 'The email has been verified'
-              : 'The email needs to be verify'
-              " delay='{"show":"500", "hide":"100"}'>
+          <button
+            v-if="!emailOperation.verifyingMode"
+            class="btn btn-link"
+            :disabled="emailOperation.email.verified"
+            @click="startVerifyingEmail()"
+            v-tooltip
+            :title="
+              emailOperation.email.verified
+                ? 'The email has been verified'
+                : 'The email needs to be verify'
+            "
+            delay='{"show":"500", "hide":"100"}'
+          >
             {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-mobile" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-mobile"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="mobileOperation.mobile.number" readonly="true" v-tooltip title="Click to update"
-              @click="edittingMobile($event)" @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="mobileOperation.mobile.number"
+              readonly="true"
+              v-tooltip
+              title="Click to update"
+              @click="edittingMobile($event)"
+              @blur="stopEdittingMobile($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
           <div v-if="mobileOperation.verifyingMode" class="collapse-item-input">
-            <input type="text" v-model="mobileOperation.verificationCode" placeholder="verification code" v-tooltip
-              title="Put the verification code received in the mobile number" delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingMobileVerificationCode($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="mobileOperation.verificationCode"
+              placeholder="verification code"
+              v-tooltip
+              title="Put the verification code received in the mobile number"
+              delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingMobileVerificationCode($event)"
+              @keyup.enter="blurInput($event)"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
           </div>
-          <button v-if="!mobileOperation.verifyingMode" class="btn btn-link" :disabled="mobileOperation.mobile.verified"
-            @click="startVerifyingMobile()" v-tooltip :title="mobileOperation.mobile.verified
-              ? 'The mobile number has been verified'
-              : 'The mobile number needs to be verify'
-              " delay='{"show":"500", "hide":"100"}'>
+          <button
+            v-if="!mobileOperation.verifyingMode"
+            class="btn btn-link"
+            :disabled="mobileOperation.mobile.verified"
+            @click="startVerifyingMobile()"
+            v-tooltip
+            :title="
+              mobileOperation.mobile.verified
+                ? 'The mobile number has been verified'
+                : 'The mobile number needs to be verify'
+            "
+            delay='{"show":"500", "hide":"100"}'
+          >
             {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
@@ -136,47 +242,73 @@
           <label for="personal-summary">{{ $t('Personal') }}</label>
         </div>
         <div class="panel-content-container" id="personal-summary">
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
-            aria-expanded="false" aria-controls="collapse-user-identity">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-identity"
+            aria-expanded="false"
+            aria-controls="collapse-user-identity"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-fullname">{{
                 $t('Full name')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="account-summary-user-fullname">
                 {{ userProfile.account.basic.first_name }}
                 {{ userProfile.account.basic.last_name }}
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-photo"
-            aria-expanded="false" aria-controls="collapse-personal-user-photo">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-user-photo"
+            aria-expanded="false"
+            aria-controls="collapse-personal-user-photo"
+          >
             <div class="profile-item-container profile-photo-container">
-              <img class="profile-photo" alt="user portrait" id="personal-photo-operation-image" :src="userProfile.account.basic.photo.base64
-                ? userProfile.account.basic.photo.base64
-                : profileUrl
-                " />
+              <img
+                class="profile-photo"
+                alt="user portrait"
+                id="personal-photo-operation-image"
+                :src="
+                  userProfile.account.basic.photo.base64
+                    ? userProfile.account.basic.photo.base64
+                    : profileUrl
+                "
+              />
               <label class="profile-item-label" for="personal-photo-operation-image">{{
                 $t('Portrait')
-                }}</label>
+              }}</label>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-intro"
-            aria-expanded="false" aria-controls="collapse-personal-user-intro">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-user-intro"
+            aria-expanded="false"
+            aria-controls="collapse-personal-user-intro"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-self-intro">{{
                 $t('Self-intro')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="personal-summary-self-intro">
                 {{ userProfile.account.basic.self_intro.summary }}
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-earning-now"
-            aria-expanded="false" aria-controls="collapse-personal-earning-now">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-earning-now"
+            aria-expanded="false"
+            aria-controls="collapse-personal-earning-now"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-earning-now">{{
                 $t('Earning now')
-                }}</label>
+              }}</label>
               <span class="profile-item-span" id="personal-summary-earning-now">
                 {{ userProfile.account.provider.accepting_request ? 'Yes' : 'No' }}
               </span>
@@ -184,102 +316,198 @@
           </button>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-identity" aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-identity"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="identityOperation.first_name" placeholder="First Name" v-tooltip
-              title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
-              @click="edittingFirstname($event)" @blur="stopEdittingFirstname($event)"
-              @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="identityOperation.first_name"
+              placeholder="First Name"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              readonly="true"
+              @click="edittingFirstname($event)"
+              @blur="stopEdittingFirstname($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
           <div class="collapse-item-input">
-            <input type="text" v-model="identityOperation.last_name" placeholder="Last Name" readonly="true"
-              @click="edittingLastname($event)" @blur="stopEdittingLastname($event)" @keyup.enter="blurInput($event)"
-              v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}' />
+            <input
+              type="text"
+              v-model="identityOperation.last_name"
+              placeholder="Last Name"
+              readonly="true"
+              @click="edittingLastname($event)"
+              @blur="stopEdittingLastname($event)"
+              @keyup.enter="blurInput($event)"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+            />
           </div>
         </div>
       </div>
 
-      <div class="collapse collapse-content-container" id="collapse-personal-user-photo"
-        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-personal-user-photo"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-item-container">
           <label class="btn btn-link" for="personal-photo-operation-image">
-            <img class="user-portrait-img" id="personal-photo-operation-image" alt="user portrait" :src="userProfile.account.basic.photo.base64
-              ? userProfile.account.basic.photo.base64
-              : profileUrl
-              " v-tooltip title="Click to update" @click="selectUserPhoto()" />
+            <img
+              class="user-portrait-img"
+              id="personal-photo-operation-image"
+              alt="user portrait"
+              :src="
+                userProfile.account.basic.photo.base64
+                  ? userProfile.account.basic.photo.base64
+                  : profileUrl
+              "
+              v-tooltip
+              title="Click to update"
+              @click="selectUserPhoto()"
+            />
           </label>
-          <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType" hidden
-            @change="onUserPhotoChange($event)" />
+          <input
+            ref="uploadUserPhotoInput"
+            type="file"
+            :accept="identityOperation.photo.acceptableType"
+            hidden
+            @change="onUserPhotoChange($event)"
+          />
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-personal-user-intro"
-        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-personal-user-intro"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-editor">
-            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html"
-              :disabled="!personalOperation.self_intro.is_editing" />
+            <freeleaps-editor
+              v-model:content="personalOperation.self_intro.content_html"
+              :disabled="!personalOperation.self_intro.is_editing"
+            />
             <div class="btn-group-container">
-              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link"
-                @click="personalOperation.self_intro.is_editing = true">
+              <button
+                v-if="!personalOperation.self_intro.is_editing"
+                class="btn btn-link"
+                @click="personalOperation.self_intro.is_editing = true"
+              >
                 {{ $t('Edit') }}
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" class="btn btn-link" type="button"
-                data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                class="btn btn-link"
+                type="button"
+                data-bs-toggle="offcanvas"
+                data-bs-target="#offcanvas-template"
+                aria-controls="offcanvas-template"
+              >
                 {{ $t('Templates') }}
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="updateSelfIntro()"
+                class="btn btn-link"
+              >
                 {{ $t('Update') }}
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)"
-                class="btn btn-link">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="stopEdittingSelfintro($event)"
+                class="btn btn-link"
+              >
                 {{ $t('Cancel') }}
               </button>
             </div>
           </div>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-personal-earning-now"
-        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-personal-earning-now"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-checkbox-container">
           <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox"
-              v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)"
-              :disabled="!paymentOperation.ready_to_receive_money" />
+            <input
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+              id="personal-earning-now-checkbox"
+              v-model="personalOperation.accepting_request"
+              @click="updateAcceptingRequest($event)"
+              :disabled="!paymentOperation.ready_to_receive_money"
+            />
             <label class="form-check-label" for="personal-earning-now-checkbox">
               <span>{{ $t('I want to be a service provider and earn money') }}</span>
-              <span v-if="personalOperation.show_stripe_status" style="color: red">*&nbsp;{{ $t('Stripe account'
-                + 'onboarding is not completed.') }}</span>
+              <span v-if="personalOperation.show_stripe_status" style="color: red"
+                >*&nbsp;{{ $t('Stripe account' + 'onboarding is not completed.') }}</span
+              >
             </label>
           </div>
           <div class="flex-1" />
           <div class="collapse-item-input">
-            <input id="personal-expected-salary" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              readonly="true" @click="edittingExpectedSalary($event)" @blur="stopedittingExpectedSalary($event)"
-              @keyup.enter="blurInput($event)" v-model="personalOperation.expected_salary.hourly" />
+            <input
+              id="personal-expected-salary"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              readonly="true"
+              @click="edittingExpectedSalary($event)"
+              @blur="stopedittingExpectedSalary($event)"
+              @keyup.enter="blurInput($event)"
+              v-model="personalOperation.expected_salary.hourly"
+            />
             <span class="collapse-item-currency">{{
               userProfile.account.provider.expected_salary.currency
-              }}</span>
+            }}</span>
           </div>
         </div>
         <div class="collapse-item-container">
-          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
-            <img v-if="paymentOperation.wechat_qr_code_img.data" class="uploader-img-show"
-              :src="paymentOperation.wechat_qr_code_img.data" />
-            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn"
-              src="@/assets/images/qr-code.png" />
+          <label
+            v-if="Is_Wechat_QR_Code_Payment()"
+            class="collapse-item-uploader"
+            for="qr-uploader"
+          >
+            <img
+              v-if="paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-show"
+              :src="paymentOperation.wechat_qr_code_img.data"
+            />
+            <img
+              v-if="!paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-btn"
+              src="@/assets/images/qr-code.png"
+            />
             <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">{{
               $t('Upload QR code to receive payment')
-              }}</span>
+            }}</span>
           </label>
-          <input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file" id="qr-uploader"
-            :accept="paymentOperation.wechat_qr_code_img.acceptableType" hidden
-            @change="onUploadWechatQRCodePhoto($event)" />
+          <input
+            v-if="Is_Wechat_QR_Code_Payment()"
+            ref="uploadWechatQRCodePhotoInput"
+            type="file"
+            id="qr-uploader"
+            :accept="paymentOperation.wechat_qr_code_img.acceptableType"
+            hidden
+            @change="onUploadWechatQRCodePhoto($event)"
+          />
         </div>
         <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
-          <span>{{ $t('Have you linked your strip account?') }}</span><button class="btn btn-link"
-            @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
+          <span>{{ $t('Have you linked your strip account?') }}</span
+          ><button class="btn btn-link" @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
         </div>
         <div v-if="personalOperation.accepting_request" class="collapse-item-container">
           <span>{{
@@ -444,26 +672,49 @@
         </tbody>
       </table>
     </div>
-    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
-      aria-labelledby="offcanvas-template">
+    <div
+      class="offcanvas offcanvas-end offcanvas-container"
+      tabindex="-1"
+      id="offcanvas-template"
+      aria-labelledby="offcanvas-template"
+    >
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-template">
           {{ $t('Apply self-intro template') }}
         </h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button
+          type="button"
+          class="btn-close"
+          data-bs-dismiss="offcanvas"
+          aria-label="Close"
+        ></button>
       </div>
       <div class="offcanvas-body">
         <div class="accordion" id="template-item-container">
-          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
-            class="accordion-item">
+          <div
+            v-for="(template, index) in availableTemplates"
+            :key="index"
+            :id="'template' + index"
+            class="accordion-item"
+          >
             <h2 class="accordion-header" :id="'heading' + index">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'collapse' + index"
+                aria-expanded="false"
+                :aria-controls="'collapse' + index"
+              >
                 {{ template.title }}
               </button>
             </h2>
-            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container">
+            <div
+              :id="'collapse' + index"
+              class="accordion-collapse collapse"
+              :aria-labelledby="'heading' + index"
+              data-bs-parent="#template-item-container"
+            >
               <div class="accordion-body">
                 <button class="select-template-button" @click="selectTemplate(template)">
                   {{ $t('Apply') }}
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index 2ebf945..45855b4 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -276,9 +276,7 @@
 </template>
 
 <script>
-import {
-  ProviderHubApi
-} from '@/utils/index'
+import { ProviderHubApi } from '@/utils/index'
 export default {
   name: 'ProviderHub',
   props: {},
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index ee3c44b..01c964d 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -1,57 +1,106 @@
 <template>
   <div class="making-proposal-container offcanvas-parent">
     <div class="making-proposal-content">
-      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
-        aria-labelledby="offcanvas-copy-existing">
+      <div
+        class="offcanvas offcanvas-end offcanvas-container"
+        tabindex="-1"
+        id="offcanvas-copy-existing"
+        aria-labelledby="offcanvas-copy-existing"
+      >
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-copy-existing">
             {{ $t('Copy from existing proposals') }}
           </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="existing-proposal-item-container">
-            <div v-for="(existingProposal, index) in existingProposals" :key="index" :id="'existing-proposal' + index"
-              class="accordion-item">
+            <div
+              v-for="(existingProposal, index) in existingProposals"
+              :key="index"
+              :id="'existing-proposal' + index"
+              class="accordion-item"
+            >
               <h2 class="accordion-header" :id="'existing-heading' + index">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
-                  :aria-controls="'collapse' + index">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'existing-proposal-collapse' + index"
+                  aria-expanded="false"
+                  :aria-controls="'collapse' + index"
+                >
                   <span class="dashed-container">{{ existingProposal.request.title }}</span>
                 </button>
               </h2>
-              <div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
-                :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
+              <div
+                :id="'existing-proposal-collapse' + index"
+                class="accordion-collapse collapse"
+                :aria-labelledby="'existing-heading' + index"
+                data-bs-parent="#existing-proposal-item-container"
+              >
                 <div class="accordion-body">
                   <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                     {{ $t('Copy') }}
                   </button>
-                  <div class="existing-request-content-text" v-html="existingProposal.content"></div>
+                  <div
+                    class="existing-request-content-text"
+                    v-html="existingProposal.content"
+                  ></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
-        aria-labelledby="offcanvas-template">
+      <div
+        class="offcanvas offcanvas-end offcanvas-container"
+        tabindex="-1"
+        id="offcanvas-template"
+        aria-labelledby="offcanvas-template"
+      >
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-template">
             {{ $t('Apply proposal template') }}
           </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="template-item-container">
-            <div v-for="(template, index) in templates" :key="index" :id="'template' + index" class="accordion-item">
+            <div
+              v-for="(template, index) in templates"
+              :key="index"
+              :id="'template' + index"
+              class="accordion-item"
+            >
               <h2 class="accordion-header" :id="'heading' + index">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'collapse' + index"
+                  aria-expanded="false"
+                  :aria-controls="'collapse' + index"
+                >
                   <span class="dashed-container">{{ template.title }}</span>
                 </button>
               </h2>
-              <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
-                data-bs-parent="#template-item-container">
+              <div
+                :id="'collapse' + index"
+                class="accordion-collapse collapse"
+                :aria-labelledby="'heading' + index"
+                data-bs-parent="#template-item-container"
+              >
                 <div class="accordion-body">
                   <button class="load-template-button" @click="applyTemplate(template)">
                     {{ $t('Apply') }}
@@ -67,14 +116,22 @@
         <div class="accordion accordion-list" id="accordion-request-container">
           <div class="accordion-item">
             <h2 class="accordion-header">
-              <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapse-request-content" aria-expanded="false"
-                aria-controls="collapse-request-content">
+              <button
+                class="accordion-button"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapse-request-content"
+                aria-expanded="false"
+                aria-controls="collapse-request-content"
+              >
                 <span class="dashed-container">{{ request.title }}</span>
               </button>
             </h2>
-            <div id="collapse-request-content" class="accordion-collapse collapse"
-              data-bs-parent="#accordion-request-container">
+            <div
+              id="collapse-request-content"
+              class="accordion-collapse collapse"
+              data-bs-parent="#accordion-request-container"
+            >
               <div class="accordion-body">
                 <div class="request-content" v-html="request.content"></div>
               </div>
@@ -86,13 +143,23 @@
         <div class="proposal-header-container">
           <label class="proposal-label">{{ $t('Proposal') }}:</label>
           <div class="header-bar">
-            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
-              aria-controls="offcanvas-template">
+            <button
+              class="btn btn-link"
+              type="button"
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-template"
+              aria-controls="offcanvas-template"
+            >
               <svg-icon icon="btn-templates" />
               {{ $t('Templates') }}
             </button>
-            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
+            <button
+              class="btn btn-link"
+              type="button"
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-copy-existing"
+              aria-controls="offcanvas-copy-existing"
+            >
               <svg-icon icon="btn-history" />
               {{ $t('Copy') }}
             </button>
@@ -108,8 +175,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
-                      v-model="stage.payment" />
+                    <input
+                      class="input-email"
+                      :id="`stage-payment-content-${index}`"
+                      type="number"
+                      v-model="stage.payment"
+                    />
                     <label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label>
                   </div>
                   <span class="btn-start">{{ stage.currency }}</span>
@@ -120,8 +191,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
-                      v-model="stage.duration_in_days" />
+                    <input
+                      class="input-email"
+                      :id="`stage-duration-content-${index}`"
+                      type="number"
+                      v-model="stage.duration_in_days"
+                    />
                     <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
                   </div>
                   <span class="btn-start">{{ $t('day(s)') }}</span>
@@ -132,7 +207,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
+                    <input
+                      class="input-email"
+                      :id="`stage-note-content-${index}`"
+                      type="text"
+                      v-model="stage.note"
+                    />
                     <label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label>
                   </div>
                 </div>
@@ -167,7 +247,12 @@
               <span v-if="uploadFile">{{ uploadFile.name }}</span>
               <input type="file" hidden @change="handleFileUpload" />
             </label>
-            <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
+            <svg-icon
+              v-if="uploadFile"
+              icon="delete"
+              class-name="delete-icon"
+              @click.stop="clearFile"
+            />
           </div>
           <!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
           <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index c7cb7a8..de42e51 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -239,8 +239,8 @@ export default {
       }
 
       //TODO: need to move to validator module
-      if (!/^[a-zA-Z0-9-]+$/.test(product)) {
-        alert('Product name should only contain letters, numbers, or dashes')
+      if (!/^[a-zA-Z0-9\u4E00-\u9FA5-.:_]+$/.test(product)) {
+        alert('Product name should only contain letters, numbers, or dashes/colons/dots')
         return
       }