diff --git a/frontend/src/assets/styles/buttons.scss b/frontend/src/assets/styles/buttons.scss
index 5c2c2cd..b5ba364 100644
--- a/frontend/src/assets/styles/buttons.scss
+++ b/frontend/src/assets/styles/buttons.scss
@@ -55,4 +55,4 @@
 
 .min-btn {
   min-width: 115px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index bffabc1..ce3e697 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -184,7 +184,7 @@ p {
     margin-right: 28px;
     padding: 8px 12px;
     font-weight: bold;
-    border: 1px dashed #AEBFFD;
+    border: 1px dashed #aebffd;
     border-radius: 3px;
   }
   &:not(.collapsed) {
@@ -193,7 +193,7 @@ p {
     box-shadow: none;
     border-bottom: 1px solid #dee2e6;
     .dashed-container {
-      background-color: #F3F6FF;
+      background-color: #f3f6ff;
     }
   }
 }
@@ -215,20 +215,20 @@ p {
   justify-content: center;
   font-size: 26px;
   line-height: 36px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380;
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
 
   img {
     width: 86px;
-    margin-bottom: 20px
+    margin-bottom: 20px;
   }
   .btn-link {
     text-decoration: underline;
     padding: 0;
-    font-size: inherit
+    font-size: inherit;
   }
 }
 
 .upload-contianer {
   display: flex;
   align-items: center;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index b5c944a..0aa6c35 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -13,7 +13,10 @@
       <div v-for="(item, index) in iconList" :key="index" class="editor-item">
         <button
           class="item-icon"
-          :class="{ activity: commandStates.indexOf(item.type) !== -1, last: index === iconList.length - 1 }"
+          :class="{
+            activity: commandStates.indexOf(item.type) !== -1,
+            last: index === iconList.length - 1
+          }"
           :data-info="item.name"
           @click="iconClick($event, item.type)"
           :data-bs-toggle="item.drop ? 'dropdown' : ''"
@@ -121,21 +124,21 @@ export default {
           type: 'bold',
           icon: 'fe-bold',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         {
           name: 'italic',
           type: 'italic',
           icon: 'fe-italic',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         {
           name: 'underline',
           type: 'underline',
           icon: 'fe-underline',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         // {
         //   name: 'strike',
@@ -163,14 +166,14 @@ export default {
           type: 'unorderedlist',
           icon: 'fe-unorderedlist',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         {
           name: 'ordered list',
           type: 'orderedlist',
           icon: 'fe-orderedlist',
           drop: false,
-          canChoose: true,
+          canChoose: true
         }
         // {
         //   name: 'align-justify',
@@ -200,18 +203,18 @@ export default {
     },
     queryCommandState(range, command) {
       const container = document.createElement('span')
-      container.style.display = 'none';
-      
+      container.style.display = 'none'
+
       container.appendChild(range.cloneContents())
       console.log('queryCommandState', container)
       // range
-      document.body.appendChild(container);
-      const state = document.queryCommandState(command);
-        console.log('queryCommandIndeterm ', document.queryCommandIndeterm('bold'))
-        console.log('queryCommandState ', document.queryCommandState('bold'))
+      document.body.appendChild(container)
+      const state = document.queryCommandState(command)
+      console.log('queryCommandIndeterm ', document.queryCommandIndeterm('bold'))
+      console.log('queryCommandState ', document.queryCommandState('bold'))
       // range.collapse(true);
-      container.remove();
-      return state;
+      container.remove()
+      return state
     },
     iconClick(event, type, dropType) {
       event.preventDefault()
@@ -227,14 +230,14 @@ export default {
         if (i === -1) {
           this.commandStates.push(type)
         } else {
-          this.commandStates.splice(i,1)
+          this.commandStates.splice(i, 1)
         }
       })
     },
     getSelect() {
       if (window.getSelection) {
         let sel = window.getSelection()
-        console.log('this.selectedRange',sel)
+        console.log('this.selectedRange', sel)
         if (sel.rangeCount > 0) {
           return sel.getRangeAt(0)
         }
@@ -348,7 +351,7 @@ export default {
     display: none;
     width: fit-content;
     height: 26px;
-    background-color: #F8F8F9;
+    background-color: #f8f8f9;
     position: absolute;
   }
   .dropmenu {
@@ -415,7 +418,7 @@ export default {
     width: 50px;
     height: 16px;
     font-size: 16px;
-    color: #9EA2AF;
+    color: #9ea2af;
     font-weight: normal;
     white-space: nowrap;
     vertical-align: middle;
@@ -427,7 +430,7 @@ export default {
     border: none;
     line-height: 16px;
     background: transparent;
-    border-right: 1px solid #E7E8EB;
+    border-right: 1px solid #e7e8eb;
     &.last {
       border-right: 0;
     }
diff --git a/frontend/src/components/PDFReader.vue b/frontend/src/components/PDFReader.vue
index 4d720c9..34502ae 100644
--- a/frontend/src/components/PDFReader.vue
+++ b/frontend/src/components/PDFReader.vue
@@ -12,10 +12,10 @@
 <script>
 import * as PDFJS from 'pdfjs-dist/build/pdf'
 PDFJS.GlobalWorkerOptions.workerPort = new Worker(
-    new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url),
-    { type: "module" }
-  )
-  
+  new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url),
+  { type: 'module' }
+)
+
 // import * as PDFJS from 'pdfjs-dist/webpack.mjs'
 
 export default {
@@ -36,7 +36,7 @@ export default {
       if (this.doc.url || this.doc.data) {
         this.renderPDF()
       }
-    } 
+    }
   },
   methods: {
     renderPage(num) {
diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index b6d372f..9a879e4 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -14,8 +14,8 @@ export default {
     mnx_navToContact() {
       this.$router.push('/contact')
     },
-    mnx_navToPdfContentViewer(request_id, document_id) {
-      this.$router.push(`/pdf-content-viewer?request_id=${request_id}&document_id=${document_id}`)
+    mnx_navToPdfContentViewer(document_id) {
+      this.$router.push('/pdf-content-viewer/' + document_id)
     },
     mnx_navToLinkContentViewer(content_link_based64) {
       this.$router.push('/link-content-viewer/' + content_link_based64)
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index 3409c4e..ff6af39 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -7,27 +7,25 @@
 // import { pdfjsLib } from '../../plugins/index'
 // import { ContentApi } from '../../utils/index'
 // import { Buffer } from 'buffer'
-import { WorksapceApi } from '@/utils/index'
+import { ContentApi } from '@/utils/index'
 import PDFReader from '@/components/PDFReader.vue'
 export default {
   name: 'PdfContentViewer',
-  // props: {
-  //   content_id: {
-  //     required: true,
-  //     type: String
-  //   }
-  // },
+  props: {
+    content_id: {
+      required: true,
+      type: String
+    }
+  },
   components: { PDFReader },
   computed: {},
   mounted() {
-    if (this.$route.query?.request_id && this.$route.query?.document_id) {
-      this.retrieve_blog_content(this.$route.query.request_id, this.$route.query.document_id)
-    }
+    this.retrieve_blog_content(this.content_id)
   },
   methods: {
     retrieve_blog_content(request_id, document_id) {
-      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
-        this.content_media_data = {url: response.data}
+      ContentApi.retrieve_blog_content(request_id, document_id).then((response) => {
+        this.content_media_data = { url: response.data }
       })
     }
   },
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 4ccdf55..23cee8f 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -6,7 +6,11 @@
           v-for="(conversation, index) in conversations"
           :key="index"
           class="conversation-container"
-          :class="{selected: current_thread?.conversation?.information?.conversation_id === conversation.summary.last_message.conversation_id}"
+          :class="{
+            selected:
+              current_thread?.conversation?.information?.conversation_id ===
+              conversation.summary.last_message.conversation_id
+          }"
           @click="selectConversation(conversation)"
         >
           <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index 188431e..d6d51c5 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="provider-hub-container" id="provider-accordion-container">
     <template v-if="recommendedProviders">
-      <div class="accordion accordion-list" v-for="(provider, index) in recommendedProviders" :key="index">
-        <div class="accordion-item my-3" >
+      <div
+        class="accordion accordion-list"
+        v-for="(provider, index) in recommendedProviders"
+        :key="index"
+      >
+        <div class="accordion-item my-3">
           <h2 class="accordion-header">
             <button
               class="accordion-button collapsed"
@@ -14,16 +18,13 @@
             >
               <div class="provider-summary-containter dashed-container">
                 <div class="provider-portrait-containter">
-                  <img
-                    class="provider-portrait"
-                    alt="user portrait"
-                    src="@/assets/profile.png"
-                  />
+                  <img class="provider-portrait" alt="user portrait" src="@/assets/profile.png" />
                 </div>
                 <div class="provider-name-container">
                   <label class="provider-name-label" for="provider-name">Name</label>
                   <span class="provider-name-span" id="provider-name">
-                    {{ provider.user_profile.first_name }} {{ provider.user_profile.last_name }}</span
+                    {{ provider.user_profile.first_name }}
+                    {{ provider.user_profile.last_name }}</span
                   >
                 </div>
                 <div class="provider-stay-on-freeleaps-container">
@@ -80,9 +81,7 @@
                 <div class="statistics-content-container" id="statistics-content">
                   <div class="delivery-container">
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="delivery-delivered-projects"
+                      <label class="dd-project-label" for="delivery-delivered-projects"
                         >Delivered projects</label
                       >
                       <span class="dd-project-span" id="delivery-delivered-projects">
@@ -98,9 +97,7 @@
                       </span>
                     </div>
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="delivery-top-programming-language"
+                      <label class="dd-project-label" for="delivery-top-programming-language"
                         >Top programming languages</label
                       >
                       <div
@@ -118,15 +115,10 @@
                       </div>
                     </div>
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="delivery-weekly-produced-code"
+                      <label class="dd-project-label" for="delivery-weekly-produced-code"
                         >Weekly produced code</label
                       >
-                      <span
-                        class="dd-project-span"
-                        id="delivery-weekly-produced-code"
-                      >
+                      <span class="dd-project-span" id="delivery-weekly-produced-code">
                         {{ provider.provider_deliveries.lines_of_code_per_week }} line(s)
                       </span>
                     </div>
@@ -141,15 +133,10 @@
                       </span>
                     </div>
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="activity-invitation-to-requests"
+                      <label class="dd-project-label" for="activity-invitation-to-requests"
                         >Invitations to requests</label
                       >
-                      <span
-                        class="dd-project-span"
-                        id="activity-invitation-to-requests"
-                      >
+                      <span class="dd-project-span" id="activity-invitation-to-requests">
                         {{ provider.provider_activities.invitations_to_open_requests }}
                       </span>
                     </div>
@@ -228,7 +215,9 @@
                   >
                     <div class="accordion-body">
                       <div class="invite-to-request-container">
-                        <label class="invite-to-request-content-label" for="invite-to-request-content"
+                        <label
+                          class="invite-to-request-content-label"
+                          for="invite-to-request-content"
                           >Invite
                           <span class="invite-to-request-name-span"
                             >{{ provider.user_profile.first_name }}
@@ -420,7 +409,7 @@ export default {
 
 .self-intro-container {
   @extend .flex-colum-container;
-  margin-bottom: 20px
+  margin-bottom: 20px;
   // @extend .m-1;
   // @extend .border;
 }
@@ -429,7 +418,7 @@ export default {
   @extend .label-text-light;
   @extend .w-100;
   font-size: 14px;
-  font-weight: bold !important
+  font-weight: bold !important;
 }
 
 .self-intro-content-container {
@@ -460,7 +449,7 @@ export default {
   @extend .flex-row-container;
   @extend .justify-content-around;
   @extend .w-100;
-  background-color: rgba(32,90,239,.03);
+  background-color: rgba(32, 90, 239, 0.03);
   margin-bottom: 12px;
   padding: 12px 0;
 }
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 883bf90..99b14d3 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -6,154 +6,167 @@
       class="request-invitations"
       :id="group.name"
     >
-    <div v-if="group.data" id="request-invitation-container">
-      <div class="accordion accordion-list" v-for="(request, index) in group.data" :key="index" :id="request.id">
-        <div class="accordion-item my-3">
-          <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              :data-bs-target="'#collapse' + index"
-              aria-expanded="false"
-              :aria-controls="'collapse' + index"
-            >
-              <div class="dashed-container request-content-container">
-                <div class="request-content-issuer-container">
-                  <label class="request-content-label" for="request-content-issuer-box">Issuer</label>
-                  <div class="request-content-box" id="request-content-issuer-box">
-                    <span class="request-content-issuer-text">
-                      {{ request.issuer_profile.first_name }}
-                      {{ request.issuer_profile.last_name }}</span
+      <div v-if="group.data" id="request-invitation-container">
+        <div
+          class="accordion accordion-list"
+          v-for="(request, index) in group.data"
+          :key="index"
+          :id="request.id"
+        >
+          <div class="accordion-item my-3">
+            <h2 class="accordion-header">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                :data-bs-target="'#collapse' + index"
+                aria-expanded="false"
+                :aria-controls="'collapse' + index"
+              >
+                <div class="dashed-container request-content-container">
+                  <div class="request-content-issuer-container">
+                    <label class="request-content-label" for="request-content-issuer-box"
+                      >Issuer</label
                     >
-                  </div>
-                </div>
-                <div class="request-content-title-container">
-                  <label class="request-content-label" for="request-content-title-box">Request</label>
-                  <div class="request-content-box" id="request-content-title-box">
-                    <span class="request-content-title-text"> {{ request.title }}</span>
-                  </div>
-                </div>
-                <div class="request-content-date-container">
-                  <label class="request-content-label" for="request-content-date-box">Date</label>
-                  <div class="request-content-box" id="request-content-date-box">
-                    <span class="request-content-date-text">
-                      {{ getDateFromFulltimeString(request.update_time) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="request-content-score-container">
-                  <label class="request-content-label" for="request-content-score-box">Score</label>
-                  <div class="request-content-box" id="request-content-score-box">
-                    <span class="request-content-score-text">
-                      {{ request.score }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </button>
-          </h2>
-          <div
-            :id="'collapse' + index"
-            class="accordion-collapse collapse"
-            data-bs-parent="#request-invitation-container"
-          >
-            <div class="accordion-body">
-              <div class="request-description-container">
-                <button class="make-proposal-button" type="button" @click="Propose(request)">
-                  Propose
-                </button>
-                <div class="request-description-content" v-html="request.content"></div>
-                <div v-for="(file, index) in request.attached_files" :key="index">
-                  <button @click="previewAttachedFile(request.id, file.document_id)">
-                    Preview{{ file.file_name }}
-                  </button>
-                  <button @click="downloadAttachedFile(request.id, file.document_id)">
-                    Download{{ file.file_name }}
-                  </button>
-                </div>
-              </div>
-              <div class="issuer-profile-container">
-                <!-- <label class="issuer-profile-label" for="issuer-achievement-container"
-                  >Issuer profile</label
-                > -->
-                <div class="issuer-achievement-container" id="issuer-achievement-container">
-                  <div class="issuer-achievement-isssuer-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-isssuer-content-div"
-                      >Name</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-isssuer-content-div"
-                    >
-                      <span class="issuer-achievement-issuer-text">
+                    <div class="request-content-box" id="request-content-issuer-box">
+                      <span class="request-content-issuer-text">
                         {{ request.issuer_profile.first_name }}
                         {{ request.issuer_profile.last_name }}</span
                       >
                     </div>
                   </div>
-                  <div class="issuer-achievement-stay-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-stay-content-div"
-                      >Stay on Freeleaps</label
+                  <div class="request-content-title-container">
+                    <label class="request-content-label" for="request-content-title-box"
+                      >Request</label
                     >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-stay-content-div"
-                    >
-                      <span class="issuer-achievement-stay-content-text">
-                        {{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span
-                      >
+                    <div class="request-content-box" id="request-content-title-box">
+                      <span class="request-content-title-text"> {{ request.title }}</span>
                     </div>
                   </div>
-                  <div class="issuer-achievement-paid-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-paid-content-div"
-                      >Total payment</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-stay-content-div"
-                    >
-                      <span class="issuer-achievement-paid-content-text">
-                        {{ request.issuer_achievement.issuer.spending.total }}
-                        {{ request.issuer_achievement.issuer.spending.currency }}</span
-                      >
+                  <div class="request-content-date-container">
+                    <label class="request-content-label" for="request-content-date-box">Date</label>
+                    <div class="request-content-box" id="request-content-date-box">
+                      <span class="request-content-date-text">
+                        {{ getDateFromFulltimeString(request.update_time) }}
+                      </span>
                     </div>
                   </div>
-                  <div class="issuer-achievement-deposit-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-deposit-content-div"
-                      >Deposit</label
+                  <div class="request-content-score-container">
+                    <label class="request-content-label" for="request-content-score-box"
+                      >Score</label
                     >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-deposit-content-div"
-                    >
-                      <span class="issuer-achievement-deposit-content-text">
-                        {{ request.issuer_achievement.issuer.deposit.available }}
-                        {{ request.issuer_achievement.issuer.deposit.currency }}</span
-                      >
+                    <div class="request-content-box" id="request-content-score-box">
+                      <span class="request-content-score-text">
+                        {{ request.score }}
+                      </span>
                     </div>
                   </div>
-                  <div class="issuer-achievement-credit-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-credit-content-div"
-                      >Credit</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-credit-content-div"
-                    >
-                      <span class="issuer-achievement-credit-content-text">
-                        {{ request.issuer_achievement.activeness.credit }}</span
+                </div>
+              </button>
+            </h2>
+            <div
+              :id="'collapse' + index"
+              class="accordion-collapse collapse"
+              data-bs-parent="#request-invitation-container"
+            >
+              <div class="accordion-body">
+                <div class="request-description-container">
+                  <button class="make-proposal-button" type="button" @click="Propose(request)">
+                    Propose
+                  </button>
+                  <div class="request-description-content" v-html="request.content"></div>
+                  <div v-for="(file, index) in request.attached_files" :key="index">
+                    <button @click="previewAttachedFile(request.id, file.document_id)">
+                      Preview{{ file.file_name }}
+                    </button>
+                    <button @click="downloadAttachedFile(request.id, file.document_id)">
+                      Download{{ file.file_name }}
+                    </button>
+                  </div>
+                </div>
+                <div class="issuer-profile-container">
+                  <!-- <label class="issuer-profile-label" for="issuer-achievement-container"
+                  >Issuer profile</label
+                > -->
+                  <div class="issuer-achievement-container" id="issuer-achievement-container">
+                    <div class="issuer-achievement-isssuer-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-isssuer-content-div"
+                        >Name</label
                       >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-isssuer-content-div"
+                      >
+                        <span class="issuer-achievement-issuer-text">
+                          {{ request.issuer_profile.first_name }}
+                          {{ request.issuer_profile.last_name }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-stay-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-stay-content-div"
+                        >Stay on Freeleaps</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-stay-content-div"
+                      >
+                        <span class="issuer-achievement-stay-content-text">
+                          {{ request.issuer_achievement.activeness.days_of_staying_on }}
+                          day(s)</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-paid-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-paid-content-div"
+                        >Total payment</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-stay-content-div"
+                      >
+                        <span class="issuer-achievement-paid-content-text">
+                          {{ request.issuer_achievement.issuer.spending.total }}
+                          {{ request.issuer_achievement.issuer.spending.currency }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-deposit-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-deposit-content-div"
+                        >Deposit</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-deposit-content-div"
+                      >
+                        <span class="issuer-achievement-deposit-content-text">
+                          {{ request.issuer_achievement.issuer.deposit.available }}
+                          {{ request.issuer_achievement.issuer.deposit.currency }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-credit-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-credit-content-div"
+                        >Credit</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-credit-content-div"
+                      >
+                        <span class="issuer-achievement-credit-content-text">
+                          {{ request.issuer_achievement.activeness.credit }}</span
+                        >
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -163,8 +176,6 @@
         </div>
       </div>
     </div>
-      
-    </div>
   </div>
 </template>
 
@@ -202,7 +213,8 @@ export default {
       return DateUtils.FromJsonToDateString(fulltime)
     },
     previewAttachedFile(request_id, document_id) {
-      this.mnx_navToPdfContentViewer(request_id, document_id)
+      // !!! SHOULD NOT use PdfContentViewer which is designed for unlogged in users.
+      // !!! Instead, should have a dedicated pdf viewer which should follow the figma design.
       // WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
       //   .then((response) => {
       //     let media_data = response.data
@@ -304,7 +316,7 @@ export default {
 }
 
 .request-description-container {
-  margin-bottom: 20px
+  margin-bottom: 20px;
 }
 
 .make-proposal-button {
@@ -319,7 +331,7 @@ export default {
 
 .issuer-profile-container {
   border-top: 1px solid #dee2e6;
-  padding-top: 15px
+  padding-top: 15px;
 }
 
 .issuer-profile-label {
@@ -350,7 +362,7 @@ export default {
 
 .issuer-achievement-issuer-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-stay-container {
@@ -362,7 +374,7 @@ export default {
 
 .issuer-achievement-stay-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-paid-container {
@@ -380,12 +392,12 @@ export default {
 
 .issuer-achievement-deposit-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-paid-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-credit-container {
@@ -397,6 +409,6 @@ export default {
 
 .issuer-achievement-credit-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 </style>
diff --git a/frontend/src/pages/user/requests/ProposalSubmitted.vue b/frontend/src/pages/user/requests/ProposalSubmitted.vue
index 65f01d9..e5e5d31 100644
--- a/frontend/src/pages/user/requests/ProposalSubmitted.vue
+++ b/frontend/src/pages/user/requests/ProposalSubmitted.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="submission-result-container">
     <div class="submission-result-card">
-      <img src="@/assets/images/submited.png" alt="freeleaps"/>
+      <img src="@/assets/images/submited.png" alt="freeleaps" />
       <span>Your proposal has been submitted!</span>
       <span>
         You can check the status of proposals in
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index bc640a5..30cf826 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -2,10 +2,10 @@
   <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"
+        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">Copy from existing proposals</h5>
@@ -46,7 +46,10 @@
                   <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                     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>
@@ -95,7 +98,9 @@
                 data-bs-parent="#template-item-container"
               >
                 <div class="accordion-body">
-                  <button class="load-template-button" @click="applyTemplate(template)">Apply</button>
+                  <button class="load-template-button" @click="applyTemplate(template)">
+                    Apply
+                  </button>
                   <div class="template-content-text" v-html="template.proposal.content"></div>
                 </div>
               </div>
@@ -141,8 +146,8 @@
               data-bs-target="#offcanvas-template"
               aria-controls="offcanvas-template"
             >
-            <svg-icon icon="btn-templates" />
-            Templates
+              <svg-icon icon="btn-templates" />
+              Templates
             </button>
             <button
               class="btn btn-link"
@@ -151,8 +156,8 @@
               data-bs-target="#offcanvas-copy-existing"
               aria-controls="offcanvas-copy-existing"
             >
-            <svg-icon icon="btn-history" />
-            Copy
+              <svg-icon icon="btn-history" />
+              Copy
             </button>
           </div>
         </div>
@@ -166,7 +171,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number" v-model="stage.payment" />
+                    <input
+                      class="input-email"
+                      :id="`stage-payment-content-${index}`"
+                      type="number"
+                      v-model="stage.payment"
+                    />
                     <label :for="`stage-payment-content-${index}`">Payment</label>
                   </div>
                   <span class="btn-start">{{ stage.currency }}</span>
@@ -177,7 +187,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number" v-model="stage.duration_in_days" />
+                    <input
+                      class="input-email"
+                      :id="`stage-duration-content-${index}`"
+                      type="number"
+                      v-model="stage.duration_in_days"
+                    />
                     <label :for="`stage-duration-content-${index}`">Duration</label>
                   </div>
                   <span class="btn-start">day(s)</span>
@@ -188,7 +203,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
+                    <input
+                      class="input-email"
+                      :id="`stage-note-content-${index}`"
+                      type="text"
+                      v-model="stage.note"
+                    />
                     <label :for="`stage-note-content-${index}`">Notes</label>
                   </div>
                 </div>
@@ -410,7 +430,7 @@ export default {
       }
     },
     addStage() {
-      this.proposal.stages.push({...this.emptyStage})
+      this.proposal.stages.push({ ...this.emptyStage })
     },
 
     removeStage(index) {
@@ -458,7 +478,7 @@ export default {
 
 .making-proposal-content {
   border-radius: 12px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
 }
 
 .request-label {
@@ -471,7 +491,7 @@ export default {
   padding: 0;
   .accordion-list {
     margin: 0;
-    box-shadow: none
+    box-shadow: none;
   }
 }
 
@@ -494,7 +514,7 @@ export default {
   align-items: center;
   @extend .w-100;
   justify-content: space-between;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .header-bar {
@@ -511,7 +531,7 @@ export default {
 .proposal-label {
   font-size: 18px;
   font-weight: bold;
-  color: #0D1637;
+  color: #0d1637;
 }
 
 .load-templates-button {
@@ -558,7 +578,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .stage-item-content-label {
@@ -636,7 +656,7 @@ export default {
 
 .stage-more-action-container {
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .stage-item-delete-button {
@@ -662,13 +682,13 @@ export default {
   @extend .w-100;
   @extend .text-start;
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .summary-content-container {
   @extend .flex-row-container;
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 
   span {
     @extend .text-start;
@@ -676,7 +696,7 @@ export default {
     flex: 1;
     font-size: 12px;
     font-weight: 600;
-    color: #0D1637
+    color: #0d1637;
   }
 }
 
@@ -703,13 +723,13 @@ export default {
 .cancel-button {
   @extend .stop-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .submit-button {
   @extend .proceed-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .offcanvas-parent {
@@ -745,7 +765,7 @@ export default {
   padding: 12px 0;
   width: 100%;
   text-align: left;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
   .btn-link {
     padding: 0;
   }
@@ -765,10 +785,10 @@ export default {
 
 .milestone-input-container {
   width: calc(33.3% - 30px);
-  border: 2px dashed #9CB0F6;
+  border: 2px dashed #9cb0f6;
   .btn-start {
     background: transparent;
-    color: #0D1637;
+    color: #0d1637;
     border: none;
     display: flex;
     align-items: center;
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 8754bdd..6c6de4b 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -941,7 +941,7 @@ export default {
 .workspace-item-bar-left {
   @extend .flex-row-container;
   @extend .flex-grow-1;
-  padding: 0
+  padding: 0;
   // @extend .border;
   // @extend .me-3;
 }
@@ -979,7 +979,7 @@ export default {
 .project-item-text {
   @extend .text-start;
   @extend .mx-1;
-  margin-bottom: 0
+  margin-bottom: 0;
 }
 
 .project-request-container {
@@ -993,7 +993,7 @@ export default {
 .request-action-withdraw {
   @extend .btn;
   @extend .btn-link;
-  padding: 0
+  padding: 0;
 }
 
 .project-request-content {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 700b82a..1ec4c19 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -42,9 +42,7 @@
               data-bs-parent="#existing-request-item-container"
             >
               <div class="accordion-body">
-                <button class="btn btn-link" @click="copyRequest(existingRequest)">
-                  Copy
-                </button>
+                <button class="btn btn-link" @click="copyRequest(existingRequest)">Copy</button>
                 <div class="existing-request-content-text" v-html="existingRequest.content"></div>
               </div>
             </div>
@@ -94,7 +92,10 @@
               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)"
+                >
                   Apply
                 </button>
                 <div class="template-content-textarea" v-html="template.content"></div>
@@ -131,7 +132,7 @@
         data-bs-target="#offcanvas-template"
         aria-controls="offcanvas-template"
       >
-      <svg-icon icon="btn-templates" />
+        <svg-icon icon="btn-templates" />
         Templates
       </button>
       <button
@@ -141,7 +142,7 @@
         data-bs-target="#offcanvas-copy-existing"
         aria-controls="offcanvas-copy-existing"
       >
-      <svg-icon icon="btn-history" />
+        <svg-icon icon="btn-history" />
         Copy
       </button>
     </div>
@@ -188,7 +189,7 @@ export default {
     }
   },
   components: { FreeleapsEditor, InputSelector, SvgIcon },
-  mounted () {
+  mounted() {
     this.initProducts()
     this.initiateFromInput()
     this.fetchTemplates()
@@ -345,16 +346,16 @@ export default {
 }
 .request-issue-container {
   @extend .flex-colum-container;
-  box-shadow: 0px 0px 24px 0px rgba(212,211,227,0.5);
+  box-shadow: 0px 0px 24px 0px rgba(212, 211, 227, 0.5);
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  overflow: hidden
+  overflow: hidden;
 }
 
 .action-bar {
   @extend .flex-row-container;
   @extend .justify-content-end;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
   padding-top: 6px;
   padding-bottom: 6px;
 }
@@ -377,7 +378,7 @@ export default {
 .description-container {
   @extend .w-100;
   @extend .my-3;
-  flex: 1
+  flex: 1;
 }
 
 .input-description {
@@ -513,13 +514,13 @@ export default {
 .cancel-button {
   @extend .stop-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .submit-button {
   @extend .proceed-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .offcanvas-parent {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
index f3b895f..188507f 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="submission-result-container">
     <div class="submission-result-card">
-      <img src="@/assets/images/submited.png" alt="freeleaps"/>
+      <img src="@/assets/images/submited.png" alt="freeleaps" />
       <span>The request has been submitted!</span>
       <span>
         You can find it in
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 88b620e..5a2f43c 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -111,7 +111,7 @@ const router = createRouter({
 
     {
       name: 'pdf-content-viewer',
-      path: '/pdf-content-viewer',
+      path: '/pdf-content-viewer/:content_id',
       meta: { requiredRoles: [userRoleEnum.NONE] },
       components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest },
       props: true