diff --git a/frontend/package.json b/frontend/package.json
index 92bb096..dced95c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,11 +10,15 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@apollo/client": "^3.10.8",
     "@popperjs/core": "^2.11.8",
+    "@vue/apollo-composable": "^4.0.2",
     "axios": "^1.4.0",
     "bootstrap": "5.3.3",
     "buffer": "^6.0.3",
     "echarts": "^5.5.1",
+    "graphql": "^16.9.0",
+    "graphql-tag": "^2.12.6",
     "pdfjs-dist": "^4.3.136",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 7d5999d..02f8e3b 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -8,7 +8,7 @@
       </div>
       <div class="navigation-container" role="navigation">
         <button class="navigation-item" @click="gotoWorkspace"
-          :class="{ 'active': activePath == 'Workspace', 'badge': unreadWorkspace }">
+          :class="{ active: activePath == 'Workspace', badge: unreadWorkspace }">
           <svg-icon icon="workspace" class-name="icon" />
           {{ $t('My Work') }}
           <div v-if="unreadWorkspace" class="navigation-item-tip">
@@ -16,7 +16,7 @@
           </div>
         </button>
         <button class="navigation-item" @click="gotoRequests"
-          :class="{ 'active': activePath == 'Requests', 'badge': unreadRequest }">
+          :class="{ active: activePath == 'Requests', badge: unreadRequest }">
           <svg-icon icon="requests" class-name="icon" />
           {{ $t('Jobs') }}
           <div v-if="unreadRequest" class="navigation-item-tip">
@@ -32,14 +32,8 @@
           {{ $t('Post a Job') }}
         </button>
         <div class="form-check form-switch header-switch-container" @click="gotoProfile">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            role="switch"
-            :checked="userProfile?.account?.provider?.accepting_request"
-            id="personal-earning-now-checkbox"
-            disabled
-          />
+          <input class="form-check-input" type="checkbox" role="switch"
+            :checked="userProfile?.account?.provider?.accepting_request" id="personal-earning-now-checkbox" disabled />
           <label class="form-check-label" for="personal-earning-now-checkbox">
             <span>{{ $t('Providing service') }}</span>
           </label>
@@ -50,16 +44,10 @@
         <laguage-switch class="laguage-switch" />
       </div>
       <div class="profile-container">
-        <img
-          alt="freeleaps logo"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-          id="accountButton"
-          :src="userProfile?.account?.basic?.photo?.base64
+        <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton" :src="userProfile?.account?.basic?.photo?.base64
           ? userProfile?.account?.basic?.photo?.base64
           : profileUrl
-          "
-        />
+          " />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>
             <button class="account-menu-button" @click="gotoProfile">{{ $t('Profile') }}</button>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index caefc99..71c6a11 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -210,5 +210,5 @@ export default {
   'line(s)': 'line(s)',
   'Issues management': 'Issues management',
   'Payment progress': 'Payment progress',
-  'Goal': 'Goal',
+  Goal: 'Goal'
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 540b7d4..1014a11 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -193,5 +193,5 @@ export default {
   'line(s)': '每周产出代码',
   'Issues management': '问题管理',
   'Payment progress': '付款进度',
-  'Goal': '项目目标',
+  Goal: '项目目标'
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f7f4396..a79783c 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,7 @@
-import { createApp } from 'vue'
+import { createApp, provide, h } from 'vue'
 import App from './App.vue'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import { ApolloClient, InMemoryCache } from '@apollo/client/core'
 import 'bootstrap'
 import { store, router } from './plugins/index'
 import { navigatorMixin, userIdentityMixin, errorHanlderMixin, userAuthMixin } from './mixins/index'
@@ -29,7 +31,19 @@ import { setupI18n } from '@/lang'
 /* add icons to the library */
 // library.add(fasUser)
 
-const app = createApp(App)
+const cache = new InMemoryCache()
+
+const apolloClient = new ApolloClient({
+  cache,
+  uri: 'http://localhost:8001/graphql',
+})
+
+const app = createApp({
+  setup() {
+    provide(DefaultApolloClient, apolloClient)
+  },
+  render: () => h(App)
+})
 app.use(store)
 app.use(router)
 app.use(setupI18n)
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 2e31380..ba8cce2 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -8,13 +8,7 @@
       <div class="form-group">
         <div class="input-group-container">
           <div class="form-floating">
-            <input
-              class="input-email"
-              id="inputEmail"
-              type="text"
-              placeholder="name@example.com"
-              v-model="email"
-            />
+            <input class="input-email" id="inputEmail" type="text" placeholder="name@example.com" v-model="email" />
             <label for="inputEmail">{{ $t('Email address') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
@@ -31,10 +25,34 @@
 import { UserAuthApi, applicantValidator } from '@/utils/index'
 import { signinActionEnum } from '@/types/index'
 
+import { useQuery } from '@vue/apollo-composable'
+
+import gql from 'graphql-tag'
+// workable result
+// const GET_USERS = gql` 
+//   query Users {
+//     users {
+//         firstName
+//         lastName
+//     }
+//   }
+// `;  // 669f27fef35a6a94c5239152
+
+const GET_USERS = gql` 
+  query Users {
+    user(id: "669f27fef35a6a94c5239152") {
+        firstName
+        lastName
+    }
+  }
+`;
+
 export default {
   name: 'FrontDoor',
   props: {},
   data() {
+    const res1 = useQuery(GET_USERS)
+    console.log('this is res', res1)
     return {
       email: null,
       message: null
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 091527e..41cf6ee 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -6,7 +6,10 @@
       :key="index"
       @click="view_link(directory)"
     >
-      <div class="directory_cover_image" :style="{'background-image': `url(${directory.cover_picture})`}" />
+      <div
+        class="directory_cover_image"
+        :style="{ 'background-image': `url(${directory.cover_picture})` }"
+      />
       <p class="directory-title">{{ directory.title_text }}</p>
       <p class="directory-subtitle">{{ directory.summary_text }}</p>
       <button class="btn btn-link">{{ $t('Read More') }}</button>
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index 6dbee41..a73b0ec 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -7,7 +7,7 @@
       @click="view_blog(blog)"
     >
       <h2>{{ blog.blog_name }}</h2>
-      <div class="blog_cover_image" :style="{'background-image': `url(${blog.cover_picture})`}" />
+      <div class="blog_cover_image" :style="{ 'background-image': `url(${blog.cover_picture})` }" />
       <p v-text="retrieve_summary(blog)"></p>
     </div>
   </div>
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index beffb99..142b1cd 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -7,8 +7,13 @@
           <span v-if="accountNeedAttention">!</span>
         </div>
         <div class="panel-content-container" id="account-summary">
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
-            aria-expanded="false" aria-controls="collapse-user-id">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-id"
+            aria-expanded="false"
+            aria-controls="collapse-user-id"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-id">{{
                 $t('User ID')
@@ -18,8 +23,13 @@
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-password"
-            aria-expanded="false" aria-controls="collapse-password">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-password"
+            aria-expanded="false"
+            aria-controls="collapse-password"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-password">{{
                 $t('Password')
@@ -27,8 +37,13 @@
               <span class="profile-item-span" id="account-summary-password"> ******** </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
-            aria-expanded="false" aria-controls="collapse-user-email">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-email"
+            aria-expanded="false"
+            aria-controls="collapse-user-email"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-email">{{
                 $t('Email')
@@ -38,8 +53,13 @@
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
-            aria-expanded="false" aria-controls="collapse-user-mobile">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-mobile"
+            aria-expanded="false"
+            aria-controls="collapse-user-mobile"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-mobile">{{
                 $t('Mobile')
@@ -51,29 +71,61 @@
           </button>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-id" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-id"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="userProfile.account.basic.FLID.identity" readonly="true" v-tooltip
-              title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
+            <input
+              type="text"
+              v-model="userProfile.account.basic.FLID.identity"
+              readonly="true"
+              v-tooltip
+              title="Generated automatically"
+              delay='{"show":"500", "hide":"100"}'
+            />
           </div>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-password" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-password"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="password" v-model="passwordOperation.password" :placeholder="passwordOperation.placeholder"
-              readonly="true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword($event)" @blur="stopEdittingPassword($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="password"
+              v-model="passwordOperation.password"
+              :placeholder="passwordOperation.placeholder"
+              readonly="true"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword($event)"
+              @blur="stopEdittingPassword($event)"
+              @keyup.enter="blurInput($event)"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
           </div>
           <div class="collapse-item-input">
-            <input type="password" v-model="passwordOperation.password2" :placeholder="passwordOperation.placeholder2"
-              readonly=" true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword2($event)" @blur="stopEdittingPassword2($event)" @keyup.enter="blurInput($event)"
-              ref="password2Input" />
+            <input
+              type="password"
+              v-model="passwordOperation.password2"
+              :placeholder="passwordOperation.placeholder2"
+              readonly=" true"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword2($event)"
+              @blur="stopEdittingPassword2($event)"
+              @keyup.enter="blurInput($event)"
+              ref="password2Input"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="passwordOperation.message" class="error-message">
               {{ passwordOperation.message }}
@@ -81,50 +133,104 @@
           </div>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-email" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-email"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="emailOperation.email.address" readonly="true" v-tooltip title="Click to update"
-              delay='{"show":"500", "hide":"100"}' @click="edittingEmail($event)" @blur="stopEdittingEmail($event)"
-              @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="emailOperation.email.address"
+              readonly="true"
+              v-tooltip
+              title="Click to update"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingEmail($event)"
+              @blur="stopEdittingEmail($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
           <div v-if="emailOperation.verifyingMode" class="collapse-item-input">
-            <input type="text" v-model="emailOperation.verificationCode" placeholder="verification code" v-tooltip
-              title="Put the verification code received in the email" delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingEmailVerificationCode($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="emailOperation.verificationCode"
+              placeholder="verification code"
+              v-tooltip
+              title="Put the verification code received in the email"
+              delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingEmailVerificationCode($event)"
+              @keyup.enter="blurInput($event)"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p>
           </div>
 
-          <button v-if="!emailOperation.verifyingMode" class="btn btn-link" :disabled="emailOperation.email.verified"
-            @click="startVerifyingEmail()" v-tooltip :title="emailOperation.email.verified
-              ? 'The email has been verified'
-              : 'The email needs to be verify'
-              " delay='{"show":"500", "hide":"100"}'>
+          <button
+            v-if="!emailOperation.verifyingMode"
+            class="btn btn-link"
+            :disabled="emailOperation.email.verified"
+            @click="startVerifyingEmail()"
+            v-tooltip
+            :title="
+              emailOperation.email.verified
+                ? 'The email has been verified'
+                : 'The email needs to be verify'
+            "
+            delay='{"show":"500", "hide":"100"}'
+          >
             {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-mobile" aria-labelledby="account-summary"
-        data-bs-parent="#account-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-mobile"
+        aria-labelledby="account-summary"
+        data-bs-parent="#account-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="mobileOperation.mobile.number" readonly="true" v-tooltip title="Click to update"
-              @click="edittingMobile($event)" @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="mobileOperation.mobile.number"
+              readonly="true"
+              v-tooltip
+              title="Click to update"
+              @click="edittingMobile($event)"
+              @blur="stopEdittingMobile($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
           <div v-if="mobileOperation.verifyingMode" class="collapse-item-input">
-            <input type="text" v-model="mobileOperation.verificationCode" placeholder="verification code" v-tooltip
-              title="Put the verification code received in the mobile number" delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingMobileVerificationCode($event)" @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="mobileOperation.verificationCode"
+              placeholder="verification code"
+              v-tooltip
+              title="Put the verification code received in the mobile number"
+              delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingMobileVerificationCode($event)"
+              @keyup.enter="blurInput($event)"
+            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
           </div>
-          <button v-if="!mobileOperation.verifyingMode" class="btn btn-link" :disabled="mobileOperation.mobile.verified"
-            @click="startVerifyingMobile()" v-tooltip :title="mobileOperation.mobile.verified
-              ? 'The mobile number has been verified'
-              : 'The mobile number needs to be verify'
-              " delay='{"show":"500", "hide":"100"}'>
+          <button
+            v-if="!mobileOperation.verifyingMode"
+            class="btn btn-link"
+            :disabled="mobileOperation.mobile.verified"
+            @click="startVerifyingMobile()"
+            v-tooltip
+            :title="
+              mobileOperation.mobile.verified
+                ? 'The mobile number has been verified'
+                : 'The mobile number needs to be verify'
+            "
+            delay='{"show":"500", "hide":"100"}'
+          >
             {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
@@ -136,8 +242,13 @@
           <label for="personal-summary">{{ $t('Personal') }}</label>
         </div>
         <div class="panel-content-container" id="personal-summary">
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
-            aria-expanded="false" aria-controls="collapse-user-identity">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-user-identity"
+            aria-expanded="false"
+            aria-controls="collapse-user-identity"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-fullname">{{
                 $t('Full name')
@@ -148,20 +259,36 @@
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-photo"
-            aria-expanded="false" aria-controls="collapse-personal-user-photo">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-user-photo"
+            aria-expanded="false"
+            aria-controls="collapse-personal-user-photo"
+          >
             <div class="profile-item-container profile-photo-container">
-              <img class="profile-photo" alt="user portrait" id="personal-photo-operation-image" :src="userProfile.account.basic.photo.base64
-                ? userProfile.account.basic.photo.base64
-                : profileUrl
-                " />
+              <img
+                class="profile-photo"
+                alt="user portrait"
+                id="personal-photo-operation-image"
+                :src="
+                  userProfile.account.basic.photo.base64
+                    ? userProfile.account.basic.photo.base64
+                    : profileUrl
+                "
+              />
               <label class="profile-item-label" for="personal-photo-operation-image">{{
                 $t('Portrait')
               }}</label>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-intro"
-            aria-expanded="false" aria-controls="collapse-personal-user-intro">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-user-intro"
+            aria-expanded="false"
+            aria-controls="collapse-personal-user-intro"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-self-intro">{{
                 $t('Self-intro')
@@ -171,8 +298,13 @@
               </span>
             </div>
           </button>
-          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-earning-now"
-            aria-expanded="false" aria-controls="collapse-personal-earning-now">
+          <button
+            class="panel-item-container"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-earning-now"
+            aria-expanded="false"
+            aria-controls="collapse-personal-earning-now"
+          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-earning-now">{{
                 $t('Earning now')
@@ -184,102 +316,198 @@
           </button>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-user-identity" aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-user-identity"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input type="text" v-model="identityOperation.first_name" placeholder="First Name" v-tooltip
-              title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
-              @click="edittingFirstname($event)" @blur="stopEdittingFirstname($event)"
-              @keyup.enter="blurInput($event)" />
+            <input
+              type="text"
+              v-model="identityOperation.first_name"
+              placeholder="First Name"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              readonly="true"
+              @click="edittingFirstname($event)"
+              @blur="stopEdittingFirstname($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
           <div class="collapse-item-input">
-            <input type="text" v-model="identityOperation.last_name" placeholder="Last Name" readonly="true"
-              @click="edittingLastname($event)" @blur="stopEdittingLastname($event)" @keyup.enter="blurInput($event)"
-              v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}' />
+            <input
+              type="text"
+              v-model="identityOperation.last_name"
+              placeholder="Last Name"
+              readonly="true"
+              @click="edittingLastname($event)"
+              @blur="stopEdittingLastname($event)"
+              @keyup.enter="blurInput($event)"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+            />
           </div>
         </div>
       </div>
 
-      <div class="collapse collapse-content-container" id="collapse-personal-user-photo"
-        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-personal-user-photo"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-item-container">
           <label class="btn btn-link" for="personal-photo-operation-image">
-            <img class="user-portrait-img" id="personal-photo-operation-image" alt="user portrait" :src="userProfile.account.basic.photo.base64
-              ? userProfile.account.basic.photo.base64
-              : profileUrl
-              " v-tooltip title="Click to update" @click="selectUserPhoto()" />
+            <img
+              class="user-portrait-img"
+              id="personal-photo-operation-image"
+              alt="user portrait"
+              :src="
+                userProfile.account.basic.photo.base64
+                  ? userProfile.account.basic.photo.base64
+                  : profileUrl
+              "
+              v-tooltip
+              title="Click to update"
+              @click="selectUserPhoto()"
+            />
           </label>
-          <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType" hidden
-            @change="onUserPhotoChange($event)" />
+          <input
+            ref="uploadUserPhotoInput"
+            type="file"
+            :accept="identityOperation.photo.acceptableType"
+            hidden
+            @change="onUserPhotoChange($event)"
+          />
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-personal-user-intro"
-        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-personal-user-intro"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-item-container">
           <div class="collapse-item-editor">
-            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html"
-              :disabled="!personalOperation.self_intro.is_editing" />
+            <freeleaps-editor
+              v-model:content="personalOperation.self_intro.content_html"
+              :disabled="!personalOperation.self_intro.is_editing"
+            />
             <div class="btn-group-container">
-              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link"
-                @click="personalOperation.self_intro.is_editing = true">
+              <button
+                v-if="!personalOperation.self_intro.is_editing"
+                class="btn btn-link"
+                @click="personalOperation.self_intro.is_editing = true"
+              >
                 {{ $t('Edit') }}
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" class="btn btn-link" type="button"
-                data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                class="btn btn-link"
+                type="button"
+                data-bs-toggle="offcanvas"
+                data-bs-target="#offcanvas-template"
+                aria-controls="offcanvas-template"
+              >
                 {{ $t('Templates') }}
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="updateSelfIntro()"
+                class="btn btn-link"
+              >
                 {{ $t('Update') }}
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)"
-                class="btn btn-link">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="stopEdittingSelfintro($event)"
+                class="btn btn-link"
+              >
                 {{ $t('Cancel') }}
               </button>
             </div>
           </div>
         </div>
       </div>
-      <div class="collapse collapse-content-container" id="collapse-personal-earning-now"
-        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
+      <div
+        class="collapse collapse-content-container"
+        id="collapse-personal-earning-now"
+        aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel"
+      >
         <div class="collapse-checkbox-container">
           <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox"
-              v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)"
-              :disabled="!paymentOperation.ready_to_receive_money" />
+            <input
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+              id="personal-earning-now-checkbox"
+              v-model="personalOperation.accepting_request"
+              @click="updateAcceptingRequest($event)"
+              :disabled="!paymentOperation.ready_to_receive_money"
+            />
             <label class="form-check-label" for="personal-earning-now-checkbox">
               <span>{{ $t('I want to be a service provider and earn money') }}</span>
-              <span v-if="personalOperation.show_stripe_status" style="color: red">*&nbsp;{{ $t('Stripe account' +
-                'onboarding is not completed.') }}</span>
+              <span v-if="personalOperation.show_stripe_status" style="color: red"
+                >*&nbsp;{{ $t('Stripe account' + 'onboarding is not completed.') }}</span
+              >
             </label>
           </div>
           <div class="flex-1" />
           <div class="collapse-item-input">
-            <input id="personal-expected-salary" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              readonly="true" @click="edittingExpectedSalary($event)" @blur="stopedittingExpectedSalary($event)"
-              @keyup.enter="blurInput($event)" v-model="personalOperation.expected_salary.hourly" />
+            <input
+              id="personal-expected-salary"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              readonly="true"
+              @click="edittingExpectedSalary($event)"
+              @blur="stopedittingExpectedSalary($event)"
+              @keyup.enter="blurInput($event)"
+              v-model="personalOperation.expected_salary.hourly"
+            />
             <span class="collapse-item-currency">{{
               userProfile.account.provider.expected_salary.currency
             }}</span>
           </div>
         </div>
         <div class="collapse-item-container">
-          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
-            <img v-if="paymentOperation.wechat_qr_code_img.data" class="uploader-img-show"
-              :src="paymentOperation.wechat_qr_code_img.data" />
-            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn"
-              src="@/assets/images/qr-code.png" />
+          <label
+            v-if="Is_Wechat_QR_Code_Payment()"
+            class="collapse-item-uploader"
+            for="qr-uploader"
+          >
+            <img
+              v-if="paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-show"
+              :src="paymentOperation.wechat_qr_code_img.data"
+            />
+            <img
+              v-if="!paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-btn"
+              src="@/assets/images/qr-code.png"
+            />
             <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">{{
               $t('Upload QR code to receive payment')
             }}</span>
           </label>
-          <input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file" id="qr-uploader"
-            :accept="paymentOperation.wechat_qr_code_img.acceptableType" hidden
-            @change="onUploadWechatQRCodePhoto($event)" />
+          <input
+            v-if="Is_Wechat_QR_Code_Payment()"
+            ref="uploadWechatQRCodePhotoInput"
+            type="file"
+            id="qr-uploader"
+            :accept="paymentOperation.wechat_qr_code_img.acceptableType"
+            hidden
+            @change="onUploadWechatQRCodePhoto($event)"
+          />
         </div>
         <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
-          <span>{{ $t('Have you linked your strip account?') }}</span><button class="btn btn-link"
-            @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
+          <span>{{ $t('Have you linked your strip account?') }}</span
+          ><button class="btn btn-link" @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
         </div>
         <div v-if="personalOperation.accepting_request" class="collapse-item-container">
           <span>{{
@@ -444,26 +672,49 @@
         </tbody>
       </table>
     </div>
-    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
-      aria-labelledby="offcanvas-template">
+    <div
+      class="offcanvas offcanvas-end offcanvas-container"
+      tabindex="-1"
+      id="offcanvas-template"
+      aria-labelledby="offcanvas-template"
+    >
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-template">
           {{ $t('Apply self-intro template') }}
         </h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button
+          type="button"
+          class="btn-close"
+          data-bs-dismiss="offcanvas"
+          aria-label="Close"
+        ></button>
       </div>
       <div class="offcanvas-body">
         <div class="accordion" id="template-item-container">
-          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
-            class="accordion-item">
+          <div
+            v-for="(template, index) in availableTemplates"
+            :key="index"
+            :id="'template' + index"
+            class="accordion-item"
+          >
             <h2 class="accordion-header" :id="'heading' + index">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'collapse' + index"
+                aria-expanded="false"
+                :aria-controls="'collapse' + index"
+              >
                 {{ template.title }}
               </button>
             </h2>
-            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container">
+            <div
+              :id="'collapse' + index"
+              class="accordion-collapse collapse"
+              :aria-labelledby="'heading' + index"
+              data-bs-parent="#template-item-container"
+            >
               <div class="accordion-body">
                 <button class="select-template-button" @click="selectTemplate(template)">
                   {{ $t('Apply') }}
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 76bd9d8..4b79729 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -85,7 +85,7 @@ export default {
   mounted() {
     this.$store.dispatch('basic/updateConversationsPage', {
       token: this.mnx_getUserAuthToken(),
-      cb: error => {
+      cb: (error) => {
         this.mnx_backendErrorHandler(error)
       }
     })
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index 931ef94..91963e0 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -53,7 +53,8 @@
                     $t('Responding time')
                   }}</label>
                   <span class="provider-responding-time-span" id="provider-responding-time">
-                    {{ provider.provider_achievement.responding_time_in_minutes }} {{$t('min(s)')}}
+                    {{ provider.provider_achievement.responding_time_in_minutes }}
+                    {{ $t('min(s)') }}
                   </span>
                 </div>
                 <div class="provider-credit-score-container">
@@ -129,7 +130,8 @@
                         $t('Weekly produced code')
                       }}</label>
                       <span class="dd-project-span" id="delivery-weekly-produced-code">
-                        {{ provider.provider_deliveries.lines_of_code_per_week }} {{$t('line(s)')}}
+                        {{ provider.provider_deliveries.lines_of_code_per_week }}
+                        {{ $t('line(s)') }}
                       </span>
                     </div>
                   </div>
@@ -198,7 +200,8 @@
                         $t('Issue fixing time')
                       }}</label>
                       <span class="dd-project-span" id="quality-issue-fixing-time">
-                        {{ provider.provider_work_quality.issue_fixing_time_minutes }} {{$t('min(s)')}}
+                        {{ provider.provider_work_quality.issue_fixing_time_minutes }}
+                        {{ $t('min(s)') }}
                       </span>
                     </div>
                   </div>
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index e7df503..45728cd 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -419,7 +419,6 @@ export default {
       RequestHubApi.fetchMyProposals()
         .then((response) => {
           this.existingProposals = response.data || []
-          
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -510,7 +509,7 @@ export default {
   font-size: 18px;
   font-weight: bold;
   color: #0d1637;
-  white-space: nowrap
+  white-space: nowrap;
 }
 
 .load-templates-button {
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 15f3aae..5ba6fff 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,13 +2,22 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
-        :id="project.id">
+      <div
+        class="accordion accordion-list"
+        v-for="(project, project_index) in projects"
+        :key="project_index"
+        :id="project.id"
+      >
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
-              :aria-controls="'collapse-' + project_index">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index"
+              aria-expanded="false"
+              :aria-controls="'collapse-' + project_index"
+            >
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -35,7 +44,11 @@
               </div>
             </button>
           </h2>
-          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
+          <div
+            :id="'collapse-' + project_index"
+            class="accordion-collapse collapse"
+            :data-bs-parent="'#' + project.id"
+          >
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -43,17 +56,30 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  contenteditable="false"></div>
+                <div
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
               <div class="project-request-proposals-container">
-                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
-                  :id="proposal.id">
+                <div
+                  class="accordion"
+                  v-for="(proposal, proposal_index) in project.proposals"
+                  :key="proposal_index"
+                  :id="proposal.id"
+                >
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
-                        :aria-controls="'collapse-request-proposal' + proposal_index">
+                      <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
+                        aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index"
+                      >
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">{{ $t('Quote') }}</label>
@@ -86,16 +112,23 @@
                         </div>
                       </button>
                     </h2>
-                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
-                      :data-bs-parent="'#' + proposal.id">
+                    <div
+                      :id="'collapse-request-proposal' + proposal_index"
+                      class="accordion-collapse collapse"
+                      :data-bs-parent="'#' + proposal.id"
+                    >
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button class="request-proposal-action-reject"
-                            @click="rejectProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-reject"
+                            @click="rejectProposal(project, proposal_index)"
+                          >
                             {{ $t('reject') }}
                           </button>
-                          <button class="request-proposal-action-accept"
-                            @click="acceptProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)"
+                          >
                             {{ $t('accept') }}
                           </button>
                         </div>
@@ -103,9 +136,12 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div class="request-proposal-payment-plan-stage-container"
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
-                            :id="'payment-stage-' + stage_index">
+                          <div
+                            class="request-proposal-payment-plan-stage-container"
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
+                            :key="stage_index"
+                            :id="'payment-stage-' + stage_index"
+                          >
                             <div class="project-request-proposal-stage-payment-container">
                               <label class="project-item-label">{{ $t('Payment') }}</label>
                               <p class="project-item-text">
@@ -140,9 +176,12 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div class="request-proposal-payment-plan-stage-container"
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
-                  :id="'payment-stage-' + stage_index">
+                <div
+                  class="request-proposal-payment-plan-stage-container"
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
+                  :key="stage_index"
+                  :id="'payment-stage-' + stage_index"
+                >
                   <div class="project-request-proposal-stage-payment-container">
                     <label class="project-item-label">{{ $t('Payment') }}</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -160,24 +199,40 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  contenteditable="false"></div>
+                <div
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
             </div>
             <div class="accordion-body inline-accordion-body" v-if="isOngoingProject(project)">
               <div class="project-invite-collaborator-containter">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
-                  aria-controls="collapse-project-invite-collaborator">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapse-project-invite-collaborator"
+                  aria-expanded="false"
+                  aria-controls="collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator">+ {{ $t('Invite') }}</div>
                 </button>
-                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
-                  data-bs-parent="#collapse-project-invite-collaborator">
+                <div
+                  id="collapse-project-invite-collaborator"
+                  class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator-form-container">
-                    <input type="text" v-model="newInviteCollaborator[project_index]"
-                      :placeholder="$t('Input E-mail to invite other')" @keydown.enter="
+                    <input
+                      type="text"
+                      v-model="newInviteCollaborator[project_index]"
+                      :placeholder="$t('Input E-mail to invite other')"
+                      @keydown.enter="
                         inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                        " />
+                      "
+                    />
                     <svg-icon icon="msg-enter" class-name="project-invite-enter" />
                   </div>
                 </div>
@@ -185,9 +240,14 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
-                      aria-controls="collapse-project-milestone">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-milestone"
+                    >
                       <div class="project-milestone-bar-container dashed-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">{{ $t('Progress') }}</label>
@@ -223,30 +283,34 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-milestone">
+                  <div
+                    id="collapse-project-milestone"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone"
+                  >
                     <table class="project-milestones-table">
-                      <tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
-                        :id="'project-milestone-' + milestone.index">
+                      <tbody
+                        v-for="milestone in project.project.progress.milestones"
+                        :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index"
+                      >
                         <tr>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Milestone')
-                                }}</span>
+                              }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.index
-                                }}</span>
+                              }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
-                              <span class="project-milestones-table-label">{{
-                                $t('Goal')
-                                }}</span>
+                              <span class="project-milestones-table-label">{{ $t('Goal') }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.description
-                                }}</span>
+                              }}</span>
                             </div>
                           </td>
                           <td>
@@ -254,14 +318,14 @@
                               <span class="project-milestones-table-label">{{ $t('Status') }}</span>
                               <span class="project-milestones-table-span">{{
                                 fromIntToMilestoneStatus(milestone.status)
-                                }}</span>
+                              }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Payment')
-                                }}</span>
+                              }}</span>
                               <span class="project-milestones-table-span">
                                 {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
                                 {{ project.project.progress.payment_currency }}
@@ -273,15 +337,20 @@
                               <span class="project-milestones-table-label">{{ $t('Update') }}</span>
                               <span class="project-milestones-table-span">{{
                                 getDateFromFulltimeString(milestone.update_time)
-                                }}</span>
+                              }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button class="btn btn-link" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
-                                " :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                                @click="handleMilestoneAction(project.project, milestone)">
+                              <button
+                                class="btn btn-link"
+                                :disabled="
+                                  isMilestoneActionButtonDisabled(project.project, milestone)
+                                "
+                                :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
+                                @click="handleMilestoneAction(project.project, milestone)"
+                              >
                                 {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                               </button>
                               <!-- <span class="project-milestones-table-span">{{ getDateFromFulltimeString(milestone.update_time) }}</span> -->
@@ -292,8 +361,10 @@
                           <td colspan="6">
                             <div class="project-milestones-qrcode-content">
                               <img :src="this.qrCode.imageUrl" alt="freeleaps" />
-                              <button class="project-milestones-qrcode-button"
-                                @click="handlePaymentAction(project.project, milestone)">
+                              <button
+                                class="project-milestones-qrcode-button"
+                                @click="handlePaymentAction(project.project, milestone)"
+                              >
                                 {{ $t('Mark As Paid') }}
                               </button>
                             </div>
@@ -305,9 +376,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-code" aria-expanded="false"
-                      aria-controls="collapse-project-code">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-code"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-code"
+                    >
                       <div class="project-code-bar-container dashed-container">
                         <div class="project-code-git-status">
                           <label class="project-item-label">{{ $t('Code Depot') }}</label>
@@ -330,13 +406,22 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-code" class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-code">
+                  <div
+                    id="collapse-project-code"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-code"
+                  >
                     <div class="project-code-details-container">
                       <div class="project-code-git-url-container">
-                        <button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
-                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
-                          delay='{"show":"500", "hide":"100"}'>
+                        <button
+                          v-if="project.project.code?.git_url"
+                          class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)"
+                          v-tooltip
+                          title="Copied"
+                          trigger="click"
+                          delay='{"show":"500", "hide":"100"}'
+                        >
                           {{ $t('copy git url') }}
                         </button>
                       </div>
@@ -352,9 +437,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-issue" aria-expanded="false"
-                      aria-controls="collapse-project-issue">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue"
+                    >
                       <div class="project-issue-bar-container dashed-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">{{ $t('Open issues') }}</label>
@@ -383,11 +473,8 @@
                     data-bs-parent="#collapse-project-issue"
                   >
                     <div class="project-code-git-url-container">
-                      <button
-                        class="project-code-copy-git-url"
-                        @click="gotoIssueManage(project)"
-                      >
-                        {{$t('Issues management')}}
+                      <button class="project-code-copy-git-url" @click="gotoIssueManage(project)">
+                        {{ $t('Issues management') }}
                       </button>
                     </div>
                     <div class="chart-container">
diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index c3e6cca..c867dcd 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -1,50 +1,50 @@
 <template>
-    <div class="workspace-container">
+  <div class="workspace-container">
     <div class="workspace-body">
       <div class="accordion" id="workspace-project-accordion">
         <div v-if="project.id" class="accordion-item">
-            <h2 class="accordion-header">
+          <h2 class="accordion-header">
             <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-project-issue"
-                aria-expanded="false"
-                aria-controls="collapse-project-issue"
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapse-project-issue"
+              aria-expanded="false"
+              aria-controls="collapse-project-issue"
             >
-                <div class="project-issue-bar-container dashed-container">
+              <div class="project-issue-bar-container dashed-container">
                 <div class="project-issue-open-issues">
-                    <label class="project-item-label">{{ $t('Summary') }}</label>
-                    <p class="project-item-text">{{ project.title }}</p>
+                  <label class="project-item-label">{{ $t('Summary') }}</label>
+                  <p class="project-item-text">{{ project.title }}</p>
                 </div>
                 <div class="project-issue-open-issues">
-                    <label class="project-item-label">{{ $t('Open issues') }}</label>
-                    <p class="project-item-text">
+                  <label class="project-item-label">{{ $t('Open issues') }}</label>
+                  <p class="project-item-text">
                     {{ project.project.issue.number_of_open_issues }}
-                    </p>
+                  </p>
                 </div>
                 <div class="project-issue-resolved-issues">
-                    <label class="project-item-label">{{ $t('Resolved issues') }}</label>
-                    <p class="project-item-text">
+                  <label class="project-item-label">{{ $t('Resolved issues') }}</label>
+                  <p class="project-item-text">
                     {{ project.project.issue.number_of_resolved_issues }}
-                    </p>
+                  </p>
                 </div>
                 <div class="project-issue-closed-issues">
-                    <label class="project-item-label">{{ $t('Closed issues') }}</label>
-                    <p class="project-item-text">
+                  <label class="project-item-label">{{ $t('Closed issues') }}</label>
+                  <p class="project-item-text">
                     {{ project.project.issue.number_of_closed_issues }}
-                    </p>
-                </div>
+                  </p>
                 </div>
+              </div>
             </button>
-            </h2>
-            <div
+          </h2>
+          <div
             id="collapse-project-issue"
             class="accordion-collapse collapse"
             data-bs-parent="#collapse-project-issue"
-            >
+          >
             <div class="project-invite-collaborator-containter">
-                <button
+              <button
                 class="accordion-button collapsed"
                 type="button"
                 ref="issueAddBtn"
@@ -52,212 +52,208 @@
                 data-bs-target="#collapse-project-new-issue"
                 aria-expanded="false"
                 aria-controls="collapse-project-issue"
-                >
+              >
                 <div class="project-invite-collaborator">+ {{ $t('Add Issue') }}</div>
-                </button>
-                <div
+              </button>
+              <div
                 id="collapse-project-new-issue"
                 class="accordion-collapse collapse"
                 data-bs-parent="#collapse-project-new-issue"
-                >
+              >
                 <div class="project-issue-description-container">
-                    <div class="project-issue-description">
-                    <label class="project-item-label">{{
-                        $t('New issue description')
-                    }}</label>
+                  <div class="project-issue-description">
+                    <label class="project-item-label">{{ $t('New issue description') }}</label>
                     <button
-                        class="project-issue-description-btn"
-                        @click="
+                      class="project-issue-description-btn"
+                      @click="
                         postNewIssue(
-                            project.request.product_id,
-                            project.project_id,
-                            newIssueDescriptions
+                          project.request.product_id,
+                          project.project_id,
+                          newIssueDescriptions
                         )
-                        "
+                      "
                     >
-                        {{ $t('Submit') }}
+                      {{ $t('Submit') }}
                     </button>
-                    </div>
-                    <textarea ref="issueBtn" type="text" v-model="newIssueDescriptions" />
-                </div>
+                  </div>
+                  <textarea ref="issueBtn" type="text" v-model="newIssueDescriptions" />
                 </div>
+              </div>
             </div>
             <div>
-                <div
+              <div
                 class="project-issue-container"
                 v-for="(issue, issue_index) in project.project.issue.open_issues"
                 :key="issue_index"
                 :id="'project-issue-' + issue_index"
-                >
+              >
                 <div class="accordion-item">
-                    <h2 class="accordion-header">
+                  <h2 class="accordion-header">
                     <button
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        :data-bs-target="'#collapse-project-issue-details' + issue_index"
-                        aria-expanded="false"
-                        aria-controls="collapse-project-issue-details"
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      :data-bs-target="'#collapse-project-issue-details' + issue_index"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue-details"
                     >
-                        <div class="project-issue-header dashed-container">
+                      <div class="project-issue-header dashed-container">
                         <div class="project-issue-title">
-                            <label class="project-item-label">{{ $t('Issue title') }}</label>
-                            <p class="project-item-text">{{ issue.title }}</p>
+                          <label class="project-item-label">{{ $t('Issue title') }}</label>
+                          <p class="project-item-text">{{ issue.title }}</p>
                         </div>
                         <div class="project-issue-status">
-                            <label class="project-item-label">{{ $t('Status') }}</label>
-                            <p class="project-item-text">
+                          <label class="project-item-label">{{ $t('Status') }}</label>
+                          <p class="project-item-text">
                             {{ fromIntToProjectIssueStatus(issue.status) }}
-                            </p>
+                          </p>
                         </div>
                         <div class="project-issue-update">
-                            <label class="project-item-label">{{ $t('Last updated') }}</label>
-                            <p class="project-item-text">
+                          <label class="project-item-label">{{ $t('Last updated') }}</label>
+                          <p class="project-item-text">
                             {{ getDateFromFulltimeString(issue.update_time) }}
-                            </p>
-                        </div>
+                          </p>
                         </div>
+                      </div>
                     </button>
-                    </h2>
-                    <div
+                  </h2>
+                  <div
                     :id="'collapse-project-issue-details' + issue_index"
                     class="accordion-collapse collapse"
                     :data-bs-parent="'#collapse-project-issue-details' + issue_index"
-                    >
+                  >
                     <div class="project-issue-description-container">
-                        <div class="project-issue-description">
-                        <label class="project-item-label">{{
-                            $t('Issue description')
-                        }}</label>
+                      <div class="project-issue-description">
+                        <label class="project-item-label">{{ $t('Issue description') }}</label>
                         <button
-                            :hidden="
-                            !showIssueActionButton(project.project, issue, 'Resolve')
-                            "
-                            class="project-issue-description-btn"
-                            @click="setProjectIssueStatus(issue.id, 1)"
+                          :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                          class="project-issue-description-btn"
+                          @click="setProjectIssueStatus(issue.id, 1)"
                         >
-                            {{ $t('Resolve') }}
+                          {{ $t('Resolve') }}
                         </button>
                         <button
-                            :hidden="
-                            !showIssueActionButton(project.project, issue, 'Confirm')
-                            "
-                            class="project-issue-description-btn"
-                            @click="setProjectIssueStatus(issue.id, 2)"
+                          :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                          class="project-issue-description-btn"
+                          @click="setProjectIssueStatus(issue.id, 2)"
                         >
-                            {{ $t('Confirm') }}
+                          {{ $t('Confirm') }}
                         </button>
                         <button
-                            :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                            class="project-issue-description-btn"
-                            @click="setProjectIssueStatus(issue.id, 0)"
+                          :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                          class="project-issue-description-btn"
+                          @click="setProjectIssueStatus(issue.id, 0)"
                         >
-                            {{ $t('Reopen') }}
+                          {{ $t('Reopen') }}
                         </button>
-                        </div>
-                        <p class="project-item-text">{{ issue.description }}</p>
-                    </div>
+                      </div>
+                      <p class="project-item-text">{{ issue.description }}</p>
                     </div>
+                  </div>
                 </div>
-                </div>
-            </div>
+              </div>
             </div>
+          </div>
         </div>
-        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { DateUtils, WorksapceApi } from '@/utils/index'
-import { projectStatusEnum, convertIntoToProjectIssueStatus, projectIssueStatusEnum } from '@/types/index'
+import {
+  projectStatusEnum,
+  convertIntoToProjectIssueStatus,
+  projectIssueStatusEnum
+} from '@/types/index'
 export default {
-    name: 'projectIssue',
-    props: {
-        project_id: {
-            required: true,
-            type: String
-        }
-    },
-    data() {
-        return {
-            project: {},
-            newIssueDescriptions: ''
-        }
-    },
-    mounted() {
-        this.fetchView()
-    },
-    methods: {
-        fetchView() {
-            WorksapceApi.fetchWorkspaceView()
-            .then((response) => {
-                const projects = response.data || []
-                for (let i = 0; i < projects.length; i ++) {
-                    if (projects[i].id == this.project_id) {
-                        this.project = projects[i]
-                    }
-                }
-            })
-            .catch((error) => {
-                this.mnx_backendErrorHandler(error)
-            })
-        },
-        isOngoingProject(project) {
-            return project.status == projectStatusEnum.ONGOING
-        },
-        fromIntToProjectIssueStatus(issueStatus) {
-            return convertIntoToProjectIssueStatus(issueStatus)
-        },
-        getDateFromFulltimeString(fulltime) {
-            return DateUtils.FromJsonToDateString(fulltime)
-        },
-        postNewIssue(product_id, project_id, issue_description) {
-        if (issue_description == null || issue_description == '') {
-            alert(this.$t('Please input issue description'))
-            return
-        }
-            WorksapceApi.postIssueForProduct(product_id, project_id, issue_description)
-            .then((response) => {
-                this.$refs.issueBtn.blur()
-                this.$refs.issueAddBtn.click()
-                this.fetchView()
-                this.newIssueDescriptions = ''
-            })
-            .catch((error) => {
-                this.mnx_backendErrorHandler(error)
-            })
-        },
-        setProjectIssueStatus(issue_id, status) {
-            WorksapceApi.setProductIssueStatus(issue_id, status)
-            .then((response) => {
-                this.fetchView()
-            })
-            .catch((error) => {
-                this.mnx_backendErrorHandler(error)
-            })
-        },
-        showIssueActionButton(project, issue, button_text) {
-        switch (issue.status) {
-            case projectIssueStatusEnum.OPEN:
-            if (button_text === this.$t('Resolve')) {
-                return project.providers.includes(project.current_user_id)
-            }
-            break
-            case 1:
-            if (button_text === this.$t('Reopen') || button_text === this.$t('Confirm')) {
-                return project.issuers.includes(project.current_user_id)
-            }
-            break
-            case projectIssueStatusEnum.CLOSED:
-            if (button_text === this.$t('Reopen')) {
-                return project.issuers.includes(project.current_user_id)
-            }
-            break
-            default:
-            return false
-        }
-        },
+  name: 'projectIssue',
+  props: {
+    project_id: {
+      required: true,
+      type: String
     }
+  },
+  data() {
+    return {
+      project: {},
+      newIssueDescriptions: ''
+    }
+  },
+  mounted() {
+    this.fetchView()
+  },
+  methods: {
+    fetchView() {
+      WorksapceApi.fetchWorkspaceView()
+        .then((response) => {
+          const projects = response.data || []
+          for (let i = 0; i < projects.length; i++) {
+            if (projects[i].id == this.project_id) {
+              this.project = projects[i]
+            }
+          }
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    isOngoingProject(project) {
+      return project.status == projectStatusEnum.ONGOING
+    },
+    fromIntToProjectIssueStatus(issueStatus) {
+      return convertIntoToProjectIssueStatus(issueStatus)
+    },
+    getDateFromFulltimeString(fulltime) {
+      return DateUtils.FromJsonToDateString(fulltime)
+    },
+    postNewIssue(product_id, project_id, issue_description) {
+      if (issue_description == null || issue_description == '') {
+        alert(this.$t('Please input issue description'))
+        return
+      }
+      WorksapceApi.postIssueForProduct(product_id, project_id, issue_description)
+        .then((response) => {
+          this.$refs.issueBtn.blur()
+          this.$refs.issueAddBtn.click()
+          this.fetchView()
+          this.newIssueDescriptions = ''
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    setProjectIssueStatus(issue_id, status) {
+      WorksapceApi.setProductIssueStatus(issue_id, status)
+        .then((response) => {
+          this.fetchView()
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    showIssueActionButton(project, issue, button_text) {
+      switch (issue.status) {
+        case projectIssueStatusEnum.OPEN:
+          if (button_text === this.$t('Resolve')) {
+            return project.providers.includes(project.current_user_id)
+          }
+          break
+        case 1:
+          if (button_text === this.$t('Reopen') || button_text === this.$t('Confirm')) {
+            return project.issuers.includes(project.current_user_id)
+          }
+          break
+        case projectIssueStatusEnum.CLOSED:
+          if (button_text === this.$t('Reopen')) {
+            return project.issuers.includes(project.current_user_id)
+          }
+          break
+        default:
+          return false
+      }
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/frontend/src/plugins/store/basic.js b/frontend/src/plugins/store/basic.js
index 0648e8e..89abe3b 100644
--- a/frontend/src/plugins/store/basic.js
+++ b/frontend/src/plugins/store/basic.js
@@ -7,16 +7,14 @@ const ignoreEventType = ['test']
 let timer = null
 const GWT = new Date('01 Jan 1970 00:00:00 GMT').toISOString()
 const unreadWorkspaceRules = [
-  {subject:'request', event:'quoted'},
-  {subject:'quote', event:'accepted'},
-  {subject:'quote',event:'rejected'},
-  {subject:'request',event:'invited'}
-]
-const unreadRequestRules = [
-  {subject:'request',event:'invited'}
+  { subject: 'request', event: 'quoted' },
+  { subject: 'quote', event: 'accepted' },
+  { subject: 'quote', event: 'rejected' },
+  { subject: 'request', event: 'invited' }
 ]
+const unreadRequestRules = [{ subject: 'request', event: 'invited' }]
 const checkUnreadRulesBy = (message, rules = []) => {
-  for (let i = 0; i < rules.length; i ++) {
+  for (let i = 0; i < rules.length; i++) {
     if (message?.subject == rules[i].subject && message?.event == rules[i].event) {
       return true
     }
@@ -24,43 +22,45 @@ const checkUnreadRulesBy = (message, rules = []) => {
   return false
 }
 
-const updateConversations =(state, {token ,cb}, data) => {
-  MessageHubApi.fetchConversations(GWT, token).then((response) => {
-    const conversations = response.data.conversations || []
-    let updateLength = 0
-    if (conversations.length === 0) {
-      state.unreadConversationCount = 0
-      localStorage.setItem('unreadConversationCount', 0)
-    }
-    if (data && data.event !== 'connected') {
-      updateLength = conversations.length - state.conversations.length
-      if (updateLength === 0) updateLength = 1
-      for (let i = 0; i < updateLength; i++) {
-        conversations[i]['unread'] = true
+const updateConversations = (state, { token, cb }, data) => {
+  MessageHubApi.fetchConversations(GWT, token)
+    .then((response) => {
+      const conversations = response.data.conversations || []
+      let updateLength = 0
+      if (conversations.length === 0) {
+        state.unreadConversationCount = 0
+        localStorage.setItem('unreadConversationCount', 0)
       }
-    }
-    state.conversations = conversations
-    localStorage.setItem('conversations', JSON.stringify(conversations))
-    const conversation = conversations[0]
-    if (conversation?.id) {
-      MessageHubApi.fetchMessages(
-        conversation.id,
-        conversation.message_update_time ? conversation.message_update_time : GWT,
-        token
-      ).then((response) => {
-        conversations[0].messages = response?.data || []
-        conversations[0].message_update_time = new Date().toISOString()
-        // state.conversations = conversations
-        state.unreadConversationCount = updateLength
-        // localStorage.setItem('conversations', JSON.stringify(conversations))
-        localStorage.setItem('unreadConversationCount', updateLength)
-      })
-    }
-  }).catch(err => {
-    if (cb && cb instanceof Function) {
-      cb(err)
-    }
-  })
+      if (data && data.event !== 'connected') {
+        updateLength = conversations.length - state.conversations.length
+        if (updateLength === 0) updateLength = 1
+        for (let i = 0; i < updateLength; i++) {
+          conversations[i]['unread'] = true
+        }
+      }
+      state.conversations = conversations
+      localStorage.setItem('conversations', JSON.stringify(conversations))
+      const conversation = conversations[0]
+      if (conversation?.id) {
+        MessageHubApi.fetchMessages(
+          conversation.id,
+          conversation.message_update_time ? conversation.message_update_time : GWT,
+          token
+        ).then((response) => {
+          conversations[0].messages = response?.data || []
+          conversations[0].message_update_time = new Date().toISOString()
+          // state.conversations = conversations
+          state.unreadConversationCount = updateLength
+          // localStorage.setItem('conversations', JSON.stringify(conversations))
+          localStorage.setItem('unreadConversationCount', updateLength)
+        })
+      }
+    })
+    .catch((err) => {
+      if (cb && cb instanceof Function) {
+        cb(err)
+      }
+    })
 }
 
 const basicStore = {
@@ -120,8 +120,7 @@ const basicStore = {
             state.unreadWorkspace = true
           }
 
-          updateConversations(state,{token},data)
-
+          updateConversations(state, { token }, data)
         },
         () => {
           console.log('downstream_web_socket error')
@@ -165,8 +164,8 @@ const basicStore = {
     readMessageBy(context, sender) {
       context.commit('readMessageBy', sender)
     },
-    updateConversationsPage(context, {token, cb}) {
-      context.commit('updateConversationsPage', {token, cb})
+    updateConversationsPage(context, { token, cb }) {
+      context.commit('updateConversationsPage', { token, cb })
     },
     clearUnreadWorkspace(context) {
       context.commit('clearUnreadWorkspace')
diff --git a/frontend/src/types/projectUtils.js b/frontend/src/types/projectUtils.js
index 136385e..ff26a9a 100644
--- a/frontend/src/types/projectUtils.js
+++ b/frontend/src/types/projectUtils.js
@@ -5,7 +5,7 @@ const projectStatusEnum = Object.freeze({
   CLOSED: 3,
   REJECTED: 4,
   APPLYING: 5,
-  ACCEPTING: 6,
+  ACCEPTING: 6
 })
 const projectClosureReasonEnum = Object.freeze({
   CLOSED: 0,