diff --git a/frontend/Dockerfile b/Dockerfile
similarity index 64%
rename from frontend/Dockerfile
rename to Dockerfile
index 835a295..1e75a82 100644
--- a/frontend/Dockerfile
+++ b/Dockerfile
@@ -1,26 +1,27 @@
 # build stage
 FROM node:lts-alpine as build-stage
+ARG CONTAINER_APP_ROOT="/app"
 
 RUN npm update npm -g
 RUN npm config set "@fortawesome:registry" https://npm.fontawesome.com/
 RUN npm config set "//npm.fontawesome.com/:_authToken" 58624E90-2685-43C6-BF0F-0BFECCE11CD2
 RUN npm install -g http-server
-WORKDIR /app
+WORKDIR ${CONTAINER_APP_ROOT}
 
-COPY package*.json ./
+COPY frontend/package*.json ./
 
 RUN npm install
 
-COPY *.js ./
-COPY *.html ./
-COPY src ./src
-COPY public ./public
+COPY frontend/*.js ./
+COPY frontend/*.html ./
+COPY frontend/src ./src
+COPY frontend/public ./public
 
 RUN npm run build
 
 # production stage
 FROM nginx:1.25.2 as production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
-COPY nginx_docker.conf /etc/nginx/conf.d/default.conf
+COPY frontend/nginx_docker.conf /etc/nginx/conf.d/default.conf
 EXPOSE 8080
 CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/frontend/frontend b/frontend/frontend
deleted file mode 120000
index 39fc200..0000000
--- a/frontend/frontend
+++ /dev/null
@@ -1 +0,0 @@
-../freeleaps2-frontend/frontend
\ No newline at end of file
diff --git a/frontend/src/assets/styles/inputs.scss b/frontend/src/assets/styles/inputs.scss
index ef21bca..3ac96b2 100644
--- a/frontend/src/assets/styles/inputs.scss
+++ b/frontend/src/assets/styles/inputs.scss
@@ -6,11 +6,25 @@
   @extend .form-control;
 }
 
-.form-input-back { display: flex; align-items: center; height: 32px; overflow: hidden; cursor: pointer; margin-bottom: 5px; color: $primary;
-  .input-back-icon {font-size: 32px;}
-  p {margin: 0; font-weight: 500;}
+.form-input-back {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  overflow: hidden;
+  cursor: pointer;
+  margin-bottom: 5px;
+  color: $primary;
+  .input-back-icon {
+    font-size: 32px;
+  }
+  p {
+    margin: 0;
+    font-weight: 500;
+  }
   &:hover {
-    .input-back-icon {font-size: 35px;}
+    .input-back-icon {
+      font-size: 35px;
+    }
   }
 }
 
diff --git a/frontend/src/components/EmptyContent.vue b/frontend/src/components/EmptyContent.vue
index d3996e1..c80b5e5 100644
--- a/frontend/src/components/EmptyContent.vue
+++ b/frontend/src/components/EmptyContent.vue
@@ -26,12 +26,22 @@ export default {
   flex-direction: column;
 
   &.auto-fit {
-    width: 100%; 
+    width: 100%;
     height: 100%;
   }
 
-  .loading-big {width: 188px; height: 188px;}
-  .empty-img {width: 188px; height: 188px; margin-bottom: 15px;}
-  .empty-text {font-size: 26px; color: #6E7387;}
+  .loading-big {
+    width: 188px;
+    height: 188px;
+  }
+  .empty-img {
+    width: 188px;
+    height: 188px;
+    margin-bottom: 15px;
+  }
+  .empty-text {
+    font-size: 26px;
+    color: #6e7387;
+  }
 }
 </style>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 7a53429..89854a1 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -13,7 +13,7 @@ export default {
   Duration: 'Duration',
   days: 'days',
   Update: 'Update',
-  "Quote From": 'From',
+  'Quote From': 'From',
   reject: 'reject',
   accept: 'accept',
   Note: 'Note',
@@ -66,7 +66,7 @@ export default {
   'invalid code': 'invalid code',
   Password: 'Password',
   'Forget password': 'Forget password',
-  'Invalid password': 'Password doesn\'t match',
+  'Invalid password': "Password doesn't match",
   'Read More': 'Read More',
   'Total earning': 'Total earning',
   Payable: 'Payable',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 1f5a9fc..e7d5d62 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -13,7 +13,7 @@ export default {
   Duration: '工期',
   days: '天',
   Update: '更新',
-  "Quote From": '需求方',
+  'Quote From': '需求方',
   reject: '拒绝',
   accept: '接受',
   Note: '标注',
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 8b4897c..f5c2f18 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -32,11 +32,11 @@ import gql from 'graphql-tag'
 const GET_USERS = gql`
   query Users {
     users {
-        firstName
-        lastName
+      firstName
+      lastName
     }
   }
-`;
+`
 
 export default {
   name: 'FrontDoor',
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index 610360b..b65fd6e 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -143,13 +143,14 @@ export default {
 
   &:disabled {
     color: $primary;
-    opacity: .78;
+    opacity: 0.78;
   }
 }
 
 .countdown {
   color: $primary;
 }
+
 .msg-center {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 270edea..33e4932 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -3,7 +3,7 @@
     <form @submit.prevent="signinWithPassword">
       <div class="form-input-back" @click="frontPage">
         <svg-icon icon="back" class-name="input-back-icon" />
-        <p>{{email}}</p>
+        <p>{{ email }}</p>
       </div>
       <div class="input-container">
         <div class="form-group">
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index b3328a3..f539859 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -216,7 +216,7 @@
           </label>
           <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType" hidden
             @change="onUserPhotoChange($event)" />
-          <p v-if="message">{{message}}</p>
+          <p v-if="message">{{ message }}</p>
         </div>
       </div>
       <div class="collapse collapse-content-container" id="collapse-personal-user-intro"
@@ -284,7 +284,7 @@
           <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)" />
-          <p v-if="message">{{message}}</p>
+          <p v-if="message">{{ message }}</p>
         </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"
@@ -1175,7 +1175,7 @@ export default {
         right: 0;
         bottom: 0;
         display: flex;
-        background-color: rgba(0,0,0,.3);
+        background-color: rgba(0, 0, 0, 0.3);
         justify-content: center;
         align-items: center;
       }
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index e622c50..c8853c3 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="message-container">
+  <div class="message-container" ref="messagesContainer">
     <div class="message-hub-conainter">
       <template v-if="!receiver_id">
         <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
@@ -17,7 +17,8 @@
                 }}</span>
               </div>
               <div class="conversation-summary-highlight-container">
-                {{ getSenderName(conversation.last_message) }} {{ conversation.last_message?.message_body }}
+                {{ getSenderName(conversation.last_message) }}
+                {{ conversation.last_message?.message_body }}
               </div>
             </div>
           </div>
@@ -27,7 +28,7 @@
         </div>
       </template>
       <div class="message-panel-container">
-        <div v-if="messages && messages.length > 0" class="message-thread-container">
+        <div v-if="messages && messages.length > 0" class="message-thread-container" ref="messageThreadContainer">
           <div v-for="(item, index) in messages" :key="index" class="message-item-container"
             :class="item.sender_id == userIdentityNote ? 'me' : ''">
             <div class="message-item-header-container">
@@ -118,6 +119,7 @@ export default {
         .then((response) => {
           this.messages = response?.data || []
           console.log('Received message for conversation:', conversation_id)
+          this.scrollToNewestMessageThread();
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -156,6 +158,10 @@ export default {
               sender_photo: new_message.sender_profile.photo
             })
             this.writtenMessage = null
+
+            // Scroll to the newest message
+            this.scrollToNewestMessage();
+            this.scrollToNewestMessageThread();
           })
           .catch((error) => {
             this.mnx_backendErrorHandler(error)
@@ -170,10 +176,24 @@ export default {
     getSenderName(message) {
       if (message != null) {
         if (message.sender_id == this.mnx_getUserIdentity()) {
-          return "You:"
+          return 'You:'
         }
       }
       return ''
+    },
+    scrollToNewestMessage() {
+      this.$nextTick(() => {
+        const messagesContainer = this.$refs.messagesContainer;
+        messagesContainer.scrollTop = messagesContainer.scrollHeight
+      });
+    },
+    scrollToNewestMessageThread() {
+      this.$nextTick(() => {
+        const messageThreadContainer = this.$refs.messageThreadContainer;
+        if (messageThreadContainer != null) {
+          messageThreadContainer.scrollTop = messageThreadContainer.scrollHeight
+        }
+      });
     }
   }
 }
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index b2419d4..aba1981 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -19,7 +19,8 @@
                 </div>
                 <div class="provider-stay-on-freeleaps-container">
                   <label class="provider-stay-on-freeleaps-label" for="provider-stay-on-freeleaps">
-                    {{ $t('Stay on Freeleaps') }} </label>
+                    {{ $t('Stay on Freeleaps') }}
+                  </label>
                   <span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps">
                     {{ provider.activeness_achievement.days_of_staying_on }}
                     {{ $t('day(s)') }}</span>
@@ -36,7 +37,9 @@
                     $t('Responding time')
                     }}</label>
                   <span class="provider-responding-time-span" id="provider-responding-time">
-                    {{ provider.provider_achievement.activities.responding_time_in_minutes ?? 'N/A' }}
+                    {{
+                      provider.provider_achievement.activities.responding_time_in_minutes ?? 'N/A'
+                    }}
                     {{ $t('min(s)') }}
                   </span>
                 </div>
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index 52a4c54..63776cb 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -1,57 +1,106 @@
 <template>
   <div class="making-proposal-container offcanvas-parent">
     <div class="making-proposal-content">
-      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
-        aria-labelledby="offcanvas-copy-existing">
+      <div
+        class="offcanvas offcanvas-end offcanvas-container"
+        tabindex="-1"
+        id="offcanvas-copy-existing"
+        aria-labelledby="offcanvas-copy-existing"
+      >
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-copy-existing">
             {{ $t('Copy from existing proposals') }}
           </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="existing-proposal-item-container">
-            <div v-for="(existingProposal, index) in existingProposals" :key="index" :id="'existing-proposal' + index"
-              class="accordion-item">
+            <div
+              v-for="(existingProposal, index) in existingProposals"
+              :key="index"
+              :id="'existing-proposal' + index"
+              class="accordion-item"
+            >
               <h2 class="accordion-header" :id="'existing-heading' + index">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
-                  :aria-controls="'collapse' + index">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'existing-proposal-collapse' + index"
+                  aria-expanded="false"
+                  :aria-controls="'collapse' + index"
+                >
                   <span class="dashed-container">{{ existingProposal.request.title }}</span>
                 </button>
               </h2>
-              <div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
-                :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
+              <div
+                :id="'existing-proposal-collapse' + index"
+                class="accordion-collapse collapse"
+                :aria-labelledby="'existing-heading' + index"
+                data-bs-parent="#existing-proposal-item-container"
+              >
                 <div class="accordion-body">
                   <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                     {{ $t('Copy') }}
                   </button>
-                  <div class="existing-request-content-text" v-html="existingProposal.content"></div>
+                  <div
+                    class="existing-request-content-text"
+                    v-html="existingProposal.content"
+                  ></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
-        aria-labelledby="offcanvas-template">
+      <div
+        class="offcanvas offcanvas-end offcanvas-container"
+        tabindex="-1"
+        id="offcanvas-template"
+        aria-labelledby="offcanvas-template"
+      >
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-template">
             {{ $t('Apply proposal template') }}
           </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="template-item-container">
-            <div v-for="(template, index) in templates" :key="index" :id="'template' + index" class="accordion-item">
+            <div
+              v-for="(template, index) in templates"
+              :key="index"
+              :id="'template' + index"
+              class="accordion-item"
+            >
               <h2 class="accordion-header" :id="'heading' + index">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'collapse' + index"
+                  aria-expanded="false"
+                  :aria-controls="'collapse' + index"
+                >
                   <span class="dashed-container">{{ template.title }}</span>
                 </button>
               </h2>
-              <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
-                data-bs-parent="#template-item-container">
+              <div
+                :id="'collapse' + index"
+                class="accordion-collapse collapse"
+                :aria-labelledby="'heading' + index"
+                data-bs-parent="#template-item-container"
+              >
                 <div class="accordion-body">
                   <button class="load-template-button" @click="applyTemplate(template)">
                     {{ $t('Apply') }}
@@ -67,14 +116,22 @@
         <div class="accordion accordion-list" id="accordion-request-container">
           <div class="accordion-item">
             <h2 class="accordion-header">
-              <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapse-request-content" aria-expanded="false"
-                aria-controls="collapse-request-content">
+              <button
+                class="accordion-button"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapse-request-content"
+                aria-expanded="false"
+                aria-controls="collapse-request-content"
+              >
                 <span class="dashed-container">{{ request.title }}</span>
               </button>
             </h2>
-            <div id="collapse-request-content" class="accordion-collapse collapse"
-              data-bs-parent="#accordion-request-container">
+            <div
+              id="collapse-request-content"
+              class="accordion-collapse collapse"
+              data-bs-parent="#accordion-request-container"
+            >
               <div class="accordion-body">
                 <div class="request-content" v-html="request.content"></div>
               </div>
@@ -86,13 +143,23 @@
         <div class="proposal-header-container">
           <label class="proposal-label">{{ $t('Proposal') }}:</label>
           <div class="header-bar">
-            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
-              aria-controls="offcanvas-template">
+            <button
+              class="btn btn-link"
+              type="button"
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-template"
+              aria-controls="offcanvas-template"
+            >
               <svg-icon icon="btn-templates" />
               {{ $t('Templates') }}
             </button>
-            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
+            <button
+              class="btn btn-link"
+              type="button"
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-copy-existing"
+              aria-controls="offcanvas-copy-existing"
+            >
               <svg-icon icon="btn-history" />
               {{ $t('Copy') }}
             </button>
@@ -108,8 +175,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
-                      v-model="stage.payment" />
+                    <input
+                      class="input-email"
+                      :id="`stage-payment-content-${index}`"
+                      type="number"
+                      v-model="stage.payment"
+                    />
                     <label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label>
                   </div>
                   <span class="btn-start">{{ stage.currency }}</span>
@@ -120,8 +191,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
-                      v-model="stage.duration_in_days" />
+                    <input
+                      class="input-email"
+                      :id="`stage-duration-content-${index}`"
+                      type="number"
+                      v-model="stage.duration_in_days"
+                    />
                     <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
                   </div>
                   <span class="btn-start">{{ $t('day(s)') }}</span>
@@ -132,7 +207,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
+                    <input
+                      class="input-email"
+                      :id="`stage-note-content-${index}`"
+                      type="text"
+                      v-model="stage.note"
+                    />
                     <label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label>
                   </div>
                 </div>
@@ -195,7 +275,7 @@ import {
 } from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
-import { WorksapceApi } from '../../../utils';
+import { WorksapceApi } from '../../../utils'
 export default {
   name: 'MakeProposal',
   components: { SvgIcon, FreeleapsEditor },
@@ -269,15 +349,17 @@ export default {
         this.proposal.content,
         this.proposal.stages,
         null
-      ).then((response) => {
-        if (this.uploadFile) {
-          this.attachFile()
-        } else {
-          this.mnx_navToRequestSubmitted(this.requestId)
-        }
-      }).catch((error) => {
-        this.mnx_backendErrorHandler(error)
-      })
+      )
+        .then((response) => {
+          if (this.uploadFile) {
+            this.attachFile()
+          } else {
+            this.mnx_navToRequestSubmitted(this.requestId)
+          }
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     },
     loadFrom() {
       switch (Number.parseInt(this.loadingMode, 10)) {
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index fe96be1..cd1ca40 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,13 +2,22 @@
   <empty-content :loading="loading" :empty="projects?.length === 0" />
   <div v-if="projects && projects.length > 0" class="workspace-container">
     <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,21 +56,36 @@
                 </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>
-                            <p class="project-item-text">{{ proposal.total_amount }} {{ proposal.currency }}</p>
+                            <p class="project-item-text">
+                              {{ proposal.total_amount }} {{ proposal.currency }}
+                            </p>
                           </div>
                           <div class="project-request-proposal-payment-type-container">
                             <label class="project-item-label">{{ $t('Payment') }}</label>
@@ -86,16 +114,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 +138,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 +178,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 +201,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 +242,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,11 +285,17 @@
                       </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">
@@ -261,7 +329,12 @@
                                 $t('Payment')
                               }}</span>
                               <span class="project-milestones-table-span">
-                                {{ milestone.status == 3 ? milestone.expected_payment : milestone.actual_paid }} / {{ milestone.expected_payment }}
+                                {{
+                                  milestone.status == 3
+                                    ? milestone.expected_payment
+                                    : milestone.actual_paid
+                                }}
+                                / {{ milestone.expected_payment }}
                                 {{ project.project.progress.payment_currency }}
                               </span>
                             </div>
@@ -277,9 +350,14 @@
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button class="project-milestones-table-btn" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
-                                " :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                                @click="handleMilestoneAction(project.project, milestone)">
+                              <button
+                                class="project-milestones-table-btn"
+                                :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> -->
@@ -290,8 +368,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>
@@ -303,9 +383,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>
@@ -328,13 +413,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>
@@ -350,9 +444,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>
@@ -375,8 +474,11 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-issue" class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-issue">
+                  <div
+                    id="collapse-project-issue"
+                    class="accordion-collapse collapse"
+                    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') }}
diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index 3355f2d..70db5d0 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -109,8 +109,9 @@
                           {{ $t('Reopen') }}
                         </button>
                       </div>
-                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{
-                        issue.description }}</p>
+                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">
+                        {{ issue.description }}
+                      </p>
                       <div v-if="updatingIssue && updatingIssue.issue_id === issue.id"
                         class="project-issue-description-container">
                         <div class="project-issue-description">
@@ -122,7 +123,7 @@
                             {{ $t('Update') }}
                           </button>
                         </div>
-                        <input type="text" v-model="updatingIssue.issue_title">
+                        <input type="text" v-model="updatingIssue.issue_title" />
                         <div class="project-issue-description">
                           <label class="project-item-label">{{ $t('Issue description') }}</label>
                         </div>
@@ -130,8 +131,11 @@
                         <div class="file-upload-container">
                           <div class="upload-contianer">
                             <label class="btn btn-link">
-                              <span v-if="!updatingIssue.issue_attachment">{{ $t('Upload attachment') }}</span>
-                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name
+                              <span v-if="!updatingIssue.issue_attachment">{{
+                                $t('Upload attachment')
+                                }}</span>
+                              <span v-if="updatingIssue.issue_attachment">{{
+                                updatingIssue.issue_attachment.name
                                 }}</span>
                               <input type="file" hidden @change="handleFileUpload" />
                             </label>
diff --git a/frontend/src/plugins/store/basic.js b/frontend/src/plugins/store/basic.js
index bd71e7a..ba799c4 100644
--- a/frontend/src/plugins/store/basic.js
+++ b/frontend/src/plugins/store/basic.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-prototype-builtins */
 import { i18n } from '@/lang'
-import { debounce } from 'lodash';
+import { debounce } from 'lodash'
 import { WsConnectionFactory } from '@/utils/backend/websocket'
 import { MessageHubApi } from '@/utils/backend/messageHub'
 
@@ -61,8 +61,8 @@ const updateConversations = debounce((state, { token, cb }, data) => {
       if (cb && cb instanceof Function) {
         cb(err)
       }
-    });
-}, 300);
+    })
+}, 300)
 
 const basicStore = {
   namespaced: true,
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 6413866..0d9db3d 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -128,13 +128,9 @@ class WorksapceApi {
 
   static updateIssueForProduct(data) {
     let jwt = userUtils.getJwtToken()
-    const request = backendAxios.post(
-      '/api/workspace/product/update-issue-for-product',
-      data,
-      {
-        headers: { Authorization: `Bearer ${jwt}` }
-      }
-    )
+    const request = backendAxios.post('/api/workspace/product/update-issue-for-product', data, {
+      headers: { Authorization: `Bearer ${jwt}` }
+    })
     return request
   }