diff --git a/frontend/src/assets/images/qr-code.png b/frontend/src/assets/images/qr-code.png
new file mode 100644
index 0000000..b00312b
Binary files /dev/null and b/frontend/src/assets/images/qr-code.png differ
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 24e8b73..ff3a804 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -41,6 +41,13 @@
           <svg-icon icon="post" class-name="icon" />
           Post
         </button>
+        <div class="form-check form-switch header-switch-container">
+          <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled>
+          <label class="form-check-label" for="personal-earning-now-checkbox">
+            <span>Providing service</span>
+          </label>
+          <div class="header-switch-desc">Please go to profile page to add money receiving method</div>
+        </div>
       </div>
       <div class="profile-container">
         <img
@@ -214,6 +221,21 @@ export default {
   }
 }
 
+.header-switch-container {
+  position: relative;
+
+  .header-switch-desc {
+    position: absolute;
+    background-color: white;
+    left: 0;
+    bottom: -20px;
+    font-size: 12px;
+    color: #3D455F;
+    white-space: nowrap;
+    padding: 2px 5px;
+  }
+}
+
 .company-logo {
   max-width: 100%;
   max-height: 100%;
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index bfcbbb1..b93c4c6 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -1,14 +1,14 @@
 <template>
   <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">
-          <label class="account-summary-header-label" for="account-summary">Login</label>
-          <span v-if="accountNeedAttention" class="account-summary-header-attention-span">!</span>
+    <div class="panel-container" id="account-panel">
+      <div>
+        <div class="panel-header-container">
+          <label for="account-summary">Login</label>
+          <span v-if="accountNeedAttention">!</span>
         </div>
-        <div class="account-summary-content-container" id="account-summary">
+        <div class="panel-content-container" id="account-summary">
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-id"
             aria-expanded="false"
@@ -22,7 +22,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button-1"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-password"
             aria-expanded="false"
@@ -34,7 +34,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button-4"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-email"
             aria-expanded="false"
@@ -48,7 +48,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-mobile"
             aria-expanded="false"
@@ -64,223 +64,178 @@
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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"}'
-              />
-            </div>
+        <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"}'
+            />
           </div>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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)"
-              />
-            </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"
-              />
-            </div>
+        <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)"
+            />
+            <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"
+            />
+            <svg-icon icon="msg-enter" class-name="enter-icon" />
+            <p v-if="passwordOperation.message" class="error-message">
+              {{ passwordOperation.message }}
+            </p>
           </div>
-          <p v-if="passwordOperation.message" class="error-input">
-            {{ passwordOperation.message }}
-          </p>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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)"
-              />
-            </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>
-            <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>
+        <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)"
+            />
           </div>
-          <p v-if="emailOperation.message" class="error-input">{{ emailOperation.message }}</p>
+          <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)"
+            />
+            <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"}'
+          >
+            {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
+          </button>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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)"
-              />
-            </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>
-            <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>
+        <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)"
+            />
           </div>
-          <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
+          <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)"
+            />
+            <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"}'
+          >
+            {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
+          </button>
         </div>
       </div>
     </div>
-    <div class="personal-panel-container" id="personal-panel">
-      <div class="personal-panel-summary-bar-container">
-        <div class="personal-summary-header-container">
-          <label class="personal-summary-header-label" for="personal-summary">Personal</label>
+    <div class="panel-container" id="personal-panel">
+      <div>
+        <div class="panel-header-container">
+          <label for="personal-summary">Personal</label>
         </div>
-        <div class="personal-summary-content-container" id="personal-summary">
+        <div class="panel-content-container" id="personal-summary">
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-identity"
             aria-expanded="false"
@@ -296,26 +251,25 @@
               </span>
             </div>
           </button>
-
           <button
-            class="profile-item-container-button-1"
+            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">
-              <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
+            <div class="profile-item-container profile-photo-container">
               <img
-                class="personal-summary-user-portrait-img"
+                class="profile-photo"
                 alt="user portrait"
                 id="personal-photo-operation-image"
-                src="@/assets/images/default-user-portrait.png"
+                src="@/assets/profile.png"
               />
+              <label class="profile-item-label" for="personal-photo-operation-image">Portrait</label>
             </div>
           </button>
           <button
-            class="profile-item-container-button-4"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-personal-user-intro"
             aria-expanded="false"
@@ -329,7 +283,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-personal-earning-now"
             aria-expanded="false"
@@ -347,362 +301,309 @@
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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)"
-              />
-            </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"}'
-              />
-            </div>
+        <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)"
+            />
+          </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"}'
+            />
           </div>
         </div>
       </div>
 
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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()"
-          />
+        <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="@/assets/profile.png"
+              v-tooltip
+              title="Click to update"
+              @click="selectUserPhoto()"
+            />
+          </label>
           <input
             ref="uploadUserPhotoInput"
             type="file"
             :accept="identityOperation.photo.acceptableType"
-            style="display: none"
+            hidden
             @change="onUserPhotoChange($event)"
           />
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         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"
-            >
+        <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" />
+            <div class="btn-group-container">
+              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link" @click="personalOperation.self_intro.is_editing = true">Edit</button>
               <button
-                class="personal-self-intro-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"
               >
-                templates
+                Templates
+              </button>
+              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button>
+              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link">
+                Cancel
               </button>
             </div>
           </div>
-          <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>
-          </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"
+        class="collapse collapse-content-container"
         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
-              >
-              <br />
-              <label v-if="personalOperation.show_stripe_status" style="color: red">
-                * 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
-              >
-              <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"
-                />
-                <span class="input-group-text">{{
-                  userProfile.account.provider.expected_salary.currency
-                }}</span>
-              </div>
-            </div>
+        <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">
+            <label class="form-check-label" for="personal-earning-now-checkbox">
+              <span>I want to be a service provider and earn money</span>
+              <span v-if="personalOperation.show_stripe_status" style="color: red">* Stripe account onboarding is not completed.</span>
+            </label>
           </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()"
-            />
+          <div class="flex-1" />
+          <div class="collapse-item-input">
             <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)"
+              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>Have you linked your strip account?</span
-            ><button v-if="Is_Stripe_Payment()" @click="visitStripe()">Visit Stripe</button>
+            <span class="collapse-item-currency">{{
+              userProfile.account.provider.expected_salary.currency
+            }}</span>
           </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
-          >
+        </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" />
+            <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">Upload QR code to receive payment</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)"
+          />
+        </div>
+        <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
+          <span>Have you linked your strip account?</span><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
+        </div>
+        <div v-if="personalOperation.accepting_request" class="collapse-item-container">
+          <span>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"
-          >
-            <div class="achievement-bar-container">
-              <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-stay-on-operation"
-                  >On Freeleaps</label
-                >
-                <span class="profile-item-span" id="achievement-stay-on-operation">
+    <div class="panel-container" id="accordion-achievement-panel">
+      <div class="panel-header-container">
+        <label for="account-summary">Achievement</label>
+      </div>
+      <table class="panel-table-container">
+        <tbody>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">On Freeleaps</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.connections }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Connections</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.activeness.connections }}
+                </span>
               </div>
-              <div class="achievement-summary-item-container">
-                <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
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Messages</span>
+                <span class="panel-table-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
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Credit</span>
+                <span class="panel-table-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 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
-                >
-                <span class="achievement-summary-spending-span" id="achievement-spending-operation">
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Total spending</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-twelve-month-spending-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">12-month spending</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-thirty-day-spending-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">3-month spending</span>
+                <span class="panel-table-span">
                   {{ 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">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Deposit</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-spending-operation">
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Posted</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-twelve-month-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.accomplished }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Accomplished</span>
+                <span class="panel-table-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
-                >
-                <span class="profile-item-span" id="achievement-thirty-day-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.active }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Active</span>
+                <span class="panel-table-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
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Ongoing</span>
+                <span class="panel-table-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
-                >
-                <span class="profile-item-span" id="achievement-total-earning-content">
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Total earning</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-twelve-month-earning-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">12-month earning</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-thirty-day-earning-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Delivered</span>
+                <span class="panel-table-span">
                   {{ 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
-                >
-                <span class="profile-item-span" id="achievement-delivering-time">
-                  {{
-                    userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
-                  }}
-                  days
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Delivering time</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day }} days
                 </span>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <div
       class="offcanvas offcanvas-end offcanvas-container"
@@ -760,6 +661,7 @@
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { moneyCollectionTypeEnum } from '../../../types/index'
 
 import {
@@ -768,8 +670,10 @@ import {
   textAreaAujuster,
   passwordValidator
 } from '../../../utils/index'
+import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 
 export default {
+  components: { SvgIcon, FreeleapsEditor },
   name: 'UserProfile',
   props: {},
   mounted() {
@@ -863,8 +767,8 @@ export default {
         ready_to_receive_money: false,
         preferred_collector: moneyCollectionTypeEnum.WECHAT_QR_CODE,
         wechat_qr_code_img: {
-          data: 'src/assets/images/wechat_qr_code_upload.png',
-          filename: 'wechat_qr_code_upload.png',
+          data: '',
+          filename: '',
           acceptableType: '.png, .jpg',
           filesizeLimit: 1000000
         }
@@ -1318,6 +1222,218 @@ export default {
 <style lang="scss" scoped>
 .user-profile-container {
   @extend .container;
+  padding: 24px 12px;
+}
+
+.panel-container {
+  padding: 12px;
+  // overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0px 0px 24px 0px #D4D3E380;
+  background-color: white;
+  margin-bottom: 20px;
+
+  .panel-header-container {
+    font-size: 16px;
+    font-weight: bold;
+    color: #242424;
+    margin-bottom: 12px;
+    text-align: left;
+  }
+  .panel-content-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .panel-item-container {
+      width: calc(25% - 9px);
+      border: 1px dashed #1748F8;
+      background-color: white;
+      padding: 0 12px;
+      height: 46px;
+      border-radius: 3px;
+      align-items: center;
+      text-align: left;
+      box-shadow: none;
+      outline: none;
+
+      &:hover {
+        background-color: #F3F6FF;
+      }
+      // &.active {
+      //   background-color: #F3F6FF;
+      // }
+      &[aria-expanded=true] {
+        background-color: #F3F6FF;
+      }
+
+      .profile-item-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &.profile-photo-container {
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          .profile-photo {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            margin-right: 8px;
+          }
+        }
+
+        .profile-item-label {
+          margin-bottom: 3px;
+          font-size: 12px;
+          color: #666666;
+          line-height: 1;
+        }
+        .profile-item-span {font-size: 14px; font-weight: bold; color: #242424; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; line-height: 1}
+      }
+    }
+  }
+  .collapse-content-container {
+    margin: 12px -12px -12px -12px;
+    border-top: 1px solid #E7E8EB;
+
+    .collapse-item-container {
+      padding: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .user-portrait-img {
+        width: 150px;
+        height: 150px;
+      }
+
+      .collapse-item-editor {
+        width: 100%;
+        position: relative;
+
+        .btn-group-container{
+          position: absolute;
+          right: 32px;
+          top: 10px;
+        }
+      }
+    }
+
+    .collapse-item-input {
+        height: 37px;
+        width: 350px;
+        border: 1px solid #E1E1E1;
+        border-radius: 3px;
+        margin: 0 8px;
+        box-shadow: none;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        
+        &:focus-within {
+          border: 1px solid #1748F8;
+        }
+
+        input {
+          flex: 1;
+          height: 100%;
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }
+
+        .error-message {
+          color: #916AD4;
+          font-size: 16px;
+          position: absolute;
+          left: 0;
+          bottom: -26px;
+          margin: 0;
+        }
+
+        .enter-icon {
+          width: 13px;
+          height: 13px;
+          margin-left: 12px;
+          background-color: #E7E9ED;
+          border-radius: 3px;
+          padding: 2px;
+        }
+
+        .collapse-item-currency {
+          font-size: 14px;
+          font-weight: bold;
+          color: #0D1637;
+          margin-left: 12px;
+        }
+      }
+
+    .collapse-item-uploader {
+      width: 150px;
+      height: 150px;
+      border-radius: 8px;
+      border: 1px dashed $primary;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      &:hover {opacity: .78;}
+
+      .uploader-img-btn {
+        width: 50px;
+        height: 50px;
+        margin-bottom: 12px;
+      }
+      .upload-text-btn {
+        font-size: 14px;
+        color: $primary;
+        margin: 0 12px;
+      }
+      .uploader-img-show {
+        width: 150px;
+        height: 150px;
+        object-fit: contain;
+      }
+    }
+
+    .collapse-checkbox-container {
+      padding: 12px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #E7E8EB
+    }
+  }
+
+  .panel-table-container {
+    border: 0;
+	  border-collapse: collapse;
+    width: 100%;
+
+    .panel-table-content {
+      padding: 12px 0;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+
+      .panel-table-label {
+        font-size: 12px;
+        color: #666666;
+        line-height: 1;
+        margin-bottom: 3px;
+      }
+      .panel-table-span {
+        font-size: 14px;
+        font-weight: bold;
+        color: #242424;
+        line-height: 1;
+      }
+    }
+  }
 }
 
 .account-panel-container {
@@ -1903,22 +2019,22 @@ export default {
   @extend .w-40;
 }
 
-.profile-item-container {
-  @extend .flex-colum-container;
-  width: fit-content;
-  @extend .float-start;
-}
+// .profile-item-container {
+//   @extend .flex-colum-container;
+//   width: fit-content;
+//   @extend .float-start;
+// }
 
-.profile-item-label {
-  @extend .label-text-light;
-  @extend .w-100;
-}
+// .profile-item-label {
+//   @extend .label-text-light;
+//   @extend .w-100;
+// }
 
-.profile-item-span {
-  @extend .text-start;
-  @extend .px-1;
-  @extend .w-100;
-}
+// .profile-item-span {
+//   @extend .text-start;
+//   @extend .px-1;
+//   @extend .w-100;
+// }
 
 .operation-note-text {
   @extend .note-text-light;