diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index 9f9f0ea..a12011e 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="userProfile" class="user-profile-container">
+  <div v-if="userProfile" class="user-profile-container offcanvas-parent">
     <div class="account-panel-container" id="account-panel">
       <div class="account-summary-bar-container">
         <div class="account-summary-header-container">
@@ -7,8 +7,13 @@
           <span v-if="accountNeedAttention" class="account-summary-header-attention-span">!</span>
         </div>
         <div class="account-summary-content-container" id="account-summary">
-          <button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
-            aria-expanded="false" aria-controls="collapse-user-id">
+          <button
+            class="profile-item-container-button"
+            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">User ID</label>
               <span class="profile-item-span" id="account-summary-user-id">
@@ -16,15 +21,25 @@
               </span>
             </div>
           </button>
-          <button class="profile-item-container-button-1" data-bs-toggle="collapse" data-bs-target="#collapse-password"
-            aria-expanded="false" aria-controls="collapse-password">
+          <button
+            class="profile-item-container-button-1"
+            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">Password</label>
               <span class="profile-item-span" id="account-summary-password"> ******** </span>
             </div>
           </button>
-          <button class="profile-item-container-button-4" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
-            aria-expanded="false" aria-controls="collapse-user-email">
+          <button
+            class="profile-item-container-button-4"
+            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">Email</label>
               <span class="profile-item-span" id="account-summary-email">
@@ -32,8 +47,13 @@
               </span>
             </div>
           </button>
-          <button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
-            aria-expanded="false" aria-controls="collapse-user-mobile">
+          <button
+            class="profile-item-container-button"
+            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">Mobile</label>
               <span class="profile-item-span" id="account-summary-mobile">
@@ -43,33 +63,71 @@
           </button>
         </div>
       </div>
-      <div class="collapse" id="collapse-user-id" aria-labelledby="account-summary" data-bs-parent="#account-panel">
+      <div
+        class="collapse"
+        id="collapse-user-id"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="user-id-password-operation-pannel-container">
           <div class="user-id-password-operation-container">
             <div class="user-id-operation-content-container">
               <label class="profile-item-label" for="user-id-operation-input">User ID(FILD)</label>
-              <input class="user-id-operation-input" type="text" v-model="userProfile.account.basic.FLID.identity"
-                readonly="true" v-tooltip title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
+              <input
+                class="user-id-operation-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>
-      <div class="collapse" id="collapse-password" aria-labelledby="account-summary" data-bs-parent="#account-panel">
+      <div
+        class="collapse"
+        id="collapse-password"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="user-id-password-operation-pannel-container">
           <div class="user-id-password-operation-container">
             <div class="user-password-operation-content-container">
               <label class="profile-item-label" for="user-password-operation-input">Password</label>
-              <input class="user-password-operation-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
+                class="user-password-operation-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)"
+              />
             </div>
             <div class="user-password-operation-content-container">
-              <label class="profile-item-label" for="user-id-operation-input">Repeat password</label>
-              <input class="user-password-operation-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" />
+              <label class="profile-item-label" for="user-id-operation-input"
+                >Repeat password</label
+              >
+              <input
+                class="user-password-operation-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"
+              />
             </div>
           </div>
           <p v-if="passwordOperation.message" class="error-input">
@@ -77,29 +135,67 @@
           </p>
         </div>
       </div>
-      <div class="collapse" id="collapse-user-email" aria-labelledby="account-summary" data-bs-parent="#account-panel">
+      <div
+        class="collapse"
+        id="collapse-user-email"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="user-email-operation-container">
           <div class="user-email-operation-content-container">
             <div class="user-email-operation-content-email-container">
               <label class="profile-item-label" for="user-email-operation-input">Email</label>
-              <input class="user-email-operation-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
+                class="user-email-operation-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="user-email-operation-content-code-container">
-              <label class="profile-item-label" for="user-email-verification-code-operation-input">Code</label>
-              <input class="user-email-operation-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)" />
+            <div
+              v-if="emailOperation.verifyingMode"
+              class="user-email-operation-content-code-container"
+            >
+              <label class="profile-item-label" for="user-email-verification-code-operation-input"
+                >Code</label
+              >
+              <input
+                class="user-email-operation-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)"
+              />
             </div>
-            <div v-if="!emailOperation.verifyingMode" class="user-email-operation-content-verify-container">
-              <label class="profile-item-label" for="user-email-operation-input">Verification</label>
-              <button class="user-email-operation-verified-button" :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"}'>
+            <div
+              v-if="!emailOperation.verifyingMode"
+              class="user-email-operation-content-verify-container"
+            >
+              <label class="profile-item-label" for="user-email-operation-input"
+                >Verification</label
+              >
+              <button
+                class="user-email-operation-verified-button"
+                :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>
@@ -107,29 +203,68 @@
           <p v-if="emailOperation.message" class="error-input">{{ emailOperation.message }}</p>
         </div>
       </div>
-      <div class="collapse" id="collapse-user-mobile" aria-labelledby="account-summary" data-bs-parent="#account-panel">
+      <div
+        class="collapse"
+        id="collapse-user-mobile"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="user-mobile-operation-pannel-container">
           <div class="user-mobile-operation-content-container">
             <div class="user-mobile-operation-content-number-container">
-              <label class="profile-item-label" for="user-email-operation-number-input">Mobile</label>
-              <input class="user-mobile-operation-number-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)" />
+              <label class="profile-item-label" for="user-email-operation-number-input"
+                >Mobile</label
+              >
+              <input
+                class="user-mobile-operation-number-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="user-mobile-operation-content-code-container">
-              <label class="profile-item-label" for="user-mobile-verification-code-operation-input">Code</label>
-              <input class="user-mobile-operation-code-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)" />
+            <div
+              v-if="mobileOperation.verifyingMode"
+              class="user-mobile-operation-content-code-container"
+            >
+              <label class="profile-item-label" for="user-mobile-verification-code-operation-input"
+                >Code</label
+              >
+              <input
+                class="user-mobile-operation-code-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)"
+              />
             </div>
-            <div v-if="!mobileOperation.verifyingMode" class="user-mobile-operation-content-verify-container">
-              <label class="profile-item-label" for="user-mobile-operation-input">Verification</label>
-              <button class="user-mobile-operation-verified-button" :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"}'>
+            <div
+              v-if="!mobileOperation.verifyingMode"
+              class="user-mobile-operation-content-verify-container"
+            >
+              <label class="profile-item-label" for="user-mobile-operation-input"
+                >Verification</label
+              >
+              <button
+                class="user-mobile-operation-verified-button"
+                :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>
@@ -144,10 +279,17 @@
           <label class="personal-summary-header-label" for="personal-summary">Personal</label>
         </div>
         <div class="personal-summary-content-container" id="personal-summary">
-          <button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
-            aria-expanded="false" aria-controls="collapse-user-identity">
+          <button
+            class="profile-item-container-button"
+            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">Full name</label>
+              <label class="profile-item-label" for="account-summary-user-fullname"
+                >Full name</label
+              >
               <span class="profile-item-span" id="account-summary-user-fullname">
                 {{ userProfile.account.basic.first_name }}
                 {{ userProfile.account.basic.last_name }}
@@ -155,18 +297,30 @@
             </div>
           </button>
 
-          <button class="profile-item-container-button-1" data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-photo" aria-expanded="false"
-            aria-controls="collapse-personal-user-photo">
+          <button
+            class="profile-item-container-button-1"
+            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">
               <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
-              <img class="personal-summary-user-portrait-img" alt="user portrait" id="personal-photo-operation-image"
-                src="@/assets/images/default-user-portrait.png" />
+              <img
+                class="personal-summary-user-portrait-img"
+                alt="user portrait"
+                id="personal-photo-operation-image"
+                src="@/assets/images/default-user-portrait.png"
+              />
             </div>
           </button>
-          <button class="profile-item-container-button-4" data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-intro" aria-expanded="false"
-            aria-controls="collapse-personal-user-intro">
+          <button
+            class="profile-item-container-button-4"
+            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">Self-intro</label>
               <span class="profile-item-span" id="personal-summary-self-intro">
@@ -174,11 +328,17 @@
               </span>
             </div>
           </button>
-          <button class="profile-item-container-button" data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-earning-now" aria-expanded="false"
-            aria-controls="collapse-personal-earning-now">
+          <button
+            class="profile-item-container-button"
+            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">Earning now</label>
+              <label class="profile-item-label" for="personal-summary-earning-now"
+                >Earning now</label
+              >
               <span class="profile-item-span" id="personal-summary-earning-now">
                 {{ userProfile.account.provider.accepting_request ? 'Yes' : 'No' }}
               </span>
@@ -186,77 +346,169 @@
           </button>
         </div>
       </div>
-      <div class="collapse" id="collapse-user-identity" aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel">
+      <div
+        class="collapse"
+        id="collapse-user-identity"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="user-identity-operation-container">
           <div class="user-identity-operation-content-container">
             <div class="user-first-name-operation-container">
-              <label class="profile-item-label" for="user-first-name-operation-input">First name</label>
-              <input class="user-first-name-operation-input" type="text" v-model="identityOperation.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)" />
+              <label class="profile-item-label" for="user-first-name-operation-input"
+                >First name</label
+              >
+              <input
+                class="user-first-name-operation-input"
+                type="text"
+                v-model="identityOperation.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="user-last-name-operation-container">
-              <label class="profile-item-label" for="user-last-name-operation-input">Last name</label>
-              <input class="user-last-name-operation-input" type="text" v-model="identityOperation.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"}' />
+              <label class="profile-item-label" for="user-last-name-operation-input"
+                >Last name</label
+              >
+              <input
+                class="user-last-name-operation-input"
+                type="text"
+                v-model="identityOperation.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>
 
-      <div class="collapse" id="collapse-personal-user-photo" aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel">
+      <div
+        class="collapse"
+        id="collapse-personal-user-photo"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="personal-photo-operation-container">
           <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
-          <img class="personal-operation-user-portrait-img" id="personal-photo-operation-image" alt="user portrait"
-            src="@/assets/images/default-user-portrait.png" v-tooltip title="Click to update"
-            @click="selectUserPhoto()" />
-          <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType"
-            style="display: none" @change="onUserPhotoChange($event)" />
+          <img
+            class="personal-operation-user-portrait-img"
+            id="personal-photo-operation-image"
+            alt="user portrait"
+            src="@/assets/images/default-user-portrait.png"
+            v-tooltip
+            title="Click to update"
+            @click="selectUserPhoto()"
+          />
+          <input
+            ref="uploadUserPhotoInput"
+            type="file"
+            :accept="identityOperation.photo.acceptableType"
+            style="display: none"
+            @change="onUserPhotoChange($event)"
+          />
         </div>
       </div>
-      <div class="collapse" id="collapse-personal-user-intro" aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel">
+      <div
+        class="collapse"
+        id="collapse-personal-user-intro"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="personal-self-intro-operation-container">
           <div class="personal-self-intro-operation-header-container">
-            <label class="personal-self-intro-content-label" for="personal-self-intro-editor">Self-intro</label>
-            <div v-if="personalOperation.self_intro.is_editing" class="self-intro-in-header-editing-action-container">
-              <button class="personal-self-intro-template-button">templates</button>
+            <label class="personal-self-intro-content-label" for="personal-self-intro-editor"
+              >Self-intro</label
+            >
+            <div
+              v-if="personalOperation.self_intro.is_editing"
+              class="self-intro-in-header-editing-action-container"
+            >
+              <button
+                class="personal-self-intro-template-button"
+                type="button"
+                data-bs-toggle="offcanvas"
+                data-bs-target="#offcanvas-template"
+                aria-controls="offcanvas-template"
+              >
+                templates
+              </button>
             </div>
           </div>
-          <div v-if="personalOperation.self_intro.is_editing" class="self-intro-in-content-editing-action-container">
+          <div
+            v-if="personalOperation.self_intro.is_editing"
+            class="self-intro-in-content-editing-action-container"
+          >
             <button @click="updateSelfIntro()" class="in-context-foward-button">Update</button>
-            <button @click="stopEdittingSelfintro($event)" class="in-context-back-button">Cancel</button>
+            <button @click="stopEdittingSelfintro($event)" class="in-context-back-button">
+              Cancel
+            </button>
           </div>
-          <div class="personal-self-intro-content-editor" id="personal-self-intro-editor" ref="personal_self_intro_editor_div"
-            v-html="personalOperation.self_intro.content_html" contenteditable="false" v-tooltip title="Click to edit"
-            delay='{"show":"500", "hide":"100"}' @click="edittingSelfintro($event)" @keyup="keyUpOnSelfIntroEditor($event)"></div>
+          <div
+            class="personal-self-intro-content-editor"
+            id="personal-self-intro-editor"
+            ref="personal_self_intro_editor_div"
+            v-html="personalOperation.self_intro.content_html"
+            contenteditable="false"
+            v-tooltip
+            title="Click to edit"
+            delay='{"show":"500", "hide":"100"}'
+            @click="edittingSelfintro($event)"
+            @keyup="keyUpOnSelfIntroEditor($event)"
+          ></div>
         </div>
       </div>
-      <div class="collapse" id="collapse-personal-earning-now" aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel">
+      <div
+        class="collapse"
+        id="collapse-personal-earning-now"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="personal-earning-now-operation-container">
           <div class="personal-earning-now-content-container">
             <div class="form-check">
-              <input class="form-check-input" type="checkbox" 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">I want to be a service provider and earn
-                money</label>
+              <input
+                class="form-check-input"
+                type="checkbox"
+                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"
+                >I want to be a service provider and earn money</label
+              >
               <br />
               <label v-if="personalOperation.show_stripe_status" style="color: red">
-                * Stripe account onboarding is not completed.</label>
+                * Stripe account onboarding is not completed.</label
+              >
             </div>
             <div class="personal-expected-salary-content-container">
-              <label class="profile-item-label" for="personal-expected-salary">Expected hourly salary</label>
+              <label class="profile-item-label" for="personal-expected-salary"
+                >Expected hourly salary</label
+              >
               <div class="input-group">
-                <input class="personal-expected-salary-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
+                  class="personal-expected-salary-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="input-group-text">{{
                   userProfile.account.provider.expected_salary.currency
                 }}</span>
@@ -264,128 +516,182 @@
             </div>
           </div>
           <div class="personal-payment-container">
-            <img v-if="Is_Wechat_QR_Code_Payment()" class="personal-payment-wechat-qr-code-image"
-              :src="paymentOperation.wechat_qr_code_img.data" @click="selectWechatQRCodePhoto()" />
-            <input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file"
-              :accept="paymentOperation.wechat_qr_code_img.acceptableType" style="display: none"
-              @change="onUploadWechatQRCodePhoto($event)" />
+            <img
+              v-if="Is_Wechat_QR_Code_Payment()"
+              class="personal-payment-wechat-qr-code-image"
+              :src="paymentOperation.wechat_qr_code_img.data"
+              @click="selectWechatQRCodePhoto()"
+            />
+            <input
+              v-if="Is_Wechat_QR_Code_Payment()"
+              ref="uploadWechatQRCodePhotoInput"
+              type="file"
+              :accept="paymentOperation.wechat_qr_code_img.acceptableType"
+              style="display: none"
+              @change="onUploadWechatQRCodePhoto($event)"
+            />
 
-            <span>Have you linked your strip account?</span><button v-if="Is_Stripe_Payment()"
-              @click="visitStripe()">Visit Stripe</button>
+            <span>Have you linked your strip account?</span
+            ><button v-if="Is_Stripe_Payment()" @click="visitStripe()">Visit Stripe</button>
           </div>
-          <span v-if="personalOperation.accepting_request" class="operation-note-text">You are a service provider now.
-            Please review your self-intro to reflect your skills to
-            deliver projects.</span>
+          <span v-if="personalOperation.accepting_request" class="operation-note-text"
+            >You are a service provider now. Please review your self-intro to reflect your skills to
+            deliver projects.</span
+          >
         </div>
       </div>
     </div>
     <div class="accordion" id="accordion-achievement-panel">
       <div class="accordion-item">
         <h2 class="accordion-header">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-achievement"
-            aria-expanded="true" aria-controls="collapse-achievement">
+          <button
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-achievement"
+            aria-expanded="true"
+            aria-controls="collapse-achievement"
+          >
             <div class="achievement-bar-container">
               <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-stay-on-operation">On Freeleaps</label>
+                <label class="profile-item-label" for="achievement-stay-on-operation"
+                  >On Freeleaps</label
+                >
                 <span class="profile-item-span" id="achievement-stay-on-operation">
                   {{ userProfile.achievemnt.activeness.days_of_staying_on }} day(s)
                 </span>
               </div>
               <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-connections-content">Connections</label>
+                <label class="profile-item-label" for="achievement-connections-content"
+                  >Connections</label
+                >
                 <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.connections }}</span>
+                  {{ userProfile.achievemnt.activeness.connections }}</span
+                >
               </div>
               <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-connections-content">Messages</label>
+                <label class="profile-item-label" for="achievement-connections-content"
+                  >Messages</label
+                >
                 <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.messages }}</span>
+                  {{ userProfile.achievemnt.activeness.messages }}</span
+                >
               </div>
               <div class="achievement-summary-item-container">
                 <label class="profile-item-label" for="achievement-credit-content">Credit</label>
                 <span class="profile-item-span" id="achievement-credit-content">
-                  {{ userProfile.achievemnt.activeness.credit }}</span>
+                  {{ userProfile.achievemnt.activeness.credit }}</span
+                >
               </div>
             </div>
           </button>
         </h2>
-        <div id="collapse-achievement" class="accordion-collapse collapse show" data-bs-parent="#collapse-achievement">
+        <div
+          id="collapse-achievement"
+          class="accordion-collapse collapse show"
+          data-bs-parent="#collapse-achievement"
+        >
           <div class="accordion-body">
             <div class="achievement-panel-container">
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-spending-operation">Total spending</label>
+                <label class="profile-item-label" for="achievement-spending-operation"
+                  >Total spending</label
+                >
                 <span class="achievement-summary-spending-span" id="achievement-spending-operation">
                   {{ userProfile.achievemnt.issuer.spending.total }}
                   {{ userProfile.achievemnt.issuer.spending.currency }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-spending-content">12-month
-                  spending</label>
+                <label class="profile-item-label" for="achievement-twelve-month-spending-content"
+                  >12-month spending</label
+                >
                 <span class="profile-item-span" id="achievement-twelve-month-spending-content">
                   {{ userProfile.achievemnt.issuer.spending.twelve_month }}
-                  {{ userProfile.achievemnt.issuer.spending.currency }}</span>
+                  {{ userProfile.achievemnt.issuer.spending.currency }}</span
+                >
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-spending-content">3-month spending</label>
+                <label class="profile-item-label" for="achievement-thirty-day-spending-content"
+                  >3-month spending</label
+                >
                 <span class="profile-item-span" id="achievement-thirty-day-spending-content">
                   {{ userProfile.achievemnt.issuer.spending.three_month }}
-                  {{ userProfile.achievemnt.issuer.spending.currency }}</span>
+                  {{ userProfile.achievemnt.issuer.spending.currency }}</span
+                >
               </div>
               <div class="achievement-item-container">
                 <label class="profile-item-label" for="achievement-deposit-content">Deposit</label>
                 <span class="profile-item-span" id="achievement-deposit-content">
                   {{ userProfile.achievemnt.issuer.deposit.available }}
-                  {{ userProfile.achievemnt.issuer.deposit.currency }}</span>
+                  {{ userProfile.achievemnt.issuer.deposit.currency }}</span
+                >
               </div>
             </div>
             <div class="achievement-panel-container">
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-spending-operation">Posted</label>
+                <label class="profile-item-label" for="achievement-spending-operation"
+                  >Posted</label
+                >
                 <span class="profile-item-span" id="achievement-spending-operation">
                   {{ userProfile.achievemnt.issuer.request.issued }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-spending-content">Accomplished</label>
+                <label class="profile-item-label" for="achievement-twelve-month-spending-content"
+                  >Accomplished</label
+                >
                 <span class="profile-item-span" id="achievement-twelve-month-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.accomplished }}</span>
+                  {{ userProfile.achievemnt.issuer.request.accomplished }}</span
+                >
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-spending-content">Active</label>
+                <label class="profile-item-label" for="achievement-thirty-day-spending-content"
+                  >Active</label
+                >
                 <span class="profile-item-span" id="achievement-thirty-day-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.active }}</span>
+                  {{ userProfile.achievemnt.issuer.request.active }}</span
+                >
               </div>
               <div class="achievement-item-container">
                 <label class="profile-item-label" for="achievement-deposit-content">Ongoing</label>
                 <span class="profile-item-span" id="achievement-deposit-content">
-                  {{ userProfile.achievemnt.issuer.request.ongoing }}</span>
+                  {{ userProfile.achievemnt.issuer.request.ongoing }}</span
+                >
               </div>
             </div>
 
             <div class="achievement-panel-container">
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-total-earning-content">Total earning</label>
+                <label class="profile-item-label" for="achievement-total-earning-content"
+                  >Total earning</label
+                >
                 <span class="profile-item-span" id="achievement-total-earning-content">
                   {{ userProfile.achievemnt.provider.earnings.total }}
                   {{ userProfile.achievemnt.provider.earnings.currency }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-earning-content">12-month earning</label>
+                <label class="profile-item-label" for="achievement-twelve-month-earning-content"
+                  >12-month earning</label
+                >
                 <span class="profile-item-span" id="achievement-twelve-month-earning-content">
                   {{ userProfile.achievemnt.provider.earnings.twelve_month }}
                   {{ userProfile.achievemnt.provider.earnings.currency }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-earning-content">Delivered</label>
+                <label class="profile-item-label" for="achievement-thirty-day-earning-content"
+                  >Delivered</label
+                >
                 <span class="profile-item-span" id="achievement-thirty-day-earning-content">
                   {{ userProfile.achievemnt.provider.deliveries.delivered_projects }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-delivering-time">Delivering time</label>
+                <label class="profile-item-label" for="achievement-delivering-time"
+                  >Delivering time</label
+                >
                 <span class="profile-item-span" id="achievement-delivering-time">
                   {{
                     userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
@@ -398,19 +704,72 @@
         </div>
       </div>
     </div>
+    <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">Apply self-intro template</h5>
+        <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"
+          >
+            <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"
+              >
+                {{ template.title }}
+              </button>
+            </h2>
+            <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)">
+                  Apply
+                </button>
+                <div class="template-content-textarea" v-html="template.content"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { moneyCollectionTypeEnum } from '../../../types/index'
 
-import { UserProfileApi, elementHandler,textAreaAujuster } from '../../../utils/index'
+import { UserProfileApi, elementHandler, textAreaAujuster } from '../../../utils/index'
 
 export default {
   name: 'UserProfile',
   props: {},
   mounted() {
     this.fetchProfile()
+    this.fetchTemplates()
   },
   watch: {
     'userProfile.account.basic.first_name': {
@@ -443,6 +802,7 @@ export default {
       userProfile: null,
       message: null,
       accountNeedAttention: false,
+      availableTemplates: null,
       identityOperation: {
         first_name: null,
         last_name: null,
@@ -485,7 +845,7 @@ export default {
       personalOperation: {
         self_intro: {
           summary: null,
-          content_html: "",
+          content_html: '',
           is_editing: false
         },
         expected_salary: {
@@ -791,26 +1151,41 @@ export default {
     stopEdittingSelfintro($event) {
       elementHandler.stopEdittingContent($event.target)
       this.personalOperation.self_intro.is_editing = false
-      this.personalOperation.self_intro.content_html = this.userProfile.account.basic.self_intro.content_html
+      this.personalOperation.self_intro.content_html =
+        this.userProfile.account.basic.self_intro.content_html
     },
-    keyUpOnSelfIntroEditor($event){
+    keyUpOnSelfIntroEditor($event) {
       let element = $event.target
       textAreaAujuster.adjustHight(element)
     },
     updateSelfIntro() {
-      this.personalOperation.self_intro.content_html = this.$refs.personal_self_intro_editor_div.innerHTML;
+      this.personalOperation.self_intro.content_html =
+        this.$refs.personal_self_intro_editor_div.innerHTML
       if (!this.personalOperation.self_intro.content_html) {
-        return;
+        return
       }
       UserProfileApi.updateSelfIntro(this.personalOperation.self_intro.content_html)
         .then((response) => {
           this.userProfile.account.basic.self_intro = response.data.self_intro
-          this.personalOperation.self_intro = response.data.self_intro
+          this.personalOperation.self_intro = response.data.self_intro // makes a reference instead of a copy
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
         })
     },
+    fetchTemplates() {
+      UserProfileApi.fetchSelfIntroTemplates('')
+        .then((response) => {
+          this.availableTemplates = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    selectTemplate(template) {
+      this.personalOperation.self_intro.content_html = template.content
+    },
+
     //payment
     updateLocalPaymentData() {
       this.paymentOperation.ready_to_receive_money =
@@ -1291,14 +1666,17 @@ export default {
   @extend .initiate-button;
   width: fit-content;
 }
-.in-context-foward-button{
+
+.in-context-foward-button {
   @extend .proceed-button;
   width: fit-content;
 }
-.in-context-back-button{
+
+.in-context-back-button {
   @extend .back-button;
   width: fit-content;
 }
+
 .personal-self-intro-content-editor {
   @extend .container;
   @extend .border;
@@ -1557,4 +1935,8 @@ export default {
   @extend .m-auto;
   width: fit-content;
 }
+
+.offcanvas-parent {
+  position: relative;
+}
 </style>
diff --git a/frontend/src/utils/backend/userProfile.js b/frontend/src/utils/backend/userProfile.js
index 5e03200..145ca06 100644
--- a/frontend/src/utils/backend/userProfile.js
+++ b/frontend/src/utils/backend/userProfile.js
@@ -208,5 +208,18 @@ class UserProfileApi {
     )
     return request
   }
+  static fetchSelfIntroTemplates(tags) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/user/profile/fetch-templates-for-self-intro',
+      {
+        tags: tags
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
 }
 export { UserProfileApi }