diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 484b4cd..a1d730f 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -1,43 +1,22 @@
 <template>
   <div class="request-hub">
-    <div
-      v-for="(group, index) in requestGroups"
-      :key="index"
-      class="request-invitations"
-      :id="group.name"
-    >
+    <div v-for="(group, index) in requestGroups" :key="index" class="request-invitations" :id="group.name">
       <div v-if="group.data" class="accordion" id="request-invitation-container">
-        <div
-          v-for="(request, index) in group.data"
-          :key="index"
-          :id="request.id"
-          class="accordion-item my-3"
-        >
+        <div v-for="(request, index) in group.data" :key="index" :id="request.id" class="accordion-item my-3">
           <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              :data-bs-target="'#collapse' + index"
-              aria-expanded="false"
-              :aria-controls="'collapse' + index"
-            >
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              :data-bs-target="'#collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
               <div class="request-content-container">
                 <div class="request-content-issuer-container">
-                  <label class="request-content-label" for="request-content-issuer-box"
-                    >Issuer</label
-                  >
+                  <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
-                    >
+                      {{ request.issuer_profile.last_name }}</span>
                   </div>
                 </div>
                 <div class="request-content-title-container">
-                  <label class="request-content-label" for="request-content-title-box"
-                    >Request</label
-                  >
+                  <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>
@@ -61,102 +40,59 @@
               </div>
             </button>
           </h2>
-          <div
-            :id="'collapse' + index"
-            class="accordion-collapse collapse"
-            data-bs-parent="#request-invitation-container"
-          >
+          <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="(document_id, index) in request.document_ids" :key="document_id">
-                  <a :href="getDocumentDownloadLink(document_id)" download>file-{{ index }}</a>
+                <div v-for="(file, index) in request.attached_files" :key="index">
+                  <button @click="previewAttachedFile(request.id, file.document_id)">{{ file.file_name }}</button>
                 </div>
               </div>
               <div class="issuer-profile-container">
-                <label class="issuer-profile-label" for="issuer-achievement-container"
-                  >Issuer profile</label
-                >
+                <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"
-                    >
+                    <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
-                      >
+                        {{ 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"
-                    >
+                    <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
-                      >
+                        {{ 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"
-                    >
+                    <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
-                      >
+                        {{ 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"
-                    >
+                    <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
-                      >
+                        {{ 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"
-                    >
+                    <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
-                      >
+                        {{ request.issuer_achievement.activeness.credit }}</span>
                     </div>
                   </div>
                 </div>
@@ -170,7 +106,7 @@
 </template>
 
 <script>
-import { RequestHubApi, DateUtils, requestHubUtils } from '../../../utils/index'
+import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '../../../utils/index'
 import { proposingModelEnum } from '../../../types/index'
 export default {
   name: 'RequestHub',
@@ -202,8 +138,15 @@ export default {
     getDateFromFulltimeString(fulltime) {
       return DateUtils.FromJsonToDateString(fulltime)
     },
-    getDocumentDownloadLink(document_id) {
-      return '/api/v1/document/download/' + document_id
+    previewAttachedFile(request_id, document_id) {
+      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
+        let media_data = response.data
+        console.log(media_data)
+        //TODO: navigate to the preview page
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      }
+      )
     }
   }
 }
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index c58d242..29af71e 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -319,6 +319,21 @@ class WorksapceApi {
     })
     return request
   }
+  static fetchAttachedFileAsMediaData(request_id, document_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/request/fetch-attached-file-as-media-data',
+      {
+        request_id: request_id,
+        document_id: document_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+
+  }
 }
 
 export { WorksapceApi }