diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index bfc8750..cfed169 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     retrieve_directories() {
-      ContentApi.retrieve_about_directories()
+      ContentApi.retrieve_about_directories(window.location.host)
         .then((response) => {
           this.directories = response.data
         })
@@ -62,17 +62,20 @@ export default {
     padding: 0;
   }
 }
+
 .directory_cover_image {
   width: 100%;
   border-radius: 16px;
   margin-bottom: 16px;
 }
+
 .directory-title {
   font-size: 48px;
   // font-weight: bold;
   color: #18181a;
   margin-bottom: 5px;
 }
+
 .directory-subtitle {
   font-size: 14px;
   color: #666666;
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index d16296a..f29644f 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     retrieve_blogs() {
-      ContentApi.retrieve_blogs()
+      ContentApi.retrieve_blogs(window.location.host)
         .then((response) => {
           this.blogs = response.data
         })
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index 3b72088..ed2330d 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     retrieve_directories() {
-      ContentApi.retrieve_career_directories()
+      ContentApi.retrieve_career_directories(window.location.host)
         .then((response) => {
           this.directories = response.data
         })
@@ -61,6 +61,7 @@ export default {
     p {
       margin: 0;
     }
+
     .career-title {
       font-size: 32px;
       margin-bottom: 10px;
diff --git a/frontend/src/pages/public/Contact.vue b/frontend/src/pages/public/Contact.vue
index 0f21013..c2241a1 100644
--- a/frontend/src/pages/public/Contact.vue
+++ b/frontend/src/pages/public/Contact.vue
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     retrieve_directories() {
-      ContentApi.retrieve_contact_directories()
+      ContentApi.retrieve_contact_directories(window.location.host)
         .then((response) => {
           this.directories = response.data
         })
@@ -63,6 +63,7 @@ export default {
       img {
         width: 100%;
       }
+
       .contact-left-content {
         padding: 32px;
         display: flex;
@@ -82,6 +83,7 @@ export default {
         }
       }
     }
+
     .contact-right {
       margin-left: 24px;
       box-shadow: 0px 0px 24px 0px #d4d3e380;
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 6212e45..fbb695d 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -20,7 +20,6 @@
               <span class="conversation-last-update-date">{{
                 getDateFromFulltimeString(conversation.create_time)
               }}</span>
-              <!-- <span v-if="unreadCountMapper" class="conversation-unreadcount">{{unreadCountMapper}}</span> -->
             </div>
             <div class="conversation-summary-highlight-container">
               {{ conversation.last_message?.message_body }}
@@ -83,24 +82,10 @@ export default {
   components: { SvgIcon },
   name: 'MessageHub',
   props: {},
-  mounted() {
-    // this.fetchConversations()
-  },
-  // watch: {
-  //   conversations: {
-  //     handler: function (val) {
-  //       if (val && val.length > 0) {
-  //         this.current_thread = val[0]
-  //         this.clearUnreadMessageBy(val[0])
-  //       }
-  //     },
-  //     deep: false
-  //   }
-  // },
+  mounted() {},
   data() {
     return {
       userIdentityNote: this.mnx_getUserIdentity(),
-      // conversations: [],
       selConversation: null,
       messages: [],
       writtenMessage: null
@@ -126,19 +111,6 @@ export default {
     }
   },
   methods: {
-    // fetchConversations() {
-    //   MessageHubApi.fetchConversations(new Date('01 Jan 1970 00:00:00 GMT').toISOString())
-    //     .then((response) => {
-    //       const conversations = response.data.conversations || []
-    //       this.conversations = conversations
-    //       if (conversations.length > 0) {
-    //         this.selectConversation(conversations[0])
-    //       }
-    //     })
-    //     .catch((error) => {
-    //       this.mnx_backendErrorHandler(error)
-    //     })
-    // },
     fetchMessageForConversation(conversation_id) {
       const jwt = userUtils.getJwtToken()
       MessageHubApi.fetchMessages(
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index bec25dd..442bfb2 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -447,11 +447,6 @@ export default {
   border-top: 1px solid #dee2e6;
 }
 
-// .statistics-content-label {
-//   @extend .label-text-light;
-//   @extend .w-100;
-// }
-
 .statistics-content-container {
   @extend .flex-colum-container;
   padding: 0;
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index aedb0c5..bc9918a 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -77,11 +77,23 @@
                     {{ $t('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)">
+                  <div
+                    class="pdf-actions"
+                    v-for="(file, index) in request.attached_files"
+                    :key="index"
+                  >
+                    <button
+                      class="btn btn-link"
+                      data-bs-toggle="modal"
+                      data-bs-target="#pdf-viewer"
+                      @click="previewAttachedFile(request.id, file.document_id, file.file_name)"
+                    >
                       {{ $t('Preview') }}{{ file.file_name }}
                     </button>
-                    <button @click="downloadAttachedFile(request.id, file.document_id)">
+                    <button
+                      class="btn btn-link"
+                      @click="downloadAttachedFile(request.id, file.document_id)"
+                    >
                       {{ $t('Download') }}{{ file.file_name }}
                     </button>
                   </div>
@@ -179,12 +191,38 @@
       </div>
     </div>
   </div>
+  <div
+    class="modal fade"
+    id="pdf-viewer"
+    tabindex="-1"
+    aria-labelledby="pdf-viewer-label"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="pdf-viewer-label">{{ pdfDocument.title }}</h1>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <PDFReader :doc="pdfDocument.doc" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '@/utils/index'
 import { proposingModelEnum } from '@/types/index'
+import PDFReader from '@/components/PDFReader.vue'
 export default {
+  components: { PDFReader },
   name: 'RequestHub',
   props: {},
   mounted() {
@@ -193,7 +231,8 @@ export default {
   data() {
     return {
       requestGroups: [],
-      message: null
+      message: null,
+      pdfDocument: {}
     }
   },
 
@@ -214,17 +253,16 @@ export default {
     getDateFromFulltimeString(fulltime) {
       return DateUtils.FromJsonToDateString(fulltime)
     },
-    previewAttachedFile(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
-      //     console.log(media_data)
-      //   })
-      //   .catch((error) => {
-      //     this.mnx_backendErrorHandler(error)
-      //   })
+    previewAttachedFile(request_id, document_id, title) {
+      this.pdfDocument.title = title
+      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
+        .then((response) => {
+          let media_data = response.data
+          this.pdfDocument.doc = { url: media_data }
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     },
     downloadAttachedFile(request_id, document_id) {
       WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id)
@@ -413,4 +451,16 @@ export default {
   @extend .text-start;
   font-weight: bold;
 }
+
+.pdf-actions {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+
+  .btn-link {
+    padding: 0;
+    margin-right: 12px;
+  }
+}
 </style>
diff --git a/frontend/src/pages/user/requests/ProposalSubmitted.vue b/frontend/src/pages/user/requests/ProposalSubmitted.vue
index 0d44eb3..46188b7 100644
--- a/frontend/src/pages/user/requests/ProposalSubmitted.vue
+++ b/frontend/src/pages/user/requests/ProposalSubmitted.vue
@@ -12,10 +12,6 @@
 </template>
 
 <script>
-import {
-  UserProfileApi
-  // userProfileValidator,
-} 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 81c3666..01c964d 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -221,36 +221,6 @@
             <button class="stage-item-delete-button">
               <svg-icon v-if="index != 0" icon="delete" @click="removeStage(index)" />
             </button>
-            <!-- <div class="stage-item-content-container" id="stage-item-content">
-              <div class="stage-payment-container">
-                <label class="stage-content-label" for="stage-payment-content">Payment</label>
-                <div class="stage-payment-content-container" id="stage-payment-content">
-                  <input
-                    type="text"
-                    class="stage-payment-content-text"
-                    id="stage-payment-content-text"
-                    v-model="stage.payment"
-                  />
-                  <span class="stage-payment-content-span"> {{ stage.currency }}</span>
-                </div>
-              </div>
-              <div class="stage-duration-container">
-                <label class="stage-content-label" for="stage-duration-content">Duration</label>
-                <div class="stage-duration-content-container" id="stage-duration-content">
-                  <input
-                    type="text"
-                    class="stage-duration-content-text"
-                    v-model="stage.duration_in_days"
-                  />
-                  <span class="stage-duration-content-span"> day(s)</span>
-                </div>
-              </div>
-              <div class="stage-note-container">
-                <label class="stage-content-label" for="stage-note-content">Notes</label>
-                <input class="stage-note-content-text" id="stage-note-content" v-model="stage.note" />
-              </div>
-              
-            </div> -->
           </div>
           <div class="stage-more-action-container">
             <button class="stage-add-more-button" @click="addStage()">
@@ -350,12 +320,6 @@ export default {
     }
   },
   methods: {
-    // loadTemplates() {
-    //   this.mnx_navToLoadTemplates()
-    // },
-    // copyExisting() {
-    //   this.mnx_navToCopyProposals()
-    // },
     isUserInCNY() {
       return window.location.host.includes('localhost') || window.location.href.includes('com.cn')
     },
diff --git a/frontend/src/pages/user/workspace/requestIssue/Deposit.vue b/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
index 85b5f0d..2146ae8 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
@@ -10,10 +10,6 @@
 </template>
 
 <script>
-import {
-  UserProfileApi
-  // requestHubUtils,
-} 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 261d34b..8f92b74 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
@@ -8,10 +8,6 @@
 </template>
 
 <script>
-import {
-  UserProfileApi
-  // userProfileValidator,
-} from '@/utils/index'
 export default {
   name: 'RquestIssueDeposited',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestManage/Manage.vue b/frontend/src/pages/user/workspace/requestManage/Manage.vue
index 470f504..46e4465 100644
--- a/frontend/src/pages/user/workspace/requestManage/Manage.vue
+++ b/frontend/src/pages/user/workspace/requestManage/Manage.vue
@@ -91,7 +91,7 @@
 
 <script>
 import { WorksapceApi, requestIssueUtils, DateUtils } from '@/utils/index'
-import { requestStatusEnum, convertIntoToRequestStatus } from '@/types/index'
+import { convertIntoToRequestStatus } from '@/types/index'
 export default {
   name: 'RequestManage',
   props: {
diff --git a/frontend/src/plugins/store/basic.js b/frontend/src/plugins/store/basic.js
index e42ccd3..041ebd0 100644
--- a/frontend/src/plugins/store/basic.js
+++ b/frontend/src/plugins/store/basic.js
@@ -13,7 +13,6 @@ const basicStore = {
       language: 'zh',
       conversations: [],
       unreadConversationCount: 0,
-      // conversation_update_time: null,
       downstream_web_socket: null
     }
   },
@@ -56,12 +55,8 @@ const basicStore = {
             }
           }
 
-          // event = connected 初始化conversation list
-          // 似乎并不需要在获取conversation list的时候，进行时间戳处理
           MessageHubApi.fetchConversations(GWT, token).then((response) => {
             const conversations = response.data.conversations || []
-            // 既然每次都是新消息在第一位，那么只需要对比conversation list的长度，就可以知道是否有新的会话产生。
-            // 消息初始化不做比对
             let updateLength = 0
             if (data.event !== 'connected') {
               updateLength = conversations.length - state.conversations.length
diff --git a/frontend/src/utils/backend/content.js b/frontend/src/utils/backend/content.js
index 91fbd9c..3fca861 100644
--- a/frontend/src/utils/backend/content.js
+++ b/frontend/src/utils/backend/content.js
@@ -1,7 +1,7 @@
 import { backendAxios } from './axios'
 class ContentApi {
-  static retrieve_blogs() {
-    const request = backendAxios.post('/api/content/retrieve-blogs', {}, {})
+  static retrieve_blogs(host) {
+    const request = backendAxios.post('/api/content/retrieve-blogs', { host: host }, {})
     return request
   }
   static retrieve_blog_content(document_id) {
@@ -15,16 +15,26 @@ class ContentApi {
     return request
   }
 
-  static retrieve_about_directories() {
-    const request = backendAxios.post('/api/content/retrieve-about-directories', {}, {})
+  static retrieve_about_directories(host) {
+    const request = backendAxios.post('/api/content/retrieve-about-directories', { host: host }, {})
     return request
   }
-  static retrieve_career_directories() {
-    const request = backendAxios.post('/api/content/retrieve-career-directories', {}, {})
+  static retrieve_career_directories(host) {
+    const request = backendAxios.post(
+      '/api/content/retrieve-career-directories',
+      { host: host },
+      {}
+    )
     return request
   }
-  static retrieve_contact_directories() {
-    const request = backendAxios.post('/api/content/retrieve-contact-directories', {}, {})
+  static retrieve_contact_directories(host) {
+    const request = backendAxios.post(
+      '/api/content/retrieve-contact-directories',
+      {
+        host: host
+      },
+      {}
+    )
     return request
   }
 }