diff --git a/.gitignore b/.gitignore
index f166428..092300f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,5 @@ ythe.sh
 /logs/
 *build*
 package-lock.json
-.vite
\ No newline at end of file
+.vite
+.idea
diff --git a/Dockerfile b/Dockerfile
index 31fdab5..3aad092 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,6 +2,10 @@
 FROM node:lts-alpine as build-stage
 ARG CONTAINER_APP_ROOT="/app"
 ARG FRONTEND_PORT=8080
+# TODO: further testing before turning on
+# ARG ZOOM_CLIENT_ID
+# ARG ZOOM_REDIRECT_URI
+# ARG ZOOM_SCOPE
 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
@@ -17,6 +21,11 @@ COPY frontend/*.html ./
 COPY frontend/src ./src
 COPY frontend/public ./public
 
+# TODO: further testing before turning on
+# RUN echo "VUE_APP_ZOOM_CLIENT_ID=${ZOOM_CLIENT_ID}" >> .env
+# RUN echo "VUE_APP_ZOOM_REDIRECT_URI=${ZOOM_REDIRECT_URI}" >> .env
+# RUN echo "VUE_APP_ZOOM_SCOPE=${ZOOM_SCOPE}" >> .env
+
 RUN npm run build
 
 # production stage
diff --git a/frontend/frontend b/frontend/frontend
new file mode 120000
index 0000000..39fc200
--- /dev/null
+++ b/frontend/frontend
@@ -0,0 +1 @@
+../freeleaps2-frontend/frontend
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index dced95c..7c61e00 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "echarts": "^5.5.1",
     "graphql": "^16.9.0",
     "graphql-tag": "^2.12.6",
+    "jwt-decode": "^4.0.0",
     "pdfjs-dist": "^4.3.136",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
@@ -41,4 +42,4 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "webpack": "^5.88.2"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/CustomChart.vue b/frontend/src/components/CustomChart.vue
new file mode 100644
index 0000000..34b0539
--- /dev/null
+++ b/frontend/src/components/CustomChart.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-chart ref="customChart" :option="option" autoresize />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent, DataZoomComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent, BarChart, DataZoomComponent])
+
+export default {
+  name: 'CustomChart',
+  props: {
+    customOption: { type: Object, default: () => {} }
+  },
+  components: {
+    VChart,
+  },
+  computed: {
+    option() {
+      if (this.customOption) {
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              align: 'left'
+            },
+            ...this.customOption?.tooltip
+          },
+          legend: {
+            data: this.customOption.series.map(ser => ser.name) || [],
+            ...this.customOption?.legend
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              showMaxLabel: true,
+              showMinLabel: true
+            },
+            boundaryGap: false,
+            ...this.customOption?.xAxis
+          },
+          yAxis: {
+            type: 'value',
+            ...this.customOption?.yAxis
+          },
+          dataZoom: [{
+            type: 'slider',
+            startValue: 0,
+            endValue: 3,
+            show: this.customOption?.xAxis?.data?.length > 4
+          }],
+          series: this.customOption.series || [],
+        }
+        return option
+      }
+      return {}
+    }
+  },
+  beforeUnmount() {
+    // 手动销毁实例
+    if (this.$refs.customChart && this.$refs.customChart.dispose) {
+      this.$refs.customChart.dispose();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/frontend/src/components/EmptyContent.vue b/frontend/src/components/EmptyContent.vue
index c80b5e5..52b49ac 100644
--- a/frontend/src/components/EmptyContent.vue
+++ b/frontend/src/components/EmptyContent.vue
@@ -1,7 +1,7 @@
 <template>
-  <div v-if="loading || empty" class="empty-content-container" :class="{autoFit : 'auto-fit'}">
-    <img v-if="loading" src="@/assets/images/loading.gif" class="loading-big" alt="">
-    <img v-if="empty && !loading" src="@/assets/images/no_content.jpg" class="empty-img" alt="">
+  <div v-if="loading || empty" class="empty-content-container" :class="{ autoFit: 'auto-fit' }">
+    <img v-if="loading" src="@/assets/images/loading.gif" class="loading-big" alt="" />
+    <img v-if="empty && !loading" src="@/assets/images/no_content.jpg" class="empty-img" alt="" />
     <span v-if="empty && !loading" class="empty-text">{{ $t('No content yet') }}</span>
   </div>
 </template>
@@ -34,11 +34,13 @@ export default {
     width: 188px;
     height: 188px;
   }
+
   .empty-img {
     width: 188px;
     height: 188px;
     margin-bottom: 15px;
   }
+
   .empty-text {
     font-size: 26px;
     color: #6e7387;
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
new file mode 100644
index 0000000..b7a3daf
--- /dev/null
+++ b/frontend/src/components/LineChart.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-chart ref="lineChart" :option="option" autoresize />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
+
+export default {
+  name: 'LineChart',
+  props: {
+    data: { type: Object, default: () => {} }
+  },
+  components: {
+    VChart,
+  },
+  computed: {
+    option() {
+      const option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: this.data.series.map(ser => ser.name) || []
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.data.xData || [],
+          axisLabel: {
+            showMaxLabel: true,
+            showMinLabel: true
+          }
+        },
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: this.data.series || []
+      }
+      return option
+    }
+  },
+  beforeUnmount() {
+    // 手动销毁实例
+    if (this.$refs.lineChart && this.$refs.lineChart.dispose) {
+      this.$refs.lineChart.dispose();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index f8b67ae..8b66684 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -2,38 +2,61 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <div class="information-bar" @click="gotoMessages"
-        :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }">
+      <div
+        class="information-bar"
+        @click="gotoMessages"
+        :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
+      >
         <img alt="freeleaps message" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
-        <button class="navigation-item" @click="gotoWorkspace"
-          :class="{ active: activePath == 'Workspace', badge: unreadWorkspace }">
+        <button
+          class="navigation-item"
+          @click="gotoWorkspace"
+          :class="{ active: activePath == 'Workspace', badge: unreadWorkspace }"
+        >
           <svg-icon icon="workspace" class-name="icon" />
           {{ $t('My Work') }}
           <div v-if="unreadWorkspace" class="navigation-item-tip">
             {{ $t('Some update in your work') }}
           </div>
         </button>
-        <button class="navigation-item" @click="gotoRequests"
-          :class="{ active: activePath == 'Requests', badge: unreadRequest }">
+        <button
+          class="navigation-item"
+          @click="gotoRequests"
+          :class="{ active: activePath == 'Requests', badge: unreadRequest }"
+        >
           <svg-icon icon="requests" class-name="icon" />
           {{ $t('Jobs') }}
           <div v-if="unreadRequest" class="navigation-item-tip">
             {{ $t('Some update in your request') }}
           </div>
         </button>
-        <button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers' ? 'active' : ''">
+        <button
+          class="navigation-item"
+          @click="gotoProviders"
+          :class="activePath == 'Providers' ? 'active' : ''"
+        >
           <svg-icon icon="providers" class-name="icon" />
           {{ $t('Workers') }}
         </button>
-        <button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post' ? 'active' : ''">
+        <button
+          class="navigation-item"
+          @click="gotoIssueRequest"
+          :class="activePath == 'Post' ? 'active' : ''"
+        >
           <svg-icon icon="post" class-name="icon" />
           {{ $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>
@@ -44,10 +67,17 @@
         <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
-          ? userProfile?.account?.basic?.photo?.base64
-          : profileUrl
-          " />
+        <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 5c825da..4396ae1 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -215,8 +215,10 @@ export default {
   Goal: 'Goal',
   Message: 'Message',
   'Upload attachment': 'Upload attachment',
-  'Didn\'t get the email? Check junk folder or': 'Didn\'t get the email? Check junk folder or ',
+  "Didn't get the email? Check junk folder or": "Didn't get the email? Check junk folder or ",
   'send again': 'send again',
-  'No content yet': 'No content yet'
-
+  'No content yet': 'No content yet',
+  'open': 'open',
+  'resolved': 'resolved',
+  'unresolved': 'unresolved'
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index eadf2da..0b99a97 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -213,7 +213,20 @@ export default {
   'Lines of code per week': '每周代码产量',
   Message: '消息',
   'Upload attachment': '上传附件',
-  'Didn\'t get the email? Check junk folder or': '没收到邮件？检查垃圾文件夹或',
+  "Didn't get the email? Check junk folder or": '没收到邮件？检查垃圾文件夹或',
   'send again': '重新发送',
-  'No content yet': '暂无内容'
+  'No content yet': '暂无内容',
+  OUTSTANDING: '进行中',
+  PAID: '已付款',
+  DONE: '已完成',
+  RECRUITING: '招人中',
+  ONGOING: '进行中',
+  PENDING: '待确认',
+  CLOSED: '已关闭',
+  REJECTED: '已拒绝',
+  APPLYING: '申请中',
+  ACCEPTING: '接受中',
+  'open': '未解决',
+  'resolved': '已解决',
+  'unresolved': '未解决总计'
 }
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index f5c2f18..1aaaf06 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -8,7 +8,13 @@
       <div class="form-group">
         <div class="input-group-container">
           <div class="form-floating">
-            <input class="input-email" id="inputEmail" type="text" placeholder="name@example.com" v-model="email" />
+            <input
+              class="input-email"
+              id="inputEmail"
+              type="text"
+              placeholder="name@example.com"
+              v-model="email"
+            />
             <label for="inputEmail">{{ $t('Enter email address to start') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
@@ -51,6 +57,8 @@ export default {
   },
   methods: {
     trySigninWithEmail() {
+      // Prevent the page from refreshing on form submission
+      event.preventDefault()
       this.message = null
       if (this.email === null || this.email.length < 1) {
         this.message = this.$t('Please type in your email')
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index b65fd6e..616a2c4 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -9,8 +9,14 @@
         <div class="form-group">
           <div class="input-group-container">
             <div class="form-floating">
-              <input class="input-email" id="inputCode" type="text" :placeholder="'Code sent to your email'"
-                v-model="code" @focus="inputFocus" />
+              <input
+                class="input-email"
+                id="inputCode"
+                type="text"
+                :placeholder="'Code sent to your email'"
+                v-model="code"
+                @focus="inputFocus"
+              />
               <label for="inputCode">{{ $t('Authenticaion Code Sent To Your Email') }}</label>
             </div>
             <button type="submit" class="btn-start">{{ $t('SIGN IN') }}</button>
@@ -18,9 +24,15 @@
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
         <p class="error-msg msg-center" v-if="!message">
-          <span>{{ $t('Didn\'t get the email? Check junk folder or') }}</span>
-          <button class="btn btn-link resend-btn" :disabled="countdown !== 0" type="button"
-            @click="trySigninWithEmail">{{ $t('send again') }}</button>
+          <span>{{ $t("Didn't get the email? Check junk folder or") }}</span>
+          <button
+            class="btn btn-link resend-btn"
+            :disabled="countdown !== 0"
+            type="button"
+            @click="trySigninWithEmail"
+          >
+            {{ $t('send again') }}
+          </button>
           <span v-if="countdown !== 0" class="countdown">({{ countdown }})</span>
         </p>
       </div>
@@ -52,7 +64,7 @@ export default {
     }
   },
 
-  created() { },
+  created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 33e4932..3f4e1d0 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -78,6 +78,14 @@ export default {
 
       UserAuthApi.signinByEmail(this.email, this.password)
         .then((response) => {
+          // Extract the necessary data from the response
+          const { access_token, refresh_token, expires_in } = response.data
+
+          // Save tokens and expiration time in localStorage
+          localStorage.setItem('access_token', access_token)
+          localStorage.setItem('refresh_token', refresh_token)
+          localStorage.setItem('expires_in', expires_in)
+
           let signinAction = response.data.signin_result
           switch (signinAction) {
             case signinActionEnum.EXISTING_USER_PASSWORD_REQUIRED:
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index d18dfe1..505cab0 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -33,10 +33,8 @@ export default {
         })
     },
     view_link(directory) {
-      if (directory.content_id)
-        this.mnx_navToPdfContentViewer(directory.content_id)
-      else if (directory.content_link)
-        this.mnx_navToLinkContentViewer(btoa(directory.content_link))
+      if (directory.content_id) this.mnx_navToPdfContentViewer(directory.content_id)
+      else if (directory.content_link) this.mnx_navToLinkContentViewer(btoa(directory.content_link))
     }
   },
   data() {
@@ -87,6 +85,7 @@ export default {
   color: #666666;
   margin-bottom: 5px;
 }
+
 .directory-btn {
   font-weight: 600;
 }
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index 7ca82ce..61d7745 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -32,10 +32,8 @@ export default {
         })
     },
     view_blog(blog) {
-      if (blog.content_id)
-        this.mnx_navToPdfContentViewer(blog.content_id)
-      else if (blog.content_link)
-        this.mnx_navToLinkContentViewer(btoa(blog.content_link))
+      if (blog.content_id) this.mnx_navToPdfContentViewer(blog.content_id)
+      else if (blog.content_link) this.mnx_navToLinkContentViewer(btoa(blog.content_link))
     },
     retrieve_summary(blog) {
       return blog.summary_text
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index fb415bc..2da675f 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="career_containter">
-    <div class="career-item" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
+    <div
+      class="career-item"
+      v-for="(directory, index) in directories"
+      :key="index"
+      @click="view_link(directory)"
+    >
       <p class="career-title">
         {{ directory.title_text }}
       </p>
@@ -28,10 +33,8 @@ export default {
         })
     },
     view_link(directory) {
-      if (directory.content_id)
-        this.mnx_navToPdfContentViewer(directory.content_id)
-      else if (directory.content_link)
-        this.mnx_navToLinkContentViewer(btoa(directory.content_link))
+      if (directory.content_id) this.mnx_navToPdfContentViewer(directory.content_id)
+      else if (directory.content_link) this.mnx_navToLinkContentViewer(btoa(directory.content_link))
     }
   },
   data() {
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index f539859..2b2568f 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,51 +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
+            <input
+              type="text"
+              v-model="mobileOperation.mobile.number"
+              readonly="true"
+              v-tooltip
               title="Click to update, be sure to prepend country code, i.e. +86 for China"
-              @click="edittingMobile($event)" @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
+              @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>
@@ -137,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')
@@ -149,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')
@@ -172,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')
@@ -185,95 +316,185 @@
           </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 column-flex">
           <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()"
+            />
             <div v-if="photoLoading" class="spinner-container">
               <div class="spinner-border text-primary" role="status" />
             </div>
           </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)"
+          />
           <p v-if="message">{{ message }}</p>
         </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 column-flex">
-          <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>
@@ -281,14 +502,20 @@
               <div class="spinner-border text-primary" role="status" />
             </div>
           </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)"
+          />
           <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"
-            @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>{{
@@ -453,26 +680,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"
+              >
                 <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="select-template-button" @click="selectTemplate(template)">
                   {{ $t('Choose') }}
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 304ab37..75d1159 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -3,10 +3,20 @@
     <div class="message-hub-conainter">
       <template v-if="!receiver_id">
         <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
-          <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
-            selected: selConversation?.id === conversation?.id
-          }" @click="selectConversation(conversation)">
-            <img class="participant-portrait" alt="user portrait" :src="conversation?.photo?.base64?conversation.photo.base64:profileUrl" />
+          <div
+            v-for="(conversation, index) in conversations"
+            :key="index"
+            class="conversation-container"
+            :class="{
+              selected: selConversation?.id === conversation?.id
+            }"
+            @click="selectConversation(conversation)"
+          >
+            <img
+              class="participant-portrait"
+              alt="user portrait"
+              :src="conversation?.photo?.base64 ? conversation.photo.base64 : profileUrl"
+            />
             <div class="conversation-summary-container">
               <div class="conversation-summary-header-container">
                 <span class="participant-fullname">
@@ -23,22 +33,40 @@
             </div>
           </div>
         </div>
-        <div v-if="!conversations || conversations.length == 0" class="conversation-list-empty-container">
+        <div
+          v-if="!conversations || conversations.length == 0"
+          class="conversation-list-empty-container"
+        >
           {{ $t('Empty conversation') }}
         </div>
       </template>
       <div class="message-panel-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
+          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">
-              <img class="message-item-sender-portrait" alt="user portrait" :src="conversation?.sender_photo?.base64?conversation.sender_photo.base64:profileUrl" />
+              <img
+                class="message-item-sender-portrait"
+                alt="user portrait"
+                :src="
+                  conversation?.sender_photo?.base64 ? conversation.sender_photo.base64 : profileUrl
+                "
+              />
               <span class="message-item-sender-fullname">
                 {{ item.sender_firstname }}
                 {{ item.sender_lastname }}
               </span>
               <span class="message-item-create-time">
-                {{ getDateFromFulltimeString(item.create_time) }}</span>
+                {{ getDateFromFulltimeString(item.create_time) }}</span
+              >
             </div>
             <div class="message-item-message-body">{{ item.message_body }}</div>
           </div>
@@ -48,8 +76,12 @@
         </div>
         <div class="message-writing-panel-container">
           <svg-icon icon="msg-enter" class-name="writing-message-enter" />
-          <input class="writing-message-input" type="text" v-model="writtenMessage"
-            @keypress.enter="sendMessage(selConversation?.id)" />
+          <input
+            class="writing-message-input"
+            type="text"
+            v-model="writtenMessage"
+            @keypress.enter="sendMessage(selConversation?.id)"
+          />
         </div>
       </div>
     </div>
@@ -130,7 +162,7 @@ export default {
         .then((response) => {
           this.messages = response?.data || []
           console.log('Received message for conversation:', conversation_id)
-          this.scrollToNewestMessageThread();
+          this.scrollToNewestMessageThread()
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -171,8 +203,8 @@ export default {
             this.writtenMessage = null
 
             // Scroll to the newest message
-            this.scrollToNewestMessage();
-            this.scrollToNewestMessageThread();
+            this.scrollToNewestMessage()
+            this.scrollToNewestMessageThread()
           })
           .catch((error) => {
             this.mnx_backendErrorHandler(error)
@@ -194,17 +226,17 @@ export default {
     },
     scrollToNewestMessage() {
       this.$nextTick(() => {
-        const messagesContainer = this.$refs.messagesContainer;
+        const messagesContainer = this.$refs.messagesContainer
         messagesContainer.scrollTop = messagesContainer.scrollHeight
-      });
+      })
     },
     scrollToNewestMessageThread() {
       this.$nextTick(() => {
-        const messageThreadContainer = this.$refs.messageThreadContainer;
+        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 f3b2bcc..66ee8c1 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -2,11 +2,21 @@
   <empty-content :loading="loading" :empty="recommendedProviders?.length === 0" />
   <div class="provider-hub-container" id="provider-accordion-container">
     <template v-if="recommendedProviders">
-      <div class="accordion accordion-list" v-for="(provider, index) in recommendedProviders" :key="index">
+      <div
+        class="accordion accordion-list"
+        v-for="(provider, index) in recommendedProviders"
+        :key="index"
+      >
         <div class="accordion-item my-3">
           <h2 class="accordion-header">
-            <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"
+            >
               <div class="provider-summary-containter dashed-container">
                 <div class="provider-portrait-containter">
                   <img class="provider-portrait" alt="user portrait" src="@/assets/profile.png" />
@@ -15,7 +25,8 @@
                   <label class="provider-name-label" for="provider-name">{{ $t('Name') }}</label>
                   <span class="provider-name-span" id="provider-name">
                     {{ provider.user_profile.first_name }}
-                    {{ provider.user_profile.last_name }}</span>
+                    {{ provider.user_profile.last_name }}</span
+                  >
                 </div>
                 <div class="provider-stay-on-freeleaps-container">
                   <label class="provider-stay-on-freeleaps-label" for="provider-stay-on-freeleaps">
@@ -23,11 +34,16 @@
                   </label>
                   <span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps">
                     {{ provider.activeness_achievement.days_of_staying_on }}
-                    {{ $t('day(s)') }}</span>
+                    {{ $t('day(s)') }}</span
+                  >
                 </div>
                 <div class="provider-delivered-projects-container">
-                  <label class="provider-delivered-projects-label" for="provider-delivered-projects">
-                    {{ $t('Delivered projects') }}</label>
+                  <label
+                    class="provider-delivered-projects-label"
+                    for="provider-delivered-projects"
+                  >
+                    {{ $t('Delivered projects') }}</label
+                  >
                   <span class="provider-delivered-projects-span" id="provider-delivered-projects">
                     {{ provider.provider_achievement.delivered_projects }}
                   </span>
@@ -35,7 +51,7 @@
                 <div class="provider-responding-time-container">
                   <label class="provider-responding-time-label" for="provider-responding-time">{{
                     $t('Responding time')
-                    }}</label>
+                  }}</label>
                   <span class="provider-responding-time-span" id="provider-responding-time">
                     {{
                       provider.provider_achievement.activities.responding_time_in_minutes ?? 'N/A'
@@ -46,33 +62,40 @@
                 <div class="provider-credit-score-container">
                   <label class="provider-credit-score-label" for="provider-credit-score">{{
                     $t('Credit score')
-                    }}</label>
+                  }}</label>
                   <span class="provider-credit-score-span" id="provider-credit-score">
-                    {{ provider.provider_achievement.credit }}</span>
+                    {{ provider.provider_achievement.credit }}</span
+                  >
                 </div>
               </div>
             </button>
           </h2>
-          <div :id="'collapse' + index" class="accordion-collapse collapse"
-            data-bs-parent="#provider-accordion-container">
+          <div
+            :id="'collapse' + index"
+            class="accordion-collapse collapse"
+            data-bs-parent="#provider-accordion-container"
+          >
             <div class="accordion-body">
               <div class="self-intro-container">
                 <label class="self-intro-content-label" for="self-intro-content">{{
                   $t('Self intro')
-                  }}</label>
-                <div class="self-intro-content-container" id="self-intro-content"
-                  v-html="provider.user_profile.self_intro.content_html"></div>
+                }}</label>
+                <div
+                  class="self-intro-content-container"
+                  id="self-intro-content"
+                  v-html="provider.user_profile.self_intro.content_html"
+                ></div>
               </div>
               <div class="statistics-container">
                 <label class="self-intro-content-label" for="statistics-content">{{
                   $t('Profile')
-                  }}</label>
+                }}</label>
                 <div class="statistics-content-container" id="statistics-content">
                   <div class="delivery-container">
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="delivery-delivered-projects">{{
                         $t('Delivered projects')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="delivery-delivered-projects">
                         {{ provider.provider_achievement.delivered_projects }}
                       </span>
@@ -80,7 +103,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="delivery-time-per-project">{{
                         $t('Project delivering time')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="delivery-time-per-project">
                         {{ provider.provider_deliveries.delivering_time_per_project_in_day }}
                         {{ $t('day(s)') }}
@@ -89,11 +112,17 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="delivery-top-programming-language">{{
                         $t('Top programming languages')
-                        }}</label>
-                      <div class="delivery-top-programming-language-content-container"
-                        id="delivery-top-programming-language">
-                        <span v-for="(lang, index) in provider.provider_deliveries
-                          .top_programming_languages" :key="index" class="dd-project-span">
+                      }}</label>
+                      <div
+                        class="delivery-top-programming-language-content-container"
+                        id="delivery-top-programming-language"
+                      >
+                        <span
+                          v-for="(lang, index) in provider.provider_deliveries
+                            .top_programming_languages"
+                          :key="index"
+                          class="dd-project-span"
+                        >
                           #{{ lang }}
                         </span>
                       </div>
@@ -101,7 +130,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="delivery-weekly-produced-code">{{
                         $t('Weekly produced code')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="delivery-weekly-produced-code">
                         {{ provider.provider_deliveries.lines_of_code_per_week }}
                         {{ $t('line(s)') }}
@@ -112,7 +141,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="activity-ongoing-projects">{{
                         $t('Ongoing projects')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="activity-ongoing-projects">
                         {{ provider.provider_activities.ongoing_projects }}
                       </span>
@@ -120,7 +149,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="activity-invitation-to-requests">{{
                         $t('Invitations to requests')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="activity-invitation-to-requests">
                         {{ provider.provider_activities.invitations_to_open_requests }}
                       </span>
@@ -128,7 +157,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="activity-active-proposals">{{
                         $t('Active proposals')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="activity-active-proposals">
                         {{ provider.provider_activities.active_proposals }}
                       </span>
@@ -136,7 +165,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="activity-hourly-rate">{{
                         $t('Expected hourly rate')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="activity-hourly-rate">
                         {{ provider.provider_profile.expected_salary.hourly }}
                         {{ provider.provider_profile.expected_salary.currency }}
@@ -147,7 +176,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="quality-issue-rate">{{
                         $t('Code issue rate')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="quality-issue-rate">
                         {{ provider.provider_work_quality.issues_per_thousand_lines_of_codes }}
                       </span>
@@ -155,7 +184,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="quality-online-issue-rate">{{
                         $t('Online issue rate')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="quality-online-issue-rate">
                         {{ provider.provider_work_quality.issues_after_delivery_per_project }}
                       </span>
@@ -163,7 +192,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="quality-issue-fixing-rate">{{
                         $t('Issue fixing rate')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="quality-issue-fixing-rate">
                         {{ provider.provider_work_quality.issue_fixing_rate_pencentage }}%
                       </span>
@@ -171,7 +200,7 @@
                     <div class="dd-project-container">
                       <label class="dd-project-label" for="quality-issue-fixing-time">{{
                         $t('Issue fixing time')
-                        }}</label>
+                      }}</label>
                       <span class="dd-project-span" id="quality-issue-fixing-time">
                         {{ provider.provider_work_quality.issue_fixing_time_minutes }}
                         {{ $t('min(s)') }}
@@ -183,28 +212,37 @@
               <div v-if="requests" class="statistics-container">
                 <label class="self-intro-content-label marb-10" for="statistics-content">{{
                   $t('Action panel')
-                  }}</label>
+                }}</label>
                 <div class="invite-to-request-container">
-                  <label class="invite-to-request-content-label" for="invite-to-request-content">{{ $t('Invite')
-                    }}
-                    <span class="invite-to-request-name-span">{{ provider.user_profile.first_name }}
-                      {{ provider.user_profile.last_name }}</span>
-                    {{ $t('to my open requests') }}</label>
+                  <label class="invite-to-request-content-label" for="invite-to-request-content"
+                    >{{ $t('Invite') }}
+                    <span class="invite-to-request-name-span"
+                      >{{ provider.user_profile.first_name }}
+                      {{ provider.user_profile.last_name }}</span
+                    >
+                    {{ $t('to my open requests') }}</label
+                  >
                   <div class="invite-to-request-content-container" id="invite-to-request-content">
                     <div class="form-check" v-for="(request, index) in requests" :key="index">
-                      <input class="form-check-input" type="checkbox" :value="request.id"
-                        :id="'check' + request.id" v-model="checkedRequests" @change="
-                          checkRequest($event, request.id, provider.user_profile.user_id)
-                          " />
+                      <input
+                        class="form-check-input"
+                        type="checkbox"
+                        :value="request.id"
+                        :id="'check' + request.id"
+                        v-model="checkedRequests"
+                        @change="checkRequest($event, request.id, provider.user_profile.user_id)"
+                      />
                       <label class="form-check-label" :for="'check' + request.id">{{
                         request.title
-                        }}</label>
+                      }}</label>
                     </div>
-                    <span class="invite-to-request-note-text">*{{
-                      $t(
-                        'Once the request is selected, the provider will be invited to see the request.'
-                      )
-                    }}</span>
+                    <span class="invite-to-request-note-text"
+                      >*{{
+                        $t(
+                          'Once the request is selected, the provider will be invited to see the request.'
+                        )
+                      }}</span
+                    >
                   </div>
                 </div>
               </div>
@@ -418,7 +456,7 @@ export default {
 }
 
 .marb-10 {
-  margin-bottom: 10px !important
+  margin-bottom: 10px !important;
 }
 
 .self-intro-content-container {
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 0bf0484..a4cd044 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -127,8 +127,8 @@
                       <label
                         class="issuer-achievement-label"
                         for="issuer-achievement-stay-content-div"
-                        >{{ $t('Stay on Freeleaps') }}</label
-                      >
+                        >{{ $t('Stay on Freeleaps') }}
+                      </label>
                       <div
                         class="issuer-achievement-content-container"
                         id="issuer-achievement-stay-content-div"
@@ -279,7 +279,6 @@ export default {
         })
     },
     downloadAttachedFile(request_id, document_id, file_name) {
-
       // window.open(`http://${window.location.host}/api/workspace/request/fetch-attached-file-as-download?request_id=${request_id}&document_id=${document_id}`)
 
       // const link = document.createElement('a')
@@ -294,7 +293,7 @@ export default {
         .then((response) => {
           console.log('resposne', response)
           // create file link in browser's memory
-          // const href = URL.createObjectURL(response.data)
+          // const ahref = URL.createObjectURL(response.data.download_url)
 
           // create "a" HTML element with href to file & click
           const link = document.createElement('a')
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 57699eb..be36cd7 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">
@@ -17,7 +26,9 @@
                   </div>
                   <div class="project-item-status-container">
                     <label class="project-item-label">{{ $t('Status') }}</label>
-                    <p class="project-item-text">{{ fromIntToProjectStatus(project.status) }}</p>
+                    <p class="project-item-text">
+                      {{ $t(fromIntToProjectStatus(project.status)) }}
+                    </p>
                   </div>
                   <div class="project-item-date-container">
                     <label class="project-item-label">{{ $t('Update') }}</label>
@@ -29,8 +40,9 @@
                 <div class="workspace-item-bar-right">
                   <div class="project-item-inform-container">
                     <label class="project-item-label">{{ $t('Issuer') }}</label>
-                    <p class="project-item-text">{{ project?.issuer?.first_name }}
-                      {{ project?.issuer?.last_name }}</p>
+                    <p class="project-item-text">
+                      {{ project?.issuer?.first_name }} {{ project?.issuer?.last_name }}
+                    </p>
                   </div>
                 </div>
                 <!-- <div class="workspace-item-bar-right">
@@ -42,7 +54,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)">
@@ -50,17 +66,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>
@@ -95,16 +124,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>
@@ -112,9 +148,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">
@@ -149,9 +188,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>
@@ -169,24 +211,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>
@@ -194,9 +252,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>
@@ -210,9 +273,7 @@
                         <div class="project-milestone-bar-status">
                           <label class="project-item-label">{{ $t('Status') }}</label>
                           <p class="project-item-text">
-                            {{
-                              fromIntToMilestoneStatus(project.project.progress.milestone_status)
-                            }}
+                            {{ $t(fromIntToMilestoneStatus(project.status)) }}
                           </p>
                         </div>
                         <div class="project-milestone-bar-paid">
@@ -232,20 +293,26 @@
                       </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>
@@ -253,22 +320,22 @@
                               <span class="project-milestones-table-label">{{ $t('Goal') }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.description
-                                }}</span>
+                              }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Status') }}</span>
                               <span class="project-milestones-table-span">{{
-                                fromIntToMilestoneStatus(milestone.status)
-                                }}</span>
+                                $t(fromIntToMilestoneStatus(milestone.status))
+                              }}</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.status == 3
@@ -285,15 +352,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="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> -->
@@ -304,8 +376,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>
@@ -317,9 +391,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>
@@ -342,13 +421,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>
@@ -357,16 +445,21 @@
                         {{ $t('TO BE IMPLEMENTED.') }}
                       </div> -->
                       <div class="chart-container">
-                        <v-chart :option="currentChartData" autoresize />
+                        <line-chart :data="getCodeChartData(project.project.code)" />
                       </div>
                     </div>
                   </div>
                 </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>
@@ -389,15 +482,18 @@
                       </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') }}
                       </button>
                     </div>
                     <div class="chart-container">
-                      <v-chart :option="currentChartData" autoresize />
+                      <line-chart :data="getIssueChartData(project.project.issue)" />
                     </div>
                     <!-- <div class="project-invite-collaborator-containter">
                       <button
@@ -519,16 +615,11 @@ import {
   convertIntoToMilestoneStatus,
   convertIntoToProjectIssueStatus
 } from '@/types/index'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from 'echarts/charts'
-import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
-import VChart from 'vue-echarts'
+import LineChart from '@/components/LineChart.vue'
 import EmptyContent from '@/components/EmptyContent.vue'
-use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
 export default {
   name: 'Workspace',
-  components: { VChart, EmptyContent },
+  components: { LineChart, EmptyContent },
   props: {},
   mounted() {
     this.loading = true
@@ -546,31 +637,21 @@ export default {
         imageUrl: null,
         index: null
       },
-      currentChartData: {
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-            type: 'line',
-            areaStyle: { color: 'rgba(63,73,255,0.1)' },
-            smooth: true,
-            symbol: 'none',
-            connectNulls: true
-          }
-        ]
-      },
       downstream_web_socket: null
     }
   },
 
   methods: {
+    // To be called with initiating zoom call
+    redirectToZoomOAuth() {
+      const clientId = 'YwetcrCFTzS_fHELZjkhPw'
+      const redirectUri = 'http://localhost:5173/api/messages/oauth/zoom/callback'
+      const zoomOAuthUrl = `https://zoom.us/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=meeting:write:meeting`
+
+      // Redirect the user to Zoom's OAuth 2.0 consent page
+      window.location.href = zoomOAuthUrl
+    },
+    // You can use this function on a button click to start the OAuth process,
     fetchView() {
       WorksapceApi.fetchWorkspaceView()
         .then((response) => {
@@ -907,6 +988,62 @@ export default {
         this.websocketOnError,
         this.websocketOnClose
       )
+    },
+    getCodeChartData(code) {
+      const { weekly_commits } = code
+      if (weekly_commits) {
+        // 把数据按日期排序
+        const sortData = Object.entries(weekly_commits).sort((a, b) => new Date(a[0]) - new Date(b[0]));
+        return {
+          xData: sortData.map(data => data[0]),
+          series: [
+            {
+              data: sortData.map(data => data[1]),
+              type: 'line',
+              name: 'commits',
+              areaStyle: { color: 'rgba(63,73,255,0.1)' },
+              smooth: true,
+              symbol: 'none',
+              connectNulls: true
+            }
+          ]
+        }
+      }
+      return {}
+    },
+    getIssueChartData(issue) {
+      const { weekly_open_issues, weekly_resolved_issues } = issue
+      if (weekly_open_issues && weekly_resolved_issues) {
+        // 把数据按日期排序
+        const sortOpenData = Object.entries(weekly_open_issues).sort((a, b) => new Date(a[0]) - new Date(b[0]));
+        const sortResolvedData = Object.entries(weekly_resolved_issues).sort((a, b) => new Date(a[0]) - new Date(b[0]));
+        return {
+          xData: sortOpenData.map(data => data[0]),
+          series: [
+            {
+              data: sortOpenData.map(data => data[1]),
+              name: 'open',
+              type: 'line',
+              stack: 'issue',
+              areaStyle: { color: 'rgba(63,73,255,0.1)' },
+              smooth: true,
+              symbol: 'none',
+              connectNulls: true
+            },
+            {
+              data: sortResolvedData.map(data => data[1]),
+              name: 'resolved',
+              type: 'line',
+              stack: 'issue',
+              areaStyle: { color: 'rgba(63,73,255,0.2)' },
+              smooth: true,
+              symbol: 'none',
+              connectNulls: true
+            }
+          ]
+        }
+      }
+      return {}
     }
   }
 }
@@ -988,7 +1125,7 @@ export default {
   // padding: 32px;
   padding-top: 12px;
   margin-top: -12px;
-  border-top: 1px solid #e1e1e1
+  border-top: 1px solid #e1e1e1;
 }
 
 .float-action-container {
diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index efeee79..c457f00 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -112,6 +112,17 @@
                       <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">
                         {{ issue.description }}
                       </p>
+                      <!-- Show attachment if existing -->
+                      <p v-if="issue.attachments" class="project-item-text">
+                      <div class="project-issue-container" v-for="(attachment, issue_index) in issue.attachments"
+                        :key="issue_index" :id="'project-issue-' + issue_index">
+                        <button class="btn btn-link"
+                          @click="downloadAttachedFile(issue.id, attachment.document_id, attachment.file_name)">
+                          {{ $t('Download') }} {{ attachment.file_name }}
+                        </button>
+                      </div>
+                      </p>
+                      <!-- Ending of showing attachment if existing -->
                       <div v-if="updatingIssue && updatingIssue.issue_id === issue.id"
                         class="project-issue-description-container">
                         <div class="project-issue-description">
@@ -196,6 +207,26 @@ export default {
           this.mnx_backendErrorHandler(error)
         })
     },
+    downloadAttachedFile(request_id, document_id, file_name) {
+      WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id)
+        .then((response) => {
+          console.log('resposne', response)
+          const link = document.createElement('a')
+          console.log('this is link', link)
+          link.href = response.data.download_url
+          link.download = file_name
+          link.target = '_blank'
+          document.body.appendChild(link)
+          link.click()
+
+          // clean up "a" element & remove ObjectURL
+          document.body.removeChild(link)
+          // URL.revokeObjectURL(href) //TODO: navigate to the preview page
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
     isOngoingProject(project) {
       return project.status == projectStatusEnum.ONGOING
     },
@@ -249,7 +280,9 @@ export default {
       fdata.append('issue_id', this.updatingIssue.issue_id)
       fdata.append('issue_title', this.updatingIssue.issue_title)
       fdata.append('issue_description', this.updatingIssue.issue_description)
-      fdata.append('issue_attachment', this.updatingIssue.issue_attachment)
+      if (this.updatingIssue.issue_attachment != null) {
+        fdata.append('issue_attachment', this.updatingIssue.issue_attachment)
+      }
       WorksapceApi.updateIssueForProduct(fdata)
         .then(() => {
           // this.$refs.issueBtn.blur()
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 58dabd6..39e268a 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -1,26 +1,48 @@
 <template>
   <div class="request-issue-container offcanvas-parent">
-    <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 request') }}
         </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-request-item-container">
-          <div v-for="(existingRequest, index) in existingRequests" :key="index" :id="'existing-request' + index"
-            class="accordion-item">
+          <div
+            v-for="(existingRequest, index) in existingRequests"
+            :key="index"
+            :id="'existing-request' + 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-request-collapse' + index" aria-expanded="false"
-                :aria-controls="'collapse' + index">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'existing-request-collapse' + index"
+                aria-expanded="false"
+                :aria-controls="'collapse' + index"
+              >
                 <span class="dashed-container">{{ existingRequest.title }}</span>
               </button>
             </h2>
-            <div :id="'existing-request-collapse' + index" class="accordion-collapse collapse"
-              :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-request-item-container">
+            <div
+              :id="'existing-request-collapse' + index"
+              class="accordion-collapse collapse"
+              :aria-labelledby="'existing-heading' + index"
+              data-bs-parent="#existing-request-item-container"
+            >
               <div class="accordion-body">
                 <button class="copy-existing-button" @click="copyRequest(existingRequest)">
                   {{ $t('Choose') }}
@@ -32,26 +54,52 @@
         </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 request 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"
+              >
                 <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="select-template-button btn btn-link" @click="selectTemplate(template)">
+                <button
+                  class="select-template-button btn btn-link"
+                  @click="selectTemplate(template)"
+                >
                   {{ $t('Apply') }}
                 </button>
                 <div class="template-content-textarea" v-html="template.content"></div>
@@ -62,23 +110,42 @@
       </div>
     </div>
     <div class="action-bar">
-      <input-selector :select-list="products" :selected="selectedProduct" @selectedChange="selectedChange" />
+      <input-selector
+        :select-list="products"
+        :selected="selectedProduct"
+        @selectedChange="selectedChange"
+      />
       <div class="upload-contianer">
         <label class="btn btn-link">
           <span v-if="!uploadFile">{{ $t('Upload file') }}</span>
           <span v-if="uploadFile">{{ uploadFile.name }}</span>
           <input type="file" hidden @change="handleFileUpload" />
         </label>
-        <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
+        <svg-icon
+          v-if="uploadFile"
+          icon="delete"
+          class-name="delete-icon"
+          @click.stop="clearFile"
+        />
       </div>
       <div class="flex-1" />
-      <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
+      <button
+        class="action-button 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="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
+      <button
+        class="action-button 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>
diff --git a/frontend/src/types/projectUtils.js b/frontend/src/types/projectUtils.js
index ff26a9a..bc57d05 100644
--- a/frontend/src/types/projectUtils.js
+++ b/frontend/src/types/projectUtils.js
@@ -56,7 +56,9 @@ const convertIntoToMilestoneStatus = function (i) {
       return p
     }
   }
-  return milestoneStatusEnum.DONE
+  return Object.keys(milestoneStatusEnum).find(
+    (key) => milestoneStatusEnum[key] === milestoneStatusEnum.DONE
+  )
 }
 
 const convertIntoToProjectIssueStatus = function (i) {
diff --git a/frontend/src/utils/backend/axios.js b/frontend/src/utils/backend/axios.js
index d247384..8af0d9d 100644
--- a/frontend/src/utils/backend/axios.js
+++ b/frontend/src/utils/backend/axios.js
@@ -1,7 +1,78 @@
 import axios from 'axios'
+import { jwtDecode } from 'jwt-decode'
 
 const backendAxios = axios.create({
   baseURL: ''
 })
 
+// Function to check if the token has expired
+function isTokenExpired(token) {
+  // Ensure token is a non-empty string
+  if (!token || typeof token !== 'string') {
+    console.error('Invalid token: must be a non-empty string')
+    return true // Treat it as expired
+  }
+
+  try {
+    const decodedToken = jwtDecode(token)
+    const now = Math.floor(Date.now() / 1000)
+    // Buffer as 5 minu = 300 seconds
+    return decodedToken.exp - 300 < now
+  } catch (error) {
+    console.error('Error decoding token:', error)
+    return true // Treat it as expired if decoding fails
+  }
+}
+
+// Interceptor for handling token expiration and refreshing
+backendAxios.interceptors.request.use(
+  async (config) => {
+    let accessToken = localStorage.getItem('access_token')
+    let refreshToken = localStorage.getItem('refresh_token')
+    // Fix: handle the case where localStorage returns 'null' as a string
+    if (accessToken === 'null') accessToken = null
+    if (refreshToken === 'null') refreshToken = null
+
+    // Check if the access token is expired
+    if (accessToken == null || refreshToken == null) {
+      return config
+    }
+    if (isTokenExpired(accessToken)) {
+      try {
+        // If access token is expired, refresh it using the refresh token
+        const response = await axios.post(
+          '/api/user/signin/refresh-token',
+          {},
+          {
+            headers: {
+              Authorization: `Bearer ${refreshToken}`,
+              'Content-Type': 'application/json'
+            }
+          }
+        )
+        accessToken = response.data.access_token
+        refreshToken = response.data.refresh_token
+
+        // Save the new access token to localStorage
+        localStorage.setItem('access_token', accessToken)
+        localStorage.setItem('refresh_token', refreshToken)
+      } catch (error) {
+        console.error('Token refresh failed. Redirecting to login.')
+        // Optionally, handle token refresh failure (e.g., redirect to login)
+        window.location.href = '/front-door'
+        return Promise.reject(error)
+      }
+    }
+
+    // Add the (new) access token to the request headers
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
 export { backendAxios }
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 2c9e3e5..a23737c 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -81,6 +81,33 @@ class WorksapceApi {
     return request
   }
 
+  static createZoomCall(zoom_access_token) {
+    let jwt = userUtils.getJwtToken() // Assuming you have a method to fetch the JWT token
+
+    // Make the POST request using backendAxios, with the Authorization header
+    try {
+      // Make the POST request using backendAxios, with the Authorization header
+      const response = backendAxios.post(
+        '/api/messages/trigger-video-call', // Your backend API for creating Zoom calls
+        {
+          token: zoom_access_token,
+          participants: ['freeleaps@gmail.com'] // Sending participants as an array of email addresses
+        },
+        {
+          headers: { Authorization: `Bearer ${jwt}` }
+        }
+      )
+
+      // Handle the response and update the meeting link
+      const result = response.data // Axios puts the response data in 'data'
+      document.getElementById('meeting-link').textContent =
+        `Join Zoom meeting: ${result.meeting_url}`
+    } catch (error) {
+      console.error('Failed to create Zoom call:', error)
+      document.getElementById('meeting-link').textContent = 'Failed to create Zoom meeting.'
+    }
+  }
+
   static fetchProject(project_id) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(
diff --git a/start_frontend.sh b/start_frontend.sh
old mode 100644
new mode 100755