diff --git a/frontend/src/assets/styles/_variables.scss b/frontend/src/assets/styles/_variables.scss
index a3e4d3e..3912ba3 100644
--- a/frontend/src/assets/styles/_variables.scss
+++ b/frontend/src/assets/styles/_variables.scss
@@ -45,7 +45,7 @@ $footer-height: 110px;
 $body-height: calc(100vh - $header-height - $footer-height);
 $body-width: 1288px;
 
-$accordion-icon-width: 1rem;
+$accordion-icon-width: 12px;
 $accordion-button-icon: url("data:image/svg+xml,<svg viewBox='0 0 1331 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M552.5504 896.512L45.1584 244.1216A102.4 102.4 0 0 1 125.952 78.848h1014.784a102.4 102.4 0 0 1 80.896 165.2736l-507.4944 652.288a102.4 102.4 0 0 1-161.6896 0z'></path></svg>");
 $accordion-button-active-icon: url("data:image/svg+xml,<svg viewBox='0 0 1331 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M552.5504 896.512L45.1584 244.1216A102.4 102.4 0 0 1 125.952 78.848h1014.784a102.4 102.4 0 0 1 80.896 165.2736l-507.4944 652.288a102.4 102.4 0 0 1-161.6896 0z'></path></svg>");
 // $default-font: "Lato", Verdana, Arial, sans-serif;
diff --git a/frontend/src/assets/styles/inputs.scss b/frontend/src/assets/styles/inputs.scss
index 0638b85..ef21bca 100644
--- a/frontend/src/assets/styles/inputs.scss
+++ b/frontend/src/assets/styles/inputs.scss
@@ -6,6 +6,14 @@
   @extend .form-control;
 }
 
+.form-input-back { display: flex; align-items: center; height: 32px; overflow: hidden; cursor: pointer; margin-bottom: 5px; color: $primary;
+  .input-back-icon {font-size: 32px;}
+  p {margin: 0; font-weight: 500;}
+  &:hover {
+    .input-back-icon {font-size: 35px;}
+  }
+}
+
 .input-container {
   width: 460px;
   height: 62px;
@@ -30,8 +38,9 @@
     @extend .ms-1;
     margin: 8px !important;
     border-radius: 12px !important;
-    font-weight: 500;
-    font-size: 16px;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 4px 12px;
     color: #f8f8f9;
   }
   .error-msg {
@@ -40,5 +49,6 @@
     color: #9ea2af;
     font-size: 18px;
     margin: 0;
+    white-space: nowrap;
   }
 }
diff --git a/frontend/src/components/EmptyContent.vue b/frontend/src/components/EmptyContent.vue
new file mode 100644
index 0000000..951b5fa
--- /dev/null
+++ b/frontend/src/components/EmptyContent.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="empty-content-container" :class="{autoFit : 'auto-fit'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmptyContent',
+  props: {
+    autoFit: { type: Boolean, default: false }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-content-container {
+  height: calc(100vh - 88px - 110px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.auto-fit {
+    width: 100%; 
+    height: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/components/SvgIcon.vue b/frontend/src/components/SvgIcon.vue
index 000f126..5f23ab8 100644
--- a/frontend/src/components/SvgIcon.vue
+++ b/frontend/src/components/SvgIcon.vue
@@ -34,10 +34,11 @@ export default {
 
 <style scoped>
 .svg-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
+  font-size: 16px;
 }
 </style>
diff --git a/frontend/src/footers/FooterGuest.vue b/frontend/src/footers/FooterGuest.vue
index cf31e95..b341351 100644
--- a/frontend/src/footers/FooterGuest.vue
+++ b/frontend/src/footers/FooterGuest.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex-colum-container bottom-container">
     <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" />
-    <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
+    <p class="bottom-text">© All rights reserved to Freeleaps LLC</p>
   </div>
 </template>
 <script>
diff --git a/frontend/src/footers/FooterUser.vue b/frontend/src/footers/FooterUser.vue
index 7b6f673..d87a96d 100644
--- a/frontend/src/footers/FooterUser.vue
+++ b/frontend/src/footers/FooterUser.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex-colum-container">
     <div class="bottom-div">
-      <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
+      <p class="bottom-text">© All rights reserved to Freeleaps LLC</p>
     </div>
   </div>
 </template>
diff --git a/frontend/src/headers/HeaderGuest.vue b/frontend/src/headers/HeaderGuest.vue
index fc6a2ef..c9f218f 100644
--- a/frontend/src/headers/HeaderGuest.vue
+++ b/frontend/src/headers/HeaderGuest.vue
@@ -112,6 +112,7 @@ export default {
     @extend .btn-link;
     color: black;
     font-size: 16px;
+    margin-right: 15px;
     text-decoration: none;
   }
 }
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index a882022..b1834c1 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -7,7 +7,7 @@
         @click="gotoMessages"
         :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
       >
-        <img alt="freeleaps logo" src="@/assets/message.png" />
+        <img alt="freeleaps message" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
         <button
@@ -271,6 +271,7 @@ export default {
     color: #6e7387;
     text-decoration: none;
     margin: 0 30px;
+    white-space: nowrap;
     position: relative;
 
     &.badge::after {
diff --git a/frontend/src/icons/back.svg b/frontend/src/icons/back.svg
new file mode 100644
index 0000000..199b233
--- /dev/null
+++ b/frontend/src/icons/back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="64" height="64"><path d="M442.4 256L192 512l250.4 256 53.12-54.304-161.856-165.504H832v-72.416H333.664l161.888-165.44L442.4 256z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 1aa74fd..b2e0700 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -48,7 +48,7 @@ export default {
   fd_3: 'One stop platform',
   fd_4: 'for hiring the best',
   fd_5: 'freelance software development talent',
-  'Email address': 'Email address',
+  'Enter email address to start': 'Enter email address to start',
   'GET STARTED': 'GET STARTED',
   'Please type in your email': 'Please type in your email',
   'Your Freeleaps User ID': 'Your Freeleaps User ID',
@@ -212,5 +212,8 @@ export default {
   'Issues management': 'Issues management',
   'Payment progress': 'Payment progress',
   Goal: 'Goal',
-  Message: 'Message'
+  Message: 'Message',
+  'Upload attachment': 'Upload attachment',
+  'Didn\'t get the email? Check junk folder or': 'Didn\'t get the email? Check junk folder or ',
+  'send again': 'send again'
 }
diff --git a/frontend/src/lang/index.js b/frontend/src/lang/index.js
index cbf0b71..9f68c85 100644
--- a/frontend/src/lang/index.js
+++ b/frontend/src/lang/index.js
@@ -8,6 +8,12 @@ const getDefaultLocale = () => {
   if (defaultLanguage) {
     return defaultLanguage
   }
+  const host = window.location.host
+  if (host.endsWith('.com')) {
+    return 'en'
+  } else if (host.endsWith('.cn')) {
+    return 'zh'
+  }
   const lan = (navigator.browserLanguage || navigator.language).toLowerCase()
   if (lan.indexOf('zh') > -1) {
     defaultLanguage = 'zh'
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 5c07a24..18191c2 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -48,7 +48,7 @@ export default {
   fd_3: '一站式服务',
   fd_4: '只为追求更好',
   fd_5: '软件开发人才',
-  'Email address': '电子邮箱',
+  'Enter email address to start': '电子邮箱',
   'GET STARTED': '开始',
   'Please type in your email': '请填写你的邮箱地址',
   'Your Freeleaps User ID': '设置你的用户ID',
@@ -205,5 +205,8 @@ export default {
   'Issued request': '项目请求总数',
   'Open requests': '待处理的项目请求',
   'Lines of code per week': '每周代码产量',
-  Message: '消息'
+  Message: '消息',
+  'Upload attachment': '上传附件',
+  'Didn\'t get the email? Check junk folder or': '没收到邮件？检查垃圾文件夹或',
+  'send again': '重新发送'
 }
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 29f33b9..50850e2 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -15,7 +15,7 @@
               placeholder="name@example.com"
               v-model="email"
             />
-            <label for="inputEmail">{{ $t('Email address') }}</label>
+            <label for="inputEmail">{{ $t('Enter email address to start') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
             {{ $t('GET STARTED') }}
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index db4d0ec..f1a17f3 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithCode">
+      <div class="form-input-back" @click="frontPage">
+        <svg-icon icon="back" class-name="input-back-icon" />
+        <p>{{email}}</p>
+      </div>
       <div class="input-container">
         <div class="form-group">
           <div class="input-group-container">
@@ -11,6 +15,7 @@
                 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>
@@ -18,16 +23,23 @@
           </div>
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
+        <p class="error-msg" 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">send again</button>
+          <span v-if="countdown !== 0" class="countdown">({{countdown}})</span>
+        </p>
       </div>
     </form>
   </div>
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { signinActionEnum } from '@/types'
 import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
+  components: { SvgIcon },
   props: {
     email: {
       required: true,
@@ -39,19 +51,51 @@ export default {
     return {
       code: null,
       message: null,
-      preferred_region: null
+      preferred_region: null,
+      countdown: 0,
+      timer: null
     }
   },
 
-  components: {},
-
   created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
     }
+    this.startCountdown()
+  },
+  unmounted() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
   },
   methods: {
+    frontPage() {
+      window.history.go(-1)
+    },
+    inputFocus() {
+      this.message = null
+    },
+    startCountdown() {
+      this.countdown = 60
+      this.timer = setInterval(() => {
+        if (this.countdown <= 0) {
+          clearInterval(this.timer)
+          this.timer = null
+          return
+        }
+        this.countdown = this.countdown - 1
+      }, 1000)
+    },
+    trySigninWithEmail() {
+      UserAuthApi.trySigninWithEmail(this.email, window.location.host)
+        .then(() => {
+          this.startCountdown()
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
     signinWithCode() {
       this.message = null
       if (this.code === null || this.code.length < 1) {
@@ -97,13 +141,16 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-// .input-code {
-//   @extend .input-control-item;
-//   @extend .me-1;
-// }
-
-// .btn-start {
-//   @extend .proceed-button;
-//   @extend .ms-1;
-// }
+.resend-btn {
+  font-weight: 500;
+  padding: 0;
+  font-size: 18px;
+  &:disabled {
+    color: $primary;
+    opacity: .78;
+  }
+}
+.countdown {
+  color: $primary;
+}
 </style>
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index d33c621..270edea 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithPassword">
+      <div class="form-input-back" @click="frontPage">
+        <svg-icon icon="back" class-name="input-back-icon" />
+        <p>{{email}}</p>
+      </div>
       <div class="input-container">
         <div class="form-group">
           <div class="input-group-container">
@@ -30,6 +34,7 @@
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { signinActionEnum } from '@/types'
 import { UserAuthApi } from '@/utils/index'
 export default {
@@ -48,7 +53,7 @@ export default {
     }
   },
 
-  components: {},
+  components: { SvgIcon },
 
   created() {},
   mounted() {
@@ -57,6 +62,9 @@ export default {
     }
   },
   methods: {
+    frontPage() {
+      window.history.go(-1)
+    },
     signinWithPassword() {
       this.message = null
       if (this.password === null || this.password.length < 1) {
@@ -124,6 +132,7 @@ export default {
   @extend .btn-link;
   padding: 0;
   font-size: 16px;
+  font-weight: 500;
   margin-left: 15px;
 }
 </style>
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 41cf6ee..b0430a8 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -4,7 +4,6 @@
       class="directory_container"
       v-for="(directory, index) in directories"
       :key="index"
-      @click="view_link(directory)"
     >
       <div
         class="directory_cover_image"
@@ -12,7 +11,7 @@
       />
       <p class="directory-title">{{ directory.title_text }}</p>
       <p class="directory-subtitle">{{ directory.summary_text }}</p>
-      <button class="btn btn-link">{{ $t('Read More') }}</button>
+      <button class="btn btn-link directory-btn" @click="view_link(directory)">{{ $t('Read More') }}</button>
     </div>
   </div>
 </template>
@@ -56,7 +55,6 @@ export default {
 .directory_container {
   @extend .container;
   padding: 0;
-  cursor: pointer;
   text-align: left;
 
   .btn-link {
@@ -78,13 +76,17 @@ export default {
 
 .directory-title {
   font-size: 48px;
-  // font-weight: bold;
+  font-weight: 600;
   color: #18181a;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 
 .directory-subtitle {
   font-size: 14px;
   color: #666666;
+  margin-bottom: 5px;
+}
+.directory-btn {
+  font-weight: 600;
 }
 </style>
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index 45728cd..4befa8b 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -1,106 +1,57 @@
 <template>
   <div class="making-proposal-container offcanvas-parent">
     <div class="making-proposal-content">
-      <div
-        class="offcanvas offcanvas-end offcanvas-container"
-        tabindex="-1"
-        id="offcanvas-copy-existing"
-        aria-labelledby="offcanvas-copy-existing"
-      >
+      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
+        aria-labelledby="offcanvas-copy-existing">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-copy-existing">
             {{ $t('Copy from existing proposals') }}
           </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="existing-proposal-item-container">
-            <div
-              v-for="(existingProposal, index) in existingProposals"
-              :key="index"
-              :id="'existing-proposal' + index"
-              class="accordion-item"
-            >
+            <div v-for="(existingProposal, index) in existingProposals" :key="index" :id="'existing-proposal' + index"
+              class="accordion-item">
               <h2 class="accordion-header" :id="'existing-heading' + index">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'existing-proposal-collapse' + index"
-                  aria-expanded="false"
-                  :aria-controls="'collapse' + index"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
+                  :aria-controls="'collapse' + index">
                   <span class="dashed-container">{{ existingProposal.request.title }}</span>
                 </button>
               </h2>
-              <div
-                :id="'existing-proposal-collapse' + index"
-                class="accordion-collapse collapse"
-                :aria-labelledby="'existing-heading' + index"
-                data-bs-parent="#existing-proposal-item-container"
-              >
+              <div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
+                :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
                 <div class="accordion-body">
                   <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                     {{ $t('Copy') }}
                   </button>
-                  <div
-                    class="existing-request-content-text"
-                    v-html="existingProposal.content"
-                  ></div>
+                  <div class="existing-request-content-text" v-html="existingProposal.content"></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        class="offcanvas offcanvas-end offcanvas-container"
-        tabindex="-1"
-        id="offcanvas-template"
-        aria-labelledby="offcanvas-template"
-      >
+      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
+        aria-labelledby="offcanvas-template">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-template">
             {{ $t('Apply proposal template') }}
           </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="template-item-container">
-            <div
-              v-for="(template, index) in templates"
-              :key="index"
-              :id="'template' + index"
-              class="accordion-item"
-            >
+            <div v-for="(template, index) in templates" :key="index" :id="'template' + index" class="accordion-item">
               <h2 class="accordion-header" :id="'heading' + index">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'collapse' + index"
-                  aria-expanded="false"
-                  :aria-controls="'collapse' + index"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                   <span class="dashed-container">{{ template.title }}</span>
                 </button>
               </h2>
-              <div
-                :id="'collapse' + index"
-                class="accordion-collapse collapse"
-                :aria-labelledby="'heading' + index"
-                data-bs-parent="#template-item-container"
-              >
+              <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
+                data-bs-parent="#template-item-container">
                 <div class="accordion-body">
                   <button class="load-template-button" @click="applyTemplate(template)">
                     {{ $t('Apply') }}
@@ -116,22 +67,14 @@
         <div class="accordion accordion-list" id="accordion-request-container">
           <div class="accordion-item">
             <h2 class="accordion-header">
-              <button
-                class="accordion-button"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-request-content"
-                aria-expanded="false"
-                aria-controls="collapse-request-content"
-              >
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-request-content" aria-expanded="false"
+                aria-controls="collapse-request-content">
                 <span class="dashed-container">{{ request.title }}</span>
               </button>
             </h2>
-            <div
-              id="collapse-request-content"
-              class="accordion-collapse collapse"
-              data-bs-parent="#accordion-request-container"
-            >
+            <div id="collapse-request-content" class="accordion-collapse collapse"
+              data-bs-parent="#accordion-request-container">
               <div class="accordion-body">
                 <div class="request-content" v-html="request.content"></div>
               </div>
@@ -143,23 +86,13 @@
         <div class="proposal-header-container">
           <label class="proposal-label">{{ $t('Proposal') }}:</label>
           <div class="header-bar">
-            <button
-              class="btn btn-link"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-template"
-              aria-controls="offcanvas-template"
-            >
+            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
+              aria-controls="offcanvas-template">
               <svg-icon icon="btn-templates" />
               {{ $t('Templates') }}
             </button>
-            <button
-              class="btn btn-link"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-copy-existing"
-              aria-controls="offcanvas-copy-existing"
-            >
+            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
               <svg-icon icon="btn-history" />
               {{ $t('Copy') }}
             </button>
@@ -175,12 +108,8 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-payment-content-${index}`"
-                      type="number"
-                      v-model="stage.payment"
-                    />
+                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
+                      v-model="stage.payment" />
                     <label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label>
                   </div>
                   <span class="btn-start">{{ stage.currency }}</span>
@@ -191,12 +120,8 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-duration-content-${index}`"
-                      type="number"
-                      v-model="stage.duration_in_days"
-                    />
+                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
+                      v-model="stage.duration_in_days" />
                     <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
                   </div>
                   <span class="btn-start">{{ $t('day(s)') }}</span>
@@ -207,12 +132,7 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-note-content-${index}`"
-                      type="text"
-                      v-model="stage.note"
-                    />
+                    <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
                     <label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label>
                   </div>
                 </div>
@@ -247,12 +167,7 @@
               <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>
           <!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
           <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->
@@ -279,6 +194,7 @@ import {
 } from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
+import { WorksapceApi } from '../../../utils';
 export default {
   name: 'MakeProposal',
   components: { SvgIcon, FreeleapsEditor },
@@ -335,40 +251,33 @@ export default {
     coverLetterDone(event) {
       this.proposal.content = event.target.innerHTML
     },
-    submit() {
+    attachFile() {
       if (this.uploadFile) {
-        DocumentApi.upload(this.uploadFile)
+        WorksapceApi.attachFileToRequest(this.requestId, this.uploadFile)
           .then((response) => {
-            return RequestHubApi.makeProposalForRequest(
-              this.requestId,
-              this.proposal.content,
-              this.proposal.stages,
-              response.data.document_id
-            )
-          })
-          .then((response) => {
-            this.proposal_id = response.data.proposal_id
-            this.mnx_navToRequestSubmitted(this.proposal_id)
-          })
-          .catch((error) => {
-            this.mnx_backendErrorHandler(error)
-          })
-      } else {
-        RequestHubApi.makeProposalForRequest(
-          this.requestId,
-          this.proposal.content,
-          this.proposal.stages,
-          null
-        )
-          .then((response) => {
-            let proposal_id = response.data
-            this.mnx_navToProposalSubmitted(proposal_id)
+            this.mnx_navToProposalSubmitted(this.requestId)
           })
           .catch((error) => {
             this.mnx_backendErrorHandler(error)
           })
       }
     },
+    submit() {
+      RequestHubApi.makeProposalForRequest(
+        this.requestId,
+        this.proposal.content,
+        this.proposal.stages,
+        null
+      ).then((response) => {
+        if (this.uploadFile) {
+          this.attachFile()
+        } else {
+          this.mnx_navToRequestSubmitted(this.requestId)
+        }
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      })
+    },
     loadFrom() {
       switch (Number.parseInt(this.loadingMode, 10)) {
         case proposingModelEnum.NO_LOADING: {
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index beea8fd..c1e8c70 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,22 +2,13 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div
-        class="accordion accordion-list"
-        v-for="(project, project_index) in projects"
-        :key="project_index"
-        :id="project.id"
-      >
+      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
+        :id="project.id">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              :data-bs-target="'#collapse-' + project_index"
-              aria-expanded="false"
-              :aria-controls="'collapse-' + project_index"
-            >
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
+              :aria-controls="'collapse-' + project_index">
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -44,11 +35,7 @@
               </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)">
@@ -56,30 +43,17 @@
                 </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>
@@ -112,23 +86,16 @@
                         </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>
@@ -136,12 +103,9 @@
                           <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">
@@ -176,12 +140,9 @@
                 <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>
@@ -199,40 +160,24 @@
                 </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>
@@ -240,14 +185,9 @@
               <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>
@@ -283,26 +223,20 @@
                       </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>
@@ -310,7 +244,7 @@
                               <span class="project-milestones-table-label">{{ $t('Goal') }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.description
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
@@ -318,14 +252,14 @@
                               <span class="project-milestones-table-label">{{ $t('Status') }}</span>
                               <span class="project-milestones-table-span">{{
                                 fromIntToMilestoneStatus(milestone.status)
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Payment')
-                              }}</span>
+                                }}</span>
                               <span class="project-milestones-table-span">
                                 {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
                                 {{ project.project.progress.payment_currency }}
@@ -337,20 +271,15 @@
                               <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> -->
@@ -361,10 +290,8 @@
                           <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>
@@ -376,14 +303,9 @@
                 </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>
@@ -406,22 +328,13 @@
                       </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>
@@ -437,14 +350,9 @@
                 </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>
@@ -467,11 +375,8 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    id="collapse-project-issue"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-issue"
-                  >
+                  <div id="collapse-project-issue" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-issue">
                     <div class="project-code-git-url-container">
                       <button class="project-code-copy-git-url" @click="gotoIssueManage(project)">
                         {{ $t('Issues management') }}
diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index b6b1ab4..a7bc3e1 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -123,8 +123,15 @@
                     :data-bs-parent="'#collapse-project-issue-details' + issue_index"
                   >
                     <div class="project-issue-description-container">
-                      <div class="project-issue-description">
+                      <div v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-issue-description">
                         <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        <button
+                          :hidden="!showIssueActionButton(project.project, issue, 'Edit')"
+                          class="project-issue-description-btn"
+                          @click="editIssue(issue)"
+                        >
+                          {{ $t('Edit') }}
+                        </button>
                         <button
                           :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
                           class="project-issue-description-btn"
@@ -147,7 +154,44 @@
                           {{ $t('Reopen') }}
                         </button>
                       </div>
-                      <p class="project-item-text">{{ issue.description }}</p>
+                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{ issue.description }}</p>
+                      <div v-if="updatingIssue && updatingIssue.issue_id === issue.id" class="project-issue-description-container">
+                        <div class="project-issue-description">
+                          <label class="project-item-label">{{ $t('Issue title') }}</label>
+                          <button
+                            class="project-issue-description-btn"
+                            @click="updateIssueCancel"
+                          >
+                            {{ $t('Cancel') }}
+                          </button>
+                          <button
+                            class="project-issue-description-btn"
+                            @click="updateIssue"
+                          >
+                            {{ $t('Update') }}
+                          </button>
+                        </div>
+                        <input type="text" v-model="updatingIssue.issue_title">
+                        <div class="project-issue-description">
+                          <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        </div>
+                        <textarea type="text" v-model="updatingIssue.issue_description" />
+                        <div class="file-upload-container">
+                          <div class="upload-contianer">
+                            <label class="btn btn-link">
+                              <span v-if="!updatingIssue.issue_attachment">{{ $t('Upload attachment') }}</span>
+                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name }}</span>
+                              <input type="file" hidden @change="handleFileUpload" />
+                            </label>
+                            <svg-icon
+                              v-if="updatingIssue.issue_attachment"
+                              icon="delete"
+                              class-name="delete-icon"
+                              @click.stop="clearFile"
+                            />
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -177,7 +221,9 @@ export default {
   data() {
     return {
       project: {},
-      newIssueDescriptions: ''
+      newIssueDescriptions: '',
+      updatingIssue: null,
+      uploadFile: null
     }
   },
   mounted() {
@@ -232,15 +278,47 @@ export default {
           this.mnx_backendErrorHandler(error)
         })
     },
+    editIssue(issue) {
+      console.log('edit issue', issue)
+      this.updatingIssue = {
+        issue_id: issue.id,
+        issue_title: issue.title,
+        issue_description: issue.description,
+        issue_attachment: issue.attachment
+      }
+    },
+    updateIssue() {
+      // console.log('updateIssue', this.updatingIssue)
+      WorksapceApi.updateIssueForProduct(this.updatingIssue)
+        .then(() => {
+          // this.$refs.issueBtn.blur()
+          // this.$refs.issueAddBtn.click()
+          this.fetchView()
+          this.updatingIssue = null
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    updateIssueCancel() {
+      this.updatingIssue = null
+    },
+    handleFileUpload(event) {
+      this.updatingIssue.issue_attachment = event.target.files[0]
+    },
+    clearFile() {
+      this.updatingIssue.issue_attachment = null
+    },
     showIssueActionButton(project, issue, button_text) {
+      if (button_text === 'Edit') return true
       switch (issue.status) {
         case projectIssueStatusEnum.OPEN:
-          if (button_text === 'Resolve') {
+          if (button_text === 'Resolve' || button_text === 'Edit') {
             return project.providers.includes(project.current_user_id)
           }
           break
         case 1:
-          if (button_text === 'Reopen' || button_text === 'Confirm') {
+          if (button_text === 'Reopen' || button_text === 'Confirm' || button_text === 'Edit') {
             return project.issuers.includes(project.current_user_id)
           }
           break
@@ -399,6 +477,7 @@ export default {
 
 .project-issue-description-container {
   padding: 12px;
+  text-align: left;
 
   textarea {
     padding: 12px;
@@ -410,6 +489,16 @@ export default {
     width: 100%;
     margin-bottom: 12px;
   }
+
+  input {
+    padding: 5px 12px;
+    border-radius: 12px;
+    border: 1px solid #e1e1e1;
+    box-shadow: none;
+    outline: none;
+    width: 280px;
+    margin-bottom: 12px;
+  }
 }
 
 .project-issue-description {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 8481899..de42e51 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -1,48 +1,26 @@
 <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="btn btn-link" @click="copyRequest(existingRequest)">
                   {{ $t('Copy') }}
@@ -54,52 +32,26 @@
         </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>
@@ -110,42 +62,23 @@
       </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/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 8243c2b..02f1dd9 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -46,7 +46,6 @@ import UserHistory from '@/pages/user/account/UserHistory.vue'
 import Workspace from '@/pages/user/workspace/Home.vue'
 
 import FooterGuest from '@/footers/FooterGuest.vue'
-import FooterUser from '@/footers/FooterUser.vue'
 
 import HeaderGuest from '@/headers/HeaderGuest.vue'
 import HeaderUser from '@/headers/HeaderUser.vue'
@@ -152,14 +151,14 @@ const router = createRouter({
       name: 'my-workspace-requests',
       path: '/my-workspace-requests',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceRequests, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceRequests, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     {
       name: 'request-issue',
       path: '/request-issue/:loadFrom',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -176,14 +175,14 @@ const router = createRouter({
       name: 'project-issue',
       path: '/project-issue/:project_id',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProjectIssue, footer: FooterUser, header: HeaderUser },
+      components: { default: ProjectIssue, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'request-issue2',
       path: '/request-issue/:loadFrom/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -200,14 +199,14 @@ const router = createRouter({
       name: 'request-submitted',
       path: '/request-submitted/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: RequestSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'my-workspace-proposals',
       path: '/my-workspace-proposals',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProposals, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceProposals, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     //message hub
@@ -215,34 +214,34 @@ const router = createRouter({
       name: 'message-hub',
       path: '/message-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'message' },
-      components: { default: MessageHub, footer: FooterUser, header: HeaderUser }
+      components: { default: MessageHub, footer: FooterGuest, header: HeaderUser }
     },
     // provider hub
     {
       name: 'provider-hub',
       path: '/provider-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Providers' },
-      components: { default: ProviderHub, footer: FooterUser, header: HeaderUser }
+      components: { default: ProviderHub, footer: FooterGuest, header: HeaderUser }
     },
     //request hub
     {
       name: 'request-hub',
       path: '/request-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Requests' },
-      components: { default: RequestHub, footer: FooterUser, header: HeaderUser }
+      components: { default: RequestHub, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'make-proposal',
       path: '/make-proposal/:requestId/:loadingMode',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MakeProposal, footer: FooterUser, header: HeaderUser },
+      components: { default: MakeProposal, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'proposal-submitted',
       path: '/proposal-submitted/:proposalId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProposalSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: ProposalSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
 
@@ -250,7 +249,7 @@ const router = createRouter({
       name: 'request-manage',
       path: '/request-manage/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestManage, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestManage, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
@@ -259,7 +258,7 @@ const router = createRouter({
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: {
         default: ReviewProposalBeforeAccetance,
-        footer: FooterUser,
+        footer: FooterGuest,
         header: HeaderUser
       },
       props: true
@@ -269,49 +268,49 @@ const router = createRouter({
       name: 'user-profile',
       path: '/user-profile',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserProfile, footer: FooterUser, header: HeaderUser }
+      components: { default: UserProfile, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'user-history',
       path: '/user-history',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserHistory, footer: FooterUser, header: HeaderUser }
+      components: { default: UserHistory, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'work-space',
       path: '/work-space',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
-      components: { default: Workspace, footer: FooterUser, header: HeaderUser }
+      components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'lab-home',
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: LabHome, footer: FooterUser, header: HeaderUser }
+      components: { default: LabHome, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'machine-translation',
       path: '/machine-translation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TranslationHome, footer: FooterUser, header: HeaderUser }
+      components: { default: TranslationHome, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'task-completion',
       path: '/task-completion',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TaskCompletion, footer: FooterUser, header: HeaderUser }
+      components: { default: TaskCompletion, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'multiturn-chat',
       path: '/multiturn-chat',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MultiturnChat, footer: FooterUser, header: HeaderUser }
+      components: { default: MultiturnChat, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'image-generation',
       path: '/image-generation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ImageGeneration, footer: FooterUser, header: HeaderUser }
+      components: { default: ImageGeneration, footer: FooterGuest, header: HeaderUser }
     }
   ],
 
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 208902f..6413866 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -126,6 +126,46 @@ class WorksapceApi {
     return request
   }
 
+  static updateIssueForProduct(data) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/update-issue-for-product',
+      data,
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
+  static fetchProductIssues(product_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/fetch-product-issues',
+      {
+        product_id: product_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
+  static fetchProductCodeDepot(product_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/fetch-product-code-depot',
+      {
+        product_id: product_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
   static setProductIssueStatus(issue_id, status) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index d77c63e..ede8049 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -36,23 +36,19 @@ export default defineConfig(({ command, mode }) => {
       createSvgIconsPlugin({
         iconDirs: [resolve('src/icons')],
         symbolId: 'icon-[name]'
-      }),
+      })
     ],
     resolve: {
       root: resolve('src'),
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
-        '~bootstrap': resolve('node_modules/bootstrap'),
-        '~quill': resolve('node_modules/quill'),
+        '~bootstrap': resolve('node_modules/bootstrap')
       }
     },
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "@/assets/styles/main.scss";`
-        },
-        styl: {
-          additionalData: ` @import '~quill/dist/quill.core.css';'~quill/dist/quill.bubble.css';'~quill/dist/quill.snow.css';`
         }
       }
     },
@@ -89,7 +85,31 @@ export default defineConfig(({ command, mode }) => {
       supported: {
         'top-level-await': true //browsers can handle top-level-await features
       },
-    }
+    },
+    // build: {
+    //   chunkSizeWarningLimit: 1500,
+    //   rollupOptions: {
+    //     output: {
+    //       manualChunks(id) {
+    //         if (id.includes("node_modules")) {
+    //           return id.toString().split("node_modules/")[1].split("/")[0].toString()
+    //         }
+    //       },
+    //       entryFileNames: 'js/[name].[hash].js',
+    //       assetFileNames: (assetInfo) => {
+    //         if (assetInfo.name.endsWith(".css")) {
+    //           return "css/[name]-[hash].css";
+    //         }
+    //         return "assets/[name]-[hash].[ext]";
+    //       },
+    //       chunkFileNames: (chunkInfo) => {
+    //         const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
+    //         const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
+    //         return `js/${fileName}/[name].[hash].js`;
+    //       },
+    //     }
+    //   }
+    // }
   }
 }
 )