diff --git a/env.sh b/env.sh
index f8637a7..f14b723 100644
--- a/env.sh
+++ b/env.sh
@@ -1,4 +1,4 @@
-INT_DIR="../freeleaps-int/sites/freeleaps/deploy"
+INT_DIR="@/freeleaps-int/sites/freeleaps/deploy"
 DEPLOY_DIR="deploy"
 FE_ENV="$DEPLOY_DIR/.fe.env"
 if  [ -d "$INT_DIR" ];  then
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index b07df3d..e20f556 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -86,7 +86,7 @@
   </div>
 </template>
 <script>
-import { UserAuthApi } from '../utils/backend/index'
+import { UserAuthApi } from '@/utils/backend/index'
 
 export default {
   name: 'HeaderGuest',
diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index 70a1035..cb3870d 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -1,4 +1,4 @@
-import { userRoleEnum } from '../types/index'
+import { userRoleEnum } from '@/types/index'
 export default {
   methods: {
     //public
diff --git a/frontend/src/mixins/userAuth.js b/frontend/src/mixins/userAuth.js
index bf4379d..32efc4a 100644
--- a/frontend/src/mixins/userAuth.js
+++ b/frontend/src/mixins/userAuth.js
@@ -1,4 +1,4 @@
-import { signinActionEnum } from '../types/index'
+import { signinActionEnum } from '@/types/index'
 export default {
   methods: {
     mnx_userSignedin(authResposne, keepMeSignedin) {
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index f9b3e2f..76b3493 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -36,8 +36,8 @@ import {
   UserAuthApi,
   applicantValidator
   // userProfileValidator,
-} from '../../utils/index'
-import { signinActionEnum } from '../../types/index'
+} from '@/utils/index'
+import { signinActionEnum } from '@/types/index'
 
 export default {
   name: 'FrontDoor',
diff --git a/frontend/src/pages/guest/NewUserSetFlid.vue b/frontend/src/pages/guest/NewUserSetFlid.vue
index 0a49d6f..d210b50 100644
--- a/frontend/src/pages/guest/NewUserSetFlid.vue
+++ b/frontend/src/pages/guest/NewUserSetFlid.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { UserAuthApi } from '../../utils/index'
-import { signinActionEnum } from '../../types/index'
+import { UserAuthApi } from '@/utils/index'
+import { signinActionEnum } from '@/types/index'
 export default {
   name: 'NewUserSetFlid',
   props: {
diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index 6c12765..2367876 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { UserAuthApi, passwordValidator } from '../../utils/index'
+import { UserAuthApi, passwordValidator } from '@/utils/index'
 export default {
   name: 'NewUserSetPassword',
   props: {},
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index 98573a5..3e19924 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { signinActionEnum } from '../../types'
-import { UserAuthApi } from '../../utils/index'
+import { signinActionEnum } from '@/types'
+import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
   props: {
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 3bd2d74..8f35cd1 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import { signinActionEnum } from '../../types'
-import { UserAuthApi } from '../../utils/index'
+import { signinActionEnum } from '@/types'
+import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
   props: {
diff --git a/frontend/src/pages/lab/translation/Home.vue b/frontend/src/pages/lab/translation/Home.vue
index 32994c7..02226c5 100644
--- a/frontend/src/pages/lab/translation/Home.vue
+++ b/frontend/src/pages/lab/translation/Home.vue
@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import { LabApi } from '../../../utils/index'
+import { LabApi } from '@/utils/index'
 export default {
   name: 'TranslationHome',
   components: {},
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 6e1287a..4fbd734 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'About',
   components: {},
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index d226d4f..bbd108c 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'Blogs',
   components: {},
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index f99041d..464e6ab 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'Career',
   components: {},
diff --git a/frontend/src/pages/public/Contact.vue b/frontend/src/pages/public/Contact.vue
index 713e8b1..916892e 100644
--- a/frontend/src/pages/public/Contact.vue
+++ b/frontend/src/pages/public/Contact.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'Contact',
   components: {},
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index e8300f1..7608a70 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -4,9 +4,6 @@
   </div>
 </template>
 <script>
-// import { pdfjsLib } from '../../plugins/index'
-// import { ContentApi } from '../../utils/index'
-// import { Buffer } from 'buffer'
 import { ContentApi } from '@/utils/index'
 import PDFReader from '@/components/PDFReader.vue'
 export default {
diff --git a/frontend/src/pages/user/account/UserFinance.vue b/frontend/src/pages/user/account/UserFinance.vue
index 3c711d7..517554f 100644
--- a/frontend/src/pages/user/account/UserFinance.vue
+++ b/frontend/src/pages/user/account/UserFinance.vue
@@ -8,7 +8,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'UserFinance',
   props: {},
diff --git a/frontend/src/pages/user/account/UserHistory.vue b/frontend/src/pages/user/account/UserHistory.vue
index bff79a8..35bd5d4 100644
--- a/frontend/src/pages/user/account/UserHistory.vue
+++ b/frontend/src/pages/user/account/UserHistory.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { HistoryApi } from '../../../utils/index'
+import { HistoryApi } from '@/utils/index'
 export default {
   name: 'UserHistory',
   props: {},
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index 8df333b..463863a 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -710,14 +710,9 @@
 
 <script>
 import SvgIcon from '@/components/SvgIcon.vue'
-import { moneyCollectionTypeEnum } from '../../../types/index'
+import { moneyCollectionTypeEnum } from '@/types/index'
 
-import {
-  UserProfileApi,
-  elementHandler,
-  textAreaAujuster,
-  passwordValidator
-} from '../../../utils/index'
+import { UserProfileApi, elementHandler, textAreaAujuster, passwordValidator } from '@/utils/index'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 
 export default {
diff --git a/frontend/src/pages/user/account/UserSubscription.vue b/frontend/src/pages/user/account/UserSubscription.vue
index e02ad92..09fc662 100644
--- a/frontend/src/pages/user/account/UserSubscription.vue
+++ b/frontend/src/pages/user/account/UserSubscription.vue
@@ -8,7 +8,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'UserSubscription',
   props: {},
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index a322ece..da5764f 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -78,8 +78,8 @@
   </div>
 </template>
 <script>
-import SvgIcon from '../../../components/SvgIcon.vue'
-import { MessageHubApi, DateUtils } from '../../../utils/index'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { MessageHubApi, DateUtils } from '@/utils/index'
 export default {
   components: { SvgIcon },
   name: 'MessageHub',
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index d6d51c5..5bda75a 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -266,7 +266,7 @@
 import {
   ProviderHubApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'ProviderHub',
   props: {},
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 99b14d3..7a8fe78 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -180,8 +180,8 @@
 </template>
 
 <script>
-import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '../../../utils/index'
-import { proposingModelEnum } from '../../../types/index'
+import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '@/utils/index'
+import { proposingModelEnum } from '@/types/index'
 export default {
   name: 'RequestHub',
   props: {},
diff --git a/frontend/src/pages/user/requests/ProposalSubmitted.vue b/frontend/src/pages/user/requests/ProposalSubmitted.vue
index e5e5d31..af1aec9 100644
--- a/frontend/src/pages/user/requests/ProposalSubmitted.vue
+++ b/frontend/src/pages/user/requests/ProposalSubmitted.vue
@@ -15,7 +15,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'ProposalSubmitted',
   props: {
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index 30cf826..5e41d57 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -291,14 +291,14 @@
 </template>
 
 <script>
-import { requestHubUtils, RequestHubApi } from '../../../utils/index'
+import { requestHubUtils, RequestHubApi } from '@/utils/index'
 import {
   proposingModelEnum,
   preparedProposal,
   preparedProposalStage,
   preparedProposalSummary,
   proposalUtils
-} from '../../../types/index'
+} from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 export default {
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index c26a39b..0269c2c 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,13 +2,22 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
-        :id="project.id">
+      <div
+        class="accordion accordion-list"
+        v-for="(project, project_index) in projects"
+        :key="project_index"
+        :id="project.id"
+      >
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
-              :aria-controls="'collapse-' + project_index">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index"
+              aria-expanded="false"
+              :aria-controls="'collapse-' + project_index"
+            >
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -35,7 +44,11 @@
               </div>
             </button>
           </h2>
-          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
+          <div
+            :id="'collapse-' + project_index"
+            class="accordion-collapse collapse"
+            :data-bs-parent="'#' + project.id"
+          >
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -43,17 +56,30 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  contenteditable="false"></div>
+                <div
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
               <div class="project-request-proposals-container">
-                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
-                  :id="proposal.id">
+                <div
+                  class="accordion"
+                  v-for="(proposal, proposal_index) in project.proposals"
+                  :key="proposal_index"
+                  :id="proposal.id"
+                >
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
-                        :aria-controls="'collapse-request-proposal' + proposal_index">
+                      <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
+                        aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index"
+                      >
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">Quote</label>
@@ -84,14 +110,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)"
+                          >
                             reject
                           </button>
-                          <button class="request-proposal-action-accept" @click="acceptProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)"
+                          >
                             accept
                           </button>
                         </div>
@@ -99,9 +134,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">Payment</label>
                               <p class="project-item-text">
@@ -134,9 +172,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">Payment</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -152,27 +193,45 @@
                 </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" 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">+ 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">
                     <div class="project-invite-collaborator-form">
                       <label class="project-item-label">Input E-mail to invite other</label>
-                      <input class="project-invite-collaborator-input" v-model="newInviteCollaborator[project_index]" />
+                      <input
+                        class="project-invite-collaborator-input"
+                        v-model="newInviteCollaborator[project_index]"
+                      />
                     </div>
-                    <button class="project-invite-collaborator-action-button" @click="
-                      inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                      ">
+                    <button
+                      class="project-invite-collaborator-action-button"
+                      @click="
+                        inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
+                      "
+                    >
                       Submit
                     </button>
                   </div>
@@ -181,9 +240,14 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
-                      aria-controls="collapse-project-milestone">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-milestone"
+                    >
                       <div class="project-milestone-bar-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">Progress</label>
@@ -217,11 +281,18 @@
                       </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"
+                  >
                     <div class="project-milestones-containter">
-                      <div class="project-milestone-container" v-for="milestone in project.project.progress.milestones"
-                        :key="milestone.index" :id="'project-milestone-' + milestone.index">
+                      <div
+                        class="project-milestone-container"
+                        v-for="milestone in project.project.progress.milestones"
+                        :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index"
+                      >
                         <div class="project-milestone-index">
                           <label class="project-item-label">Milestone</label>
                           <p class="project-item-text">
@@ -254,17 +325,21 @@
                           </p>
                         </div>
                         <div class="project-milestone-action-button-container">
-                          <button class="project-milestone-action-button"
+                          <button
+                            class="project-milestone-action-button"
                             :disabled="isMilestoneActionButtonDisabled(project.project, milestone)"
                             :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                            @click="handleMilestoneAction(project.project, milestone)">
+                            @click="handleMilestoneAction(project.project, milestone)"
+                          >
                             {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                           </button>
                         </div>
                         <div v-if="this.qrCode.index === milestone.index">
                           <img width="100" height="100" :src="this.qrCode.imageUrl" />
-                          <button class="project-milestone-payment-confirm-button"
-                            @click="handlePaymentAction(project.project, milestone)">
+                          <button
+                            class="project-milestone-payment-confirm-button"
+                            @click="handlePaymentAction(project.project, milestone)"
+                          >
                             Mark As Paid
                           </button>
                         </div>
@@ -274,8 +349,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">
                         <div class="project-code-git-status">
                           <label class="project-item-label">Code Depot</label>
@@ -298,13 +379,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"}'
+                        >
                           copy git url
                         </button>
                       </div>
@@ -317,9 +407,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-issue" aria-expanded="false"
-                      aria-controls="collapse-project-issue">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue"
+                    >
                       <div class="project-issue-bar-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">Open issues</label>
@@ -342,34 +437,51 @@
                       </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-issue-statistics-container">
                       <button class="project-issue-manage-button">Manage</button>
                       TO BE IMPLEMENTED.
                     </div> -->
                     <div class="project-new-issue-containter">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapse-project-new-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-new-issue"
+                        aria-expanded="false"
+                        aria-controls="collapse-project-issue"
+                      >
                         <div class="project-add-new-issue">+ Add Issue</div>
                       </button>
-                      <div id="collapse-project-new-issue" class="accordion-collapse collapse"
-                        data-bs-parent="#collapse-project-new-issue">
+                      <div
+                        id="collapse-project-new-issue"
+                        class="accordion-collapse collapse"
+                        data-bs-parent="#collapse-project-new-issue"
+                      >
                         <div class="project-issue-description-container">
                           <div class="project-issue-description">
                             <label class="project-item-label">New issue description</label>
-                            <textarea class="project-new-issue-textarea" type="text"
-                              v-model="newIssueDescriptions[project_index]" />
+                            <textarea
+                              class="project-new-issue-textarea"
+                              type="text"
+                              v-model="newIssueDescriptions[project_index]"
+                            />
                           </div>
                           <div class="project-new-issue-action-container">
-                            <button class="project-new-issue-action-button" @click="
-                              postNewIssue(
-                                project.request.product_id,
-                                project.project_id,
-                                newIssueDescriptions[project_index]
-                              )
-                              ">
+                            <button
+                              class="project-new-issue-action-button"
+                              @click="
+                                postNewIssue(
+                                  project.request.product_id,
+                                  project.project_id,
+                                  newIssueDescriptions[project_index]
+                                )
+                              "
+                            >
                               Submit
                             </button>
                           </div>
@@ -377,14 +489,22 @@
                       </div>
                     </div>
                     <div class="project-issues-containter">
-                      <div class="project-issue-container"
-                        v-for="(issue, issue_index) in project.project.issue.open_issues" :key="issue_index"
-                        :id="'project-issue-' + issue_index">
+                      <div
+                        class="project-issue-container"
+                        v-for="(issue, issue_index) in project.project.issue.open_issues"
+                        :key="issue_index"
+                        :id="'project-issue-' + issue_index"
+                      >
                         <div class="accordion-item">
                           <h2 class="accordion-header">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                              :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
-                              aria-controls="collapse-project-issue-details">
+                            <button
+                              class="accordion-button collapsed"
+                              type="button"
+                              data-bs-toggle="collapse"
+                              :data-bs-target="'#collapse-project-issue-details' + issue_index"
+                              aria-expanded="false"
+                              aria-controls="collapse-project-issue-details"
+                            >
                               <div class="project-issue-title">
                                 <label class="project-item-label">Issue title</label>
                                 <p class="project-item-text">{{ issue.title }}</p>
@@ -403,23 +523,35 @@
                               </div>
                             </button>
                           </h2>
-                          <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
-                            :data-bs-parent="'#collapse-project-issue-details' + issue_index">
+                          <div
+                            :id="'collapse-project-issue-details' + issue_index"
+                            class="accordion-collapse collapse"
+                            :data-bs-parent="'#collapse-project-issue-details' + issue_index"
+                          >
                             <div class="project-issue-description-container">
                               <label class="project-item-label">Issue description</label>
                               <p class="project-item-text">{{ issue.description }}</p>
                             </div>
                             <div class="project-issue-action-container">
-                              <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
-                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 1)">
+                              <button
+                                :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                                class="project-issue-action-button"
+                                @click="setProjectIssueStatus(issue.id, 1)"
+                              >
                                 Resolve
                               </button>
-                              <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
-                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 2)">
+                              <button
+                                :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                                class="project-issue-action-button"
+                                @click="setProjectIssueStatus(issue.id, 2)"
+                              >
                                 Confirm
                               </button>
-                              <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 0)">
+                              <button
+                                :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                                class="project-issue-action-button"
+                                @click="setProjectIssueStatus(issue.id, 0)"
+                              >
                                 Reopen
                               </button>
                             </div>
@@ -475,7 +607,7 @@ export default {
         index: null
       },
 
-      downstream_web_socket: null,
+      downstream_web_socket: null
     }
   },
 
@@ -785,19 +917,16 @@ export default {
     },
     /** web socket. we put them here for test purpose. they need to be moved to an appropriate place**/
     websocketOnOpen(event) {
-      console.log(event);
+      console.log(event)
     },
     websocketOnMessage(event) {
-      console.log(event.data);
-
+      console.log(event.data)
     },
     websocketOnError(event) {
-      console.log(event);
-
+      console.log(event)
     },
     websocketOnClose(event) {
-      console.log(event);
-
+      console.log(event)
     },
     connectWebSocket() {
       this.downstream_web_socket = WsConnectionFactory.CreateWebSocket(
@@ -807,7 +936,6 @@ export default {
         this.websocketOnClose
       )
     }
-
   }
 }
 </script>
diff --git a/frontend/src/pages/user/workspace/projectManage/Home.vue b/frontend/src/pages/user/workspace/projectManage/Home.vue
index 72a30eb..7ddf0b4 100644
--- a/frontend/src/pages/user/workspace/projectManage/Home.vue
+++ b/frontend/src/pages/user/workspace/projectManage/Home.vue
@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceProjects',
   props: {},
diff --git a/frontend/src/pages/user/workspace/proposalManage/Home.vue b/frontend/src/pages/user/workspace/proposalManage/Home.vue
index 3137e24..0d72712 100644
--- a/frontend/src/pages/user/workspace/proposalManage/Home.vue
+++ b/frontend/src/pages/user/workspace/proposalManage/Home.vue
@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceProposal',
   props: {},
diff --git a/frontend/src/pages/user/workspace/requestIssue/Deposit.vue b/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
index 1263b9e..85b5f0d 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
@@ -13,7 +13,7 @@
 import {
   UserProfileApi
   // requestHubUtils,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'RquestIssueDeposit',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Deposited.vue b/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
index b69f667..261d34b 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
@@ -11,7 +11,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'RquestIssueDeposited',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 1ec4c19..47726b8 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -170,8 +170,8 @@
 </template>
 
 <script>
-import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '../../../../utils/index'
-import { requestIssuingModelEnum } from '../../../../types/index'
+import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '@/utils/index'
+import { requestIssuingModelEnum } from '@/types/index'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 import InputSelector from '@/components/InputSelector.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
diff --git a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
index 188507f..9bb3019 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
@@ -15,7 +15,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'RquestIssueSubmitted',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestManage/Home.vue b/frontend/src/pages/user/workspace/requestManage/Home.vue
index 24c80d8..bb1e3f4 100644
--- a/frontend/src/pages/user/workspace/requestManage/Home.vue
+++ b/frontend/src/pages/user/workspace/requestManage/Home.vue
@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceRequest',
   props: {},
diff --git a/frontend/src/pages/user/workspace/requestManage/Manage.vue b/frontend/src/pages/user/workspace/requestManage/Manage.vue
index 6871afb..230d926 100644
--- a/frontend/src/pages/user/workspace/requestManage/Manage.vue
+++ b/frontend/src/pages/user/workspace/requestManage/Manage.vue
@@ -88,8 +88,8 @@
 </template>
 
 <script>
-import { WorksapceApi, requestIssueUtils, DateUtils } from '../../../../utils/index'
-import { requestStatusEnum, convertIntoToRequestStatus } from '../../../../types/index'
+import { WorksapceApi, requestIssueUtils, DateUtils } from '@/utils/index'
+import { requestStatusEnum, convertIntoToRequestStatus } from '@/types/index'
 export default {
   name: 'RequestManage',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue b/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
index ebe1224..9a54419 100644
--- a/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
+++ b/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
@@ -65,7 +65,7 @@
 import {
   WorksapceApi
   // userProfileValidator,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'ReviewProposalBeforeAccetance',
   props: {
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index c2ee0ba..262c226 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -1,71 +1,71 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { store, userRoleEnum } from '../store/index'
+import { store, userRoleEnum } from '@/store/index'
 
 //public
-import About from '../../pages/public/About.vue'
-import Blogs from '../../pages/public/Blogs.vue'
-import Career from '../../pages/public/Career.vue'
-import Contact from '../../pages/public/Contact.vue'
-import PdfContentViewer from '../../pages/public/PdfContentViewer.vue'
-import LinkContentViewer from '../../pages/public/LinkContentViewer.vue'
+import About from '@/pages/public/About.vue'
+import Blogs from '@/pages/public/Blogs.vue'
+import Career from '@/pages/public/Career.vue'
+import Contact from '@/pages/public/Contact.vue'
+import PdfContentViewer from '@/pages/public/PdfContentViewer.vue'
+import LinkContentViewer from '@/pages/public/LinkContentViewer.vue'
 
 //guest
-import FrontDoor from '../../pages/guest/FrontDoor.vue'
-import SigninWithEmailAndCode from '../../pages/guest/SigninWithEmailAndCode.vue'
-import NewUserSetPassword from '../../pages/guest/NewUserSetPassword.vue'
-import NewUserSetFlid from '../../pages/guest/NewUserSetFlid.vue'
-import SigninWithEmailAndPassword from '../../pages/guest/SigninWithEmailAndPassword.vue'
+import FrontDoor from '@/pages/guest/FrontDoor.vue'
+import SigninWithEmailAndCode from '@/pages/guest/SigninWithEmailAndCode.vue'
+import NewUserSetPassword from '@/pages/guest/NewUserSetPassword.vue'
+import NewUserSetFlid from '@/pages/guest/NewUserSetFlid.vue'
+import SigninWithEmailAndPassword from '@/pages/guest/SigninWithEmailAndPassword.vue'
 
 //Workspace projects
-import MyWorkspaceProjects from '../../pages/user/workspace/projectManage/Home.vue'
+import MyWorkspaceProjects from '@/pages/user/workspace/projectManage/Home.vue'
 
-import ProjectManage from '../../pages/user/workspace/projectManage/ProjectManage.vue'
-import ProjectManageCode from '../../pages/user/workspace/projectManage/Code.vue'
-import ProjectManageDeploy from '../../pages/user/workspace/projectManage/Deploy.vue'
-import ProjectManageGeneral from '../../pages/user/workspace/projectManage/General.vue'
-import ProjectManageIssues from '../../pages/user/workspace/projectManage/Issues.vue'
-import ProjectManageProduct from '../../pages/user/workspace/projectManage/Product.vue'
-import ProjectManageProgress from '../../pages/user/workspace/projectManage/Progress.vue'
+import ProjectManage from '@/pages/user/workspace/projectManage/ProjectManage.vue'
+import ProjectManageCode from '@/pages/user/workspace/projectManage/Code.vue'
+import ProjectManageDeploy from '@/pages/user/workspace/projectManage/Deploy.vue'
+import ProjectManageGeneral from '@/pages/user/workspace/projectManage/General.vue'
+import ProjectManageIssues from '@/pages/user/workspace/projectManage/Issues.vue'
+import ProjectManageProduct from '@/pages/user/workspace/projectManage/Product.vue'
+import ProjectManageProgress from '@/pages/user/workspace/projectManage/Progress.vue'
 
 //Workspace Requests
-import MyWorkspaceRequests from '../../pages/user/workspace/requestManage/Home.vue'
+import MyWorkspaceRequests from '@/pages/user/workspace/requestManage/Home.vue'
 
 /// Request Issue
-import IssueRequest from '../../pages/user/workspace/requestIssue/Issue.vue'
-import RequestSubmitted from '../../pages/user/workspace/requestIssue/Submitted.vue'
-import RequestDeposit from '../../pages/user/workspace/requestIssue/Deposit.vue'
-import RequestDeposited from '../../pages/user/workspace/requestIssue/Deposited.vue'
+import IssueRequest from '@/pages/user/workspace/requestIssue/Issue.vue'
+import RequestSubmitted from '@/pages/user/workspace/requestIssue/Submitted.vue'
+import RequestDeposit from '@/pages/user/workspace/requestIssue/Deposit.vue'
+import RequestDeposited from '@/pages/user/workspace/requestIssue/Deposited.vue'
 
 //Workspace Proposals
-import MyWorkspaceProposals from '../../pages/user/workspace/proposalManage/Home.vue'
+import MyWorkspaceProposals from '@/pages/user/workspace/proposalManage/Home.vue'
 
 //Message Hub
-import MessageHub from '../../pages/user/messages/Home.vue'
+import MessageHub from '@/pages/user/messages/Home.vue'
 
 //Provider Hub
-import ProviderHub from '../../pages/user/providers/Home.vue'
+import ProviderHub from '@/pages/user/providers/Home.vue'
 
 //Request Hub
-import RequestHub from '../../pages/user/requests/Home.vue'
-import MakeProposal from '../../pages/user/requests/Propose.vue'
-import ProposalSubmitted from '../../pages/user/requests/ProposalSubmitted.vue'
+import RequestHub from '@/pages/user/requests/Home.vue'
+import MakeProposal from '@/pages/user/requests/Propose.vue'
+import ProposalSubmitted from '@/pages/user/requests/ProposalSubmitted.vue'
 
-import RequestManage from '../../pages/user/workspace/requestManage/Manage.vue'
-import ReviewProposalBeforeAccetance from '../../pages/user/workspace/requestManage/ReviewProposal.vue'
-import UserProfile from '../../pages/user/account/UserProfile.vue'
-import UserFinance from '../../pages/user/account/UserFinance.vue'
-import UserHistory from '../../pages/user/account/UserHistory.vue'
-import Workspace from '../../pages/user/workspace/Home.vue'
+import RequestManage from '@/pages/user/workspace/requestManage/Manage.vue'
+import ReviewProposalBeforeAccetance from '@/pages/user/workspace/requestManage/ReviewProposal.vue'
+import UserProfile from '@/pages/user/account/UserProfile.vue'
+import UserFinance from '@/pages/user/account/UserFinance.vue'
+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 FooterGuest from '@/footers/FooterGuest.vue'
+import FooterUser from '@/footers/FooterUser.vue'
 
-import HeaderGuest from '../../headers/HeaderGuest.vue'
-import HeaderUser from '../../headers/HeaderUser.vue'
+import HeaderGuest from '@/headers/HeaderGuest.vue'
+import HeaderUser from '@/headers/HeaderUser.vue'
 
 //Lab
-import LabHome from '../../pages/lab/Home.vue'
-import TranslationHome from '../../pages/lab/translation/Home.vue'
+import LabHome from '@/pages/lab/Home.vue'
+import TranslationHome from '@/pages/lab/translation/Home.vue'
 
 const router = createRouter({
   history: createWebHistory(),
diff --git a/frontend/src/plugins/store/userProfile.js b/frontend/src/plugins/store/userProfile.js
index 29e59ef..0c60cd6 100644
--- a/frontend/src/plugins/store/userProfile.js
+++ b/frontend/src/plugins/store/userProfile.js
@@ -1,4 +1,4 @@
-import { userRoleEnum } from '../../types/index'
+import { userRoleEnum } from '@/types/index'
 
 const userProfileStore = {
   namespaced: true,
diff --git a/frontend/src/utils/backend/history.js b/frontend/src/utils/backend/history.js
index 113b0e9..eb846e4 100644
--- a/frontend/src/utils/backend/history.js
+++ b/frontend/src/utils/backend/history.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class HistoryApi {
   static fetchClosedWorkspackeProjects() {
diff --git a/frontend/src/utils/backend/lab.js b/frontend/src/utils/backend/lab.js
index eb493f3..c4e9393 100644
--- a/frontend/src/utils/backend/lab.js
+++ b/frontend/src/utils/backend/lab.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 class LabApi {
   static translate_text(input_text) {
     let jwt = userUtils.getJwtToken()
diff --git a/frontend/src/utils/backend/messageHub.js b/frontend/src/utils/backend/messageHub.js
index e3bff5b..1cf9701 100644
--- a/frontend/src/utils/backend/messageHub.js
+++ b/frontend/src/utils/backend/messageHub.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class MessageHubApi {
   static fetchMessageThreads() {
diff --git a/frontend/src/utils/backend/providerHub.js b/frontend/src/utils/backend/providerHub.js
index 8a3683d..2522bde 100644
--- a/frontend/src/utils/backend/providerHub.js
+++ b/frontend/src/utils/backend/providerHub.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class ProviderHubApi {
   static fetchProvidersForHub() {
diff --git a/frontend/src/utils/backend/requestHub.js b/frontend/src/utils/backend/requestHub.js
index 5c9d9f7..1489dbd 100644
--- a/frontend/src/utils/backend/requestHub.js
+++ b/frontend/src/utils/backend/requestHub.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class RequestHubApi {
   static fetchRequestForHub() {
diff --git a/frontend/src/utils/backend/userProfile.js b/frontend/src/utils/backend/userProfile.js
index 145ca06..f66bbc1 100644
--- a/frontend/src/utils/backend/userProfile.js
+++ b/frontend/src/utils/backend/userProfile.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class UserProfileApi {
   static fetchUserProfile() {
diff --git a/frontend/src/utils/backend/websocket.js b/frontend/src/utils/backend/websocket.js
index d9c3913..e5b9dd8 100644
--- a/frontend/src/utils/backend/websocket.js
+++ b/frontend/src/utils/backend/websocket.js
@@ -1,14 +1,14 @@
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class WsConnectionFactory {
-    static CreateWebSocket(onOpen, onMessage, onError, onClose) {
-        let jwt = userUtils.getJwtToken()
-        this.socket = new WebSocket(`/ws/downstream/downstream_notification?token=${jwt}`)
-        this.socket.onopen = onOpen
-        this.socket.onmessage = onMessage
-        this.socket.onerror = onError
-        this.socket.onclose = onClose
-    }
+  static CreateWebSocket(onOpen, onMessage, onError, onClose) {
+    let jwt = userUtils.getJwtToken()
+    this.socket = new WebSocket(`/ws/downstream/downstream_notification?token=${jwt}`)
+    this.socket.onopen = onOpen
+    this.socket.onmessage = onMessage
+    this.socket.onerror = onError
+    this.socket.onclose = onClose
+  }
 }
 
 export { WsConnectionFactory }
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 7b68374..aecfa30 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class WorksapceApi {
   static createMilestoneCheckoutSession(project_id, milestone_index) {
diff --git a/frontend/src/utils/store/requestHubUtils.js b/frontend/src/utils/store/requestHubUtils.js
index 137db0b..7c3c22a 100644
--- a/frontend/src/utils/store/requestHubUtils.js
+++ b/frontend/src/utils/store/requestHubUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class RequestHubUtils {
   constructor(store) {
diff --git a/frontend/src/utils/store/requestIssueUtils.js b/frontend/src/utils/store/requestIssueUtils.js
index 70ed8ce..e7a52ec 100644
--- a/frontend/src/utils/store/requestIssueUtils.js
+++ b/frontend/src/utils/store/requestIssueUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class RequestIssueUtils {
   constructor(store) {
diff --git a/frontend/src/utils/store/userProfileUtils.js b/frontend/src/utils/store/userProfileUtils.js
index 2792085..03b5716 100644
--- a/frontend/src/utils/store/userProfileUtils.js
+++ b/frontend/src/utils/store/userProfileUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class UserProfileUtils {
   constructor(store) {
diff --git a/frontend/src/utils/store/userUtils.js b/frontend/src/utils/store/userUtils.js
index 9a6503f..aef930b 100644
--- a/frontend/src/utils/store/userUtils.js
+++ b/frontend/src/utils/store/userUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class UserUtils {
   constructor(store) {