diff --git a/.eslintrc.js b/.eslintrc.js
index 6984915..c3dcf4b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -32,9 +32,11 @@ module.exports = {
       "never"
     ],
     "key-spacing": [
-      "error", { 
-        "beforeColon": false 
-      }
+      "error", { "beforeColon": false }
+    ],
+    "object-curly-spacing": [
+      "error",
+      "always"
     ]
   }
 }
diff --git a/src/assets/scss/bbmri.scss b/src/assets/scss/bbmri.scss
index 68da9f3..9ec2dc4 100644
--- a/src/assets/scss/bbmri.scss
+++ b/src/assets/scss/bbmri.scss
@@ -3,7 +3,7 @@ $theme-colors: (
     "secondary": #003674,
     "danger": #dc3545,
     "warning": #e95713,
-    "info": #017ffd,
+    "info": #3c3c3d,
     "light": #e7e7e7,
     "dark": #3c3c3d
 );
diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
deleted file mode 100644
index c7b687c..0000000
--- a/src/components/ConfirmationModal.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-
-<template>
-  <div
-    class="modal"
-  >
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <h1 class="modal-header">
-          Are you sure you want to abandon this Negotiation?
-        </h1>
-        <div class="modal-body">
-          <p>
-            This is means that you will not be able to access this negotiation again.
-          </p>
-          <div class="modal-footer justify-content-center">
-            <button
-              class="btn btn-secondary"
-              @click="closeModal"
-            >
-              No
-            </button>
-            <button
-              class="btn btn-danger"
-              @click="closeModal; $emit('abandon-negotiation')"
-            >
-              Yes
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  emits: ["close-confirmation-modal", "abandon-negotiation"],
-  methods: {
-    closeModal() {
-      this.$emit("close-confirmation-modal")
-    }
-  }
-}
-
-
-</script>
-
-<style scoped>
-.modal {
-  width: 400px;
-  padding: 20px;
-  margin: 100px auto;
-  border-radius: 10px;
-  z-index: 1;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/NegotiationCard.vue b/src/components/NegotiationCard.vue
index 638f6e7..33f7d0a 100644
--- a/src/components/NegotiationCard.vue
+++ b/src/components/NegotiationCard.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="card mb-2">
     <h5 class="card-header">
-      {{ negotiationTitle }}
+      {{ title }}
       <span class="badge rounded-pill bg-primary float-end">
-        {{ negotiationStatus }}
+        {{ status }}
       </span>
     </h5>
     <div class="card-body">
       <h6 class="card-subtitle mb-2 text-muted">
-        Negotiation ID: {{ negotiationId }}
+        Negotiation ID: {{ id }}
       </h6>
       <h6 class="card-subtitle mb-2 text-muted">
-        Created on: {{ negotiationCreationDate }}
+        Created on: {{ creationDate }}
       </h6>
       <h6 class="card-subtitle mb-2 text-muted">
-        Created by: {{ negotiationSubmitter }}
+        Created by: {{ submitter }}
       </h6>
     </div>
   </div>
@@ -25,31 +25,26 @@
 export default {
   name: "NegotiationCard",
   props: {
-    negotiationId: {
+    id: {
       type: String,
       default: ""
     }, 
-    negotiationTitle: {
+    title: {
       type: String,
       default: ""
     }, 
-    negotiationStatus: {
+    status: {
       type: String,
       default: ""
     },
-    negotiationSubmitter: {
+    submitter: {
       type: String,
       default: ""
     },
-    negotiationResources: {
-      type: Object,
-      default: undefined
-    },
-    negotiationCreationDate: {
+    creationDate: {
       type: Date,
       default: undefined
-    },
-
+    }
   }
 }
 </script>
diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 49262ec..39e7545 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -1,33 +1,30 @@
 <template>
+  <button
+    ref="openModal"
+    hidden
+    data-bs-toggle="modal"
+    data-bs-target="#feedbackModal"
+  />
+  <feedback-modal
+    id="feedbackModal"
+    :title="notificationTitle"
+    :text="notificationText"
+    dismiss-button-text="Back to HomePage"
+    @dismiss="backToHomePage"
+  />
   <div
     v-if="loading"
     class="d-flex align-items-center justify-content-center"
   >
-    <h4>
-      Loading
-      <font-awesome-icon
-        class="ms-2"
-        icon="fa fa-spinner"
-        spin-pulse
-      />
+    <h4 class="me-2">
+      Loading...
     </h4>
+    <div
+      class="spinner-border"
+      role="status"
+    />
   </div>
   <div v-else>
-    <b-modal 
-      id="negotiation-feedback"
-      v-model="notificationVisible"
-      :title="notificationHeader"
-      hide-footer="true"
-      :header-bg-variant="notificationVariant"
-      @hide.prevent
-    >
-      <p class="my-4">
-        {{ notificationBody }}
-      </p>
-      <b-button @click="closeNegotiation">
-        Back to Negotiations
-      </b-button>
-    </b-modal>
     <form-wizard
       v-if="accessCriteria"
       :start-index="0"
@@ -120,15 +117,17 @@
 </template>
 
 <script>
-import { mapActions } from "vuex"
+import FeedbackModal from "@/components/modals/FeedbackModal.vue"
 import { FormWizard, TabContent } from "vue3-form-wizard"
 import "vue3-form-wizard/dist/style.css"
+import { mapActions } from "vuex"
 
 export default {
   name: "NegotiationForm",
   components: {
     FormWizard,
     TabContent,
+    FeedbackModal
   },
   props: {
     requestId: {
@@ -138,22 +137,18 @@ export default {
   },
   data() {
     return {
-      notificationVariant: "light",
-      notificationHeader: "",
-      notificationBody: "",
+      notificationTitle: "",
+      notificationText: "",
       negotiationCriteria: {},
       accessCriteria: undefined,
     }
   },
   computed: {
-    notificationVisible() {
-      return this.notificationHeader !== ""
-    },
     loading() {
       if (this.accessCriteria !== undefined) {
         this.initNegotiationCriteria()
       }
-      return this.accessCriteria === undefined && !this.notificationVisible
+      return this.accessCriteria === undefined
     },
   },
   async mounted() {
@@ -162,13 +157,12 @@ export default {
     })
     if (result.code) {        
       if (result.code == 404) {
-        this.showNotification("danger", "Error", "Request not found")
+        this.showNotification("Error", "Request not found")
       } else {
-        this.showNotification("danger", "Error", "Error retrieving the request")
+        this.showNotification("Error", "Cannot contact the server to get request information")
       }
     } else if (result.negotiationId) {    
-      // if the negotiationId is present it means that the request is already associated to a negotiation
-      this.showNotification("danger", "Error", "Request already associated to a negotiation")
+      this.showNotification("Error", "Request already submitted")
     } else {
       await this.retrieveAccessCriteriaByResourceId({
         resourceId: result.resources[0].id
@@ -187,7 +181,7 @@ export default {
         }
       }).then((negotiationId) => {
         if (negotiationId) {
-          this.showNotification("light", 
+          this.showNotification(
             "Negotiation Created Correctly", 
             "You can follow the status of this negotiation in your researcher page")
         } 
@@ -199,13 +193,13 @@ export default {
     handleFileUpload(event, section, criteria) {
       this.negotiationCriteria[section][criteria] = event.target.files[0]
     },
-    showNotification(variant, header, body) {
-      this.notificationVariant = variant
-      this.notificationHeader = header
-      this.notificationBody = body
+    showNotification(header, body) {
+      this.$refs.openModal.click()
+      this.notificationTitle = header
+      this.notificationText = body
     },
-    closeNegotiation() {
-      this.$router.push("/researcher")
+    backToHomePage() {
+      this.$router.push("/")
     },
     initNegotiationCriteria() {
       for (var section of this.accessCriteria.sections) {
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index c4ca187..ef2cd15 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -3,93 +3,57 @@
   <div class="container">
     <div class="row">
       <div
-        class="col-9 d-flex"
+        class="col-9"
       >
-        <div
-          v-if="negotiations.length > 0"
-          class="col-12"
+        <NegotiationCard
+          v-for="fn in filteredNegotiations"
+          :id="fn.id"
+          :key="fn.id"
+          :title="fn.payload.project.title"
+          :status="fn.status"
+          :submitter="fn.persons.filter(p => p.role === 'RESEARCHER')[0].name"
+          :creation-date="formatDate(fn.creationDate)"
+          class="cursor-pointer"
+          @click="
+            $router.push({
+              name: 'negotiation-page',
+              params: { negotiationId: fn.id, userRole: userRole },
+            })
+          "
+        />
+        <h2
+          v-if="negotiations.length == 0"
+          class="text-center"
         >
-          <NegotiationCard
-            v-for="item in filteredNegotiations"
-            :key="item.id"
-            :negotiation-id="item.id"
-            :negotiation-title="item.payload.project.title"
-            :negotiation-status="item.status"
-            :negotiation-resources="['res1', 'res2', 'res3']"
-            :negotiation-submitter="item.persons[0].name"
-            :negotiation-creation-date="formatDate(item.creationDate)"
-            class="cursor-pointer"
-            @click="
-              $router.push({
-                name: 'negotiation-page',
-                params: { negotiationId: item.id, userRole: userRole },
-              })
-            "
-          />
-        </div>
-        <div
-          v-else
-        >
-          <h1 class="text-center">
-            No Negotiations found
-          </h1>
-        </div>
+          No Negotiations found
+        </h2>
       </div>
       <div
-        class="
-          col-3"
+        class="col-3"
       >
         <div class="card mb-2">
           <div class="card-header">
             Sort by
           </div>
           <div class="card-body">
-            <div class="form-check">
-              <input
-                id="title"
-                class="form-check-input"
-                type="radio"
-                name="sort"
-                value="title"
-                @change="sort($event.target.value)"
-              >
-              <label
-                class="form-check-label"
-                for="title"
-              >
-                Title
-              </label>
-            </div>
-            <div class="form-check">
+            <div
+              v-for="(value, name) in sortAttrs"
+              :key="name"
+              class="form-check"
+            >
               <input
-                id="status"
+                :id="name"
                 class="form-check-input"
                 type="radio"
                 name="sort"
-                value="status"
+                :value="name"
                 @change="sort($event.target.value)"
               >
               <label
                 class="form-check-label"
-                for="status"
+                :for="name"
               >
-                Status 
-              </label>
-            </div>
-            <div class="form-check">
-              <input
-                id="creationDate"
-                class="form-check-input"
-                type="radio"
-                name="sort"
-                value="creationDate"
-                @change="sort($event.target.value)"
-              >
-              <label
-                class="form-check-label"
-                for="creationDate"
-              >
-                Date of creation
+                {{ value.label }}
               </label>
             </div>
           </div>
@@ -154,8 +118,11 @@
             Filter by date
           </div>
           <div class="card-body">
-            <div class="d-flex align-items-center  mb-2">
-              <label for="startDate">Start: </label>
+            <div class="d-flex align-items-center mb-2">
+              <label
+                class="pe-2 w-25"
+                for="startDate"
+              >Start:</label>
               <input
                 id="startDate"
                 v-model="selectedStartDate"
@@ -163,10 +130,12 @@
                 type="date"
                 @input="updateFilter('dateStart', selectedStartDate)"
               >
-              <span id="startDateSelected" />
             </div>
             <div class="d-flex align-items-center">
-              <label for="endDate">End:</label>
+              <label
+                for="endDate"
+                class="pe-2 w-25"
+              >End:</label>
               <input
                 id="endDate"
                 v-model="selectedEndDate"
@@ -174,7 +143,6 @@
                 type="date"
                 @input="updateFilter('dateEnd', selectedEndDate)"
               >
-              <span id="endDateSelected" />
             </div>
           </div>
         </div>
@@ -211,27 +179,24 @@ export default {
   },
   data() {
     return {
-      headers: ["id", "title", "status"],
-      negotiation: [],
       availableRoles: ROLES,
-      sorting: { "id": {
-        "func": this.sortById, 
-        "order": "asc"
-      }, 
-      "title": {
-        "func": this.sortByTitle, 
-        "order": "asc"
-      }, 
-      "status": {
-        "func": this.sortByStatus, 
-        "order": "asc"
-      }, 
-      "creationDate": {
-        "func": this.sortByCreationDate, 
-        "order": "desc"
-      }, 
-      }, 
-      previuosSortingColumn: "", 
+      sortAttrs: {
+        "title": {
+          label: "Title",
+          sortTransformation: (value) => value.payload.project.title,
+          sortOrder: "asc"
+        },
+        "status": {
+          label: "Status",
+          sortTransformation: (value) => value.status,
+          sortOrder: "asc"
+        },
+        "creationDate": {
+          label: "Date of creation",
+          sortTransformation: (value) => new Date(value.creationDate),
+          sortOrder: "desc"
+        } 
+      },      
       filters: {
         "status": [],
         "dateStart": "",
@@ -260,56 +225,23 @@ export default {
         })     
       }
       return filterConditions.length == 0 ? this.negotiations : this.negotiations.filter(item => filterConditions.every(f => f(item)))
-
     }
-    
-
-
   },
   methods: {
-    abandonRequest() {
-      if (confirm("Are you sure you want to abandon this request?")) {
-        console.log("deleting")
-      }
-    },
-    sortByTitle(a, b) {
-      if (a.payload.project.title < b.payload.project.title) {
-        return this.sorting.title.order == "desc" ? 1 : -1
-      }
-      if (a.payload.project.title > b.payload.project.title) {
-        return this.sorting.title.order == "desc" ? -1 : 1 
-      }
-      return 0
-    },
-    sortById(a, b) {
-      if (a.id < b.id) {
-        return this.sorting.id.order == "desc" ? 1 : -1
-      }
-      if (a.id > b.id) {
-        return this.sorting.id.order == "desc" ? -1 : 1 
-      }
-      return 0
-    },
-    sortByStatus(a, b) {
-      if (a.status < b.status) {
-        return this.sorting.status.order == "desc" ? 1 : -1
-      }
-      if (a.status > b.status) {
-        return this.sorting.status.order == "desc" ? -1 : 1 
-      }
-      return 0
-    },
-
-    sortByCreationDate(a, b){
-      const dateA = new Date(a.creationDate)
-      const dateB = new Date(b.creationDate)
-      return this.sorting.creationDate.order == "desc" ? dateB-dateA : dateA-dateB
-
-    },
-
     sort(column){
       let sortedNegotiations = this.negotiations
-      return sortedNegotiations.sort(this.sorting[column]["func"])
+
+      return sortedNegotiations.sort((a, b) => {
+        a = this.sortAttrs[column].sortTransformation(a)
+        b = this.sortAttrs[column].sortTransformation(b)
+        if (a < b) {
+          return this.sortAttrs[column].sortOrder == "desc" ? 1 : -1
+        }
+        if (a > b) {
+          return this.sortAttrs[column].sortOrder == "desc" ? -1 : 1 
+        }
+        return 0
+      })
     },
     formatDate(date){
       return moment(date).format("YYYY/MM/DD HH:mm")
diff --git a/src/components/NegotiationModal.vue b/src/components/NegotiationModal.vue
deleted file mode 100644
index 95ac5fe..0000000
--- a/src/components/NegotiationModal.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div
-    id="exampleModal"
-    class="modal fade"
-    tabindex="-1"
-    aria-labelledby="exampleModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1
-            id="exampleModalLabel"
-            class="modal-title fs-5"
-          >
-            Modal title
-          </h1>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          />
-        </div>
-        <div class="modal-body">
-          ...
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-          >
-            Save changes
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "NegotiationModal",
-  props: {
-    modalActive: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
diff --git a/src/components/NegotiationPosts.vue b/src/components/NegotiationPosts.vue
index 1e1133b..cb804f4 100644
--- a/src/components/NegotiationPosts.vue
+++ b/src/components/NegotiationPosts.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="negotiation && negotiation.postsEnabled">
-    <h3>Comments</h3>
+    <h5>Comments</h5>
     <div
       v-for="post in posts"
       :key="post.id"
@@ -20,7 +20,11 @@
         {{ post.text }}
       </div>
     </div>
-    <h3>Send a {{ scope }} message</h3>
+    <hr
+      v-if="posts.length === 0"
+      class="my-3"
+    >
+    <h5>Send a {{ scope }} message</h5>
     <form
       class="mb-4"
       @submit.prevent="addMessage"
@@ -38,16 +42,10 @@
       </button>
     </form>
   </div>
-  <div v-else>
-    <h5>
-      Your request is waiting for approval by our team. No need to keep refreshing the page,
-      you will be notified of any changes via email.
-    </h5>
-  </div>
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex"
+import { mapActions } from "vuex"
 import { dateFormat, MESSAGE_STATUS } from "@/config/consts"
 import moment from "moment"
 
@@ -99,9 +97,6 @@ export default {
     resetForm() {
       this.message.text = ""
     },
-    computed: {
-      ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
-    },
     printDate: function (date) {
       return moment(date).format(dateFormat)
     },
diff --git a/src/components/modals/ConfirmationModal.vue b/src/components/modals/ConfirmationModal.vue
new file mode 100644
index 0000000..281ce1c
--- /dev/null
+++ b/src/components/modals/ConfirmationModal.vue
@@ -0,0 +1,58 @@
+<template>
+  <NegotiatorModal
+    :id="id"
+    :title="title"
+  >
+    <template #body>
+      <p>
+        {{ text }}
+      </p>
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="btn btn-danger"
+        data-bs-dismiss="modal"
+        @click="emitConfirm"
+      >
+        Confirm
+      </button>
+    </template>
+  </NegotiatorModal>
+</template>
+
+<script>
+
+import NegotiatorModal from "./NegotiatorModal.vue"
+
+export default {
+  components: { NegotiatorModal },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["confirm"],
+  methods: {
+    emitConfirm() {
+      this.$emit("confirm")
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/FeedbackModal.vue b/src/components/modals/FeedbackModal.vue
new file mode 100644
index 0000000..a7c49bf
--- /dev/null
+++ b/src/components/modals/FeedbackModal.vue
@@ -0,0 +1,58 @@
+<template> 
+  <NegotiatorModal
+    :id="id"
+    :title="title"
+    :fade="fade"
+  >
+    <template #body>
+      <p>
+        {{ text }}
+      </p>
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-secondary"
+        data-bs-dismiss="modal"
+        @click="emitDismiss"
+      >
+        {{ dismissButtonText }}
+      </button>
+    </template>
+  </NegotiatorModal>
+</template>
+<script>
+import NegotiatorModal from "./NegotiatorModal.vue"
+
+export default {
+  components: { NegotiatorModal },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    },
+    dismissButtonText: {
+      type: String,
+      default: "OK"
+    }
+  },
+  emits: ["dismiss"],
+  methods: {
+    emitDismiss() {
+      this.$emit("dismiss")
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/NegotiatorModal.vue b/src/components/modals/NegotiatorModal.vue
new file mode 100644
index 0000000..3a1434d
--- /dev/null
+++ b/src/components/modals/NegotiatorModal.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    :id="id"
+    class="modal"
+    :class="{ fade: fade }"
+    tabindex="-1"
+    :aria-labelledby="`${id}Label`"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content text-center">
+        <h4 class="modal-header">
+          {{ title }}
+        </h4>
+        <div class="modal-body">
+          <slot name="body" />
+        </div>
+        <div class="modal-footer justify-content-center bg-light">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </div> 
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    fade: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/PrivatePostModal.vue b/src/components/modals/PrivatePostModal.vue
new file mode 100644
index 0000000..b0c7995
--- /dev/null
+++ b/src/components/modals/PrivatePostModal.vue
@@ -0,0 +1,47 @@
+<template>
+  <NegotiatorModal
+    :id="id"
+    :title="`Resource: ${resourceId}`"
+  >
+    <template #body>
+      <NegotiationPosts 
+        :negotiation="negotiation"
+        :user-role="userRole"
+        scope="private"
+        :resource-id="resourceId"
+      />
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+      >
+        Close
+      </button>
+    </template>
+  </NegotiatorModal>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    resourceId: {
+      type: String,
+      required: true
+    },
+    negotiation: {
+      type: Object,
+      required: true
+    },
+    userRole: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/components/modals/UpdateStatusModal.vue b/src/components/modals/UpdateStatusModal.vue
new file mode 100644
index 0000000..f2190ef
--- /dev/null
+++ b/src/components/modals/UpdateStatusModal.vue
@@ -0,0 +1,75 @@
+<template>
+  <NegotiatorModal
+    :id="id"
+    :title="`Resource: ${resourceId}`"
+  >
+    <template #body>
+      <label
+        class="form-label"
+      >Select new status: </label>
+      <select
+        v-model="selectedItem"
+        class="form-select"
+      >
+        <option
+          v-for="response in options"
+          :key="response"
+          :value="response"
+        >
+          {{ response }}
+        </option>
+      </select>
+    </template>
+    <template #footer>
+      <button
+        type="button"
+        class="btn btn-info"
+        data-bs-dismiss="modal"
+      >
+        Close
+      </button>
+      <button
+        type="button"
+        class="btn btn-secondary"
+        data-bs-dismiss="modal"
+        @click="emitSelected"
+      >
+        Submit
+      </button>
+    </template>
+  </NegotiatorModal>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    resourceId: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["selected"],
+  data() {
+    return {
+      selectedItem: "",
+    }
+  },
+  methods: {
+    emitSelected () {
+      this.$emit("selected", this.selectedItem)
+    }
+  }
+}
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 471503d..95653c0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,6 @@ import OidcCallback from "@/components/OidcCallback.vue"
 import HomePage from "../views/HomePage.vue"
 import NegotiationCreatePage from "../views/NegotiationCreatePage.vue"
 import NegotiationPage from "../views/NegotiationPage.vue"
-import Login from "@/views/LoginPage.vue"
 import store from "@/store"
 import { vuexOidcCreateRouterMiddleware } from "vuex-oidc"
 import UserPage from "@/views/UserPage.vue"
@@ -42,11 +41,6 @@ const router = createRouter({
     component: UserPage,
     props: { userRole: "ADMIN" },
     meta: { isPublic: false }
-  }, {
-    path: "/login",
-    name: "login",
-    component: Login,
-    meta: { isPublic: true }
   }, {
     path: "/negotiations/:negotiationId/:userRole",
     name: "negotiation-page",
diff --git a/src/store/actions.js b/src/store/actions.js
index d694a16..bb67c49 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -9,9 +9,7 @@ const USER_PATH = `${BASE_API_PATH}/users/roles`
 const ATTACHMENTS_PATH = `${BASE_API_PATH}/attachments`
 
 function getBearerHeaders(token) {
-  return {
-    Authorization: `Bearer ${token}`
-  }
+  return { Authorization: `Bearer ${token}` }
 }
 
 
@@ -21,9 +19,7 @@ export default {
       .then((response) => {
         // it handles the error when backend is unreachable but vite proxy strangely return 200
         if (response.data == "") {
-          return {
-            code: 500
-          }
+          return { code: 500 }
         } else {
           return response.data
         }
@@ -35,7 +31,7 @@ export default {
       })
   },
   retrieveAccessCriteriaByResourceId({ state, commit }, { resourceId }) {
-    return axios.get(`${ACCESS_CRITERIA_PATH}`, {headers: getBearerHeaders(state.oidc.access_token), params: {resourceId: resourceId}})
+    return axios.get(`${ACCESS_CRITERIA_PATH}`, { headers: getBearerHeaders(state.oidc.access_token), params: { resourceId: resourceId } })
       .then((response) => {
         return response.data
       })
@@ -69,7 +65,7 @@ export default {
         }
       }
     }
-    return axios.post(NEGOTIATION_PATH, data, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.post(NEGOTIATION_PATH, data, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data.id
       })
@@ -79,7 +75,7 @@ export default {
 
   },
   retrieveNegotiationsByRole({ state, commit }, { userRole }) {
-    return axios.get(`${NEGOTIATION_PATH}`, {headers: getBearerHeaders(state.oidc.access_token), params: {userRole: userRole}})
+    return axios.get(`${NEGOTIATION_PATH}`, { headers: getBearerHeaders(state.oidc.access_token), params: { userRole: userRole } })
       .then((response) => {
         return response.data
       })
@@ -89,7 +85,7 @@ export default {
       })
   },
   updateNegotiationStatus({ state, commit }, { negotiationId , event }) {
-    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle/${event}`, {}, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle/${event}`, {}, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         commit("setNotification", `Negotiation updated correctly with data ${response.data.id}`)
         return response.data
@@ -100,7 +96,7 @@ export default {
       })
   },
   retrievePossibleEvents({ state, commit }, { negotiationId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle`, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/lifecycle`, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
@@ -109,7 +105,7 @@ export default {
       })
   },
   retrievePossibleEventsForResource({ state, commit }, { negotiationId, resourceId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle`, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle`, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
@@ -118,7 +114,7 @@ export default {
       })
   },
   updateResourceStatus({ state, commit }, { negotiationId , resourceId, event }) {
-    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle/${event}`, {}, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.put(`${NEGOTIATION_PATH}/${negotiationId}/resources/${resourceId}/lifecycle/${event}`, {}, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         commit("setNotification", `Negotiation updated correctly with data ${response.data.id}`)
         return response.data
@@ -129,7 +125,7 @@ export default {
       })
   },
   async retrieveNegotiationById({ state, commit }, { negotiationId }) {
-    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${negotiationId}`, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
@@ -139,8 +135,8 @@ export default {
   },
   retrievePostsByNegotiationId({ state, commit }, { negotiationId, type, resourceId }) {
     let url = `${NEGOTIATION_PATH}/${negotiationId}/posts`
-    let params = resourceId ? {type: type, resource: resourceId} : {type: type}
-    return axios.get(url, {headers: getBearerHeaders(state.oidc.access_token), params: params})
+    let params = resourceId ? { type: type, resource: resourceId } : { type: type }
+    return axios.get(url, { headers: getBearerHeaders(state.oidc.access_token), params: params })
       .then((response) => {
         return response.data
       })
@@ -149,7 +145,7 @@ export default {
       })
   },
   addMessageToNegotiation({ state, commit }, { data }) {
-    return axios.post(`${NEGOTIATION_PATH}/${data.negotiationId}/posts`, data, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.post(`${NEGOTIATION_PATH}/${data.negotiationId}/posts`, data, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
@@ -158,7 +154,7 @@ export default {
       })
   },
   markMessageAsRead({ state }, { data }) {
-    return axios.put(`${NEGOTIATION_PATH}/${data.negotiationId}/posts/${data.postId}`, data, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.put(`${NEGOTIATION_PATH}/${data.negotiationId}/posts/${data.postId}`, data, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data.id
       })
@@ -169,7 +165,7 @@ export default {
   getUnreadMessagesByRole({ state }, { data }) {
     //the role shoud be complementary in relation of the one from the user 
     let complementaryRole = data.Rolename == ROLES.RESEARCHER ? ROLES.REPRESENTATIVE : ROLES.RESEARCHER
-    return axios.get(`${NEGOTIATION_PATH}/${data.negotiationId}/${complementaryRole}/posts`, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.get(`${NEGOTIATION_PATH}/${data.negotiationId}/${complementaryRole}/posts`, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
@@ -178,7 +174,7 @@ export default {
       })
   },
   retrieveUserRoles({ state, commit }) {
-    return axios.get(USER_PATH, {headers: getBearerHeaders(state.oidc.access_token)})
+    return axios.get(USER_PATH, { headers: getBearerHeaders(state.oidc.access_token) })
       .then((response) => {
         return response.data
       })
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
deleted file mode 100644
index 65108de..0000000
--- a/src/views/LoginPage.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="container pt-4">
-    <div class="row text-center">
-      <div class="col-3" />
-      <div class="col-6">
-        <div class="jumbotron">
-          <h1 class="display-4">
-            Please login before continuing
-          </h1>
-          <p class="lead">
-            You cannot access this page before logging in
-          </p>
-        </div>
-      </div>
-      <div class="col-3" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from "vuex"
-
-
-export default {
-  methods: {
-    ...mapActions([
-      "authenticateOidc"
-    ])
-  }
-}
-</script>
-
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 680cfaa..b82edc9 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -1,29 +1,53 @@
 <template>
-  <button
-    type="button"
-    class="btn btn-secondary"
-    @click="
-      $router.go(-1)
-    "
-  >
-    <i class="bi-arrow-left" />
-    Go back
-  </button>
-  
   <div
-    v-if="isNegotiationLoaded"
-    class="mt-4"
+    v-if="!loading"
   >
-    <h1>
-      {{ negotiation ? negotiation.payload.project.title.toUpperCase() : "" }}
-    </h1>
-    <div class="row">
+    <button
+      type="button"
+      class="btn btn-secondary"
+      @click="
+        $router.go(-1)
+      "
+    >
+      <i class="bi-arrow-left" />
+      Go back
+    </button>
+
+    <confirmation-modal
+      id="abandonModal"
+      title="Are you sure you want to abandon this Negotiation?"
+      text="Confirming, you will not be able to access this negotiation again."
+      @confirm="updateNegotiation('ABANDON')"
+    />
+
+    <update-status-modal
+      id="updateStatusModal"
+      :resource-id="lifecycleResourceId"
+      :options="responseOptions"
+      :visible="updateStatusVisible"
+      @selected="updateResource"
+    />
+
+    <private-post-modal
+      v-for="collection in collections"
+      :id="`privatePostModal${getElementIdFromCollectionId(collection)}`"
+      :key="collection"
+      :resource-id="collection"
+      :negotiation="negotiation"
+      :user-role="userRole"
+      :visible="privatePostVisible"
+    />
+
+    <div class="row mt-4">
+      <h1 class="text-primary fw-bold">
+        {{ negotiation ? negotiation.payload.project.title.toUpperCase() : "" }}
+      </h1>
       <div class="col-8">
-        <ul class="border mt-3">
+        <ul class="list-group list-group-flush rounded border px-3 my-3">
           <li
             v-for="(element, key) in negotiation.payload"
             :key="element"
-            class="list-group-item border-bottom"
+            class="list-group-item border-bottom p-3"
           >
             <span class="fs-5 fw-bold text-secondary border-bottom mt-3">
               {{ key.toUpperCase() }}</span>
@@ -33,8 +57,7 @@
               class="mt-3"
             >
               <label
-                class="me-2 ml=fw-bold"
-                style="font-weight: bold"
+                class="me-2 fw-bold"
               >{{ subelementkey.toUpperCase() }}:</label>
               <span v-if="isAttachment(subelement)">
                 {{ subelement.name }}
@@ -51,78 +74,89 @@
               </span>
             </div>
           </li>
-          <li class="list-group-item ">
+          <li class="list-group-item p-3">
             <p
               type="button"
               data-bs-toggle="collapse"
-              data-bs-target="#collapseExample"
+              data-bs-target="#collectionsList"
               aria-expanded="false"
-              aria-controls="collapseExample"
+              aria-controls="collectionsList"
             >
               <span class="fs-5 fw-bold text-secondary border-bottom mt-3">
                 <i class="bi bi-card-list" />
-                Collections ({{ numberOfCollections }})
+                COLLECTIONS ({{ numberOfCollections }})
               </span>
             </p>
             <div
-              id="collapseExample"
+              id="collectionsList"
               class="collapse"
             >
-              <div class="card card-body border-0">
-                <ul>
-                  <li
-                    v-for="collection in collections"
-                    :key="collection"
-                  >
-                    <div class="me-auto p-2">
-                      <label class="me-2 fw-bold small">{{ collection }}</label>
-                      <span>
-                        {{ getStatusForCollection(collection) }}
-                        <button
-                          v-if="userRole === 'REPRESENTATIVE' && negotiation.status === 'ONGOING' && isRepresentativeForResource(collection)"
-                          class="btn btn-secondary btn-sm me-2 mb-1  float-end order-first"
-                          @click.stop="interactLifecycleModal(collection)"
-                        >
-                          <i class="bi-gear" />
-                        </button>
-                        <button
-                          type="button"
-                          class="btn btn-secondary btn-sm me-2 mb-1 float-end"
-                          @click.stop="interactPrivatePostModal(collection)"
-                        >
-                          <i class="bi-chat-fill" />
-                        </button>
-                      </span>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <ul>
+                <li
+                  v-for="collection in collections"
+                  :key="collection"
+                >
+                  <div class="me-auto p-2">
+                    <label class="me-2 fw-bold small">{{ collection }}</label>
+                    <span>
+                      {{ getStatusForCollection(collection) }}
+                      <button
+                        v-if="userRole === 'REPRESENTATIVE' 
+                          && negotiation.status === 'ONGOING'
+                          && isRepresentativeForResource(collection)"
+                        class="btn btn-secondary btn-sm me-2 mb-1 float-end order-first"
+                        data-bs-toggle="modal"
+                        data-bs-target="#updateStatusModal"
+                        @click.stop="interactLifecycleModal(collection)"
+                      >
+                        <i class="bi-gear" />
+                      </button>
+                      <button
+                        v-if="negotiation && negotiation.postsEnabled"
+                        type="button"
+                        class="btn btn-secondary btn-sm me-2 mb-1 float-end"
+                        :data-bs-target="`#privatePostModal${getElementIdFromCollectionId(collection)}`"
+                        data-bs-toggle="modal"
+                        @click.prevent="interactPrivatePostModal(collection)"
+                      >
+                        <i class="bi-chat-fill" />
+                      </button>
+                    </span>
+                  </div>
+                </li>
+              </ul>
             </div>
           </li>
         </ul>
         <NegotiationPosts
+          v-if="negotiation && negotiation.postsEnabled"
           :negotiation="negotiation"
           :user-role="userRole"
           scope="public"
         />
+        <div v-else>
+          <h5>
+            Your request is waiting for approval by our team. You will be notified of any changes via email.
+          </h5>
+        </div>
       </div>
       <div
         class="col-4"
       >
-        <ul class="list-group">
-          <li class="list-group-item">
+        <ul class="list-group list-group-flush my-3">
+          <li class="list-group-item p-2">
             <div class="fw-bold text-secondary">
               Author:
             </div>
             <div>{{ authorName }}</div>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item p-2">
             <div class="fw-bold text-secondary">
               Negotiation ID:
             </div>
             <span> {{ negotiation ? negotiation.id : "" }}</span>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item p-2">
             <div class="fw-bold text-secondary">
               Status:
             </div>
@@ -131,7 +165,8 @@
                 class="float-end"
                 type="button"
                 role="button"
-                @click="showConfirmationDialog"
+                data-bs-toggle="modal"
+                data-bs-target="#abandonModal"
               >
                 <i class="bi bi-trash" />
                 Abandon
@@ -171,8 +206,7 @@
         </div>
       </div>
     </div>
-  </div>
-  
+  </div>  
   <div
     v-else
     class="d-flex justify-content-center flex-row"
@@ -189,100 +223,21 @@
       </div>
     </div>
   </div>
-
-  <div
-    v-if="showPrivatePostModal"
-    class="modal"
-  >
-    <div class="modal-dialog modal-dialog-scrollable modal-lg">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title">
-            Resource ID: {{ privatePostResourceId }}
-          </h1>
-        </div>
-        <div class="modal-body">
-          <NegotiationPosts 
-            :negotiation="negotiation"
-            :user-role="userRole"
-            scope="private"
-            :resource-id="privatePostResourceId"
-          />
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-danger"
-            @click="showPrivatePostModal = false"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div
-    v-show="showLifecycleModal"
-    class="modal"
-  >
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title">
-            Resource ID: {{ lifecycleResourceId }}
-          </h1>
-        </div>
-        <div class="modal-body">
-          <label for="actions">Respond:</label>
-          <select v-model="selectedItem">
-            <option
-              v-for="response in responseOptions"
-              :key="response"
-              :value="response"
-            >
-              {{ response }}
-            </option>
-          </select>
-          <p>Selected item: {{ selectedItem }}</p>
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-danger"
-            @click="showLifecycleModal = false"
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            class="btn btn-secondary"
-            @click="updateResource"
-          >
-            Submit
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <confirmation-modal
-    v-if="showConfirmationModal"
-    @close-confirmation-modal="showConfirmationDialog"
-    @abandon-negotiation="updateNegotiation('ABANDON')"
-  />
 </template>
 
 <script>
 import NegotiationPosts from "@/components/NegotiationPosts.vue"
+import ConfirmationModal from "@/components/modals/ConfirmationModal.vue"
+import UpdateStatusModal from "@/components/modals/UpdateStatusModal.vue"
+import PrivatePostModal from "@/components/modals/PrivatePostModal.vue"
 import { MESSAGE_STATUS, ROLES, dateFormat } from "@/config/consts"
 import moment from "moment"
-import { mapActions, mapGetters } from "vuex"
-import ConfirmationModal from "@/components/ConfirmationModal.vue"
+import { mapActions } from "vuex"
 
 export default {
   name: "NegotiationPage",
   components: {
-    ConfirmationModal, NegotiationPosts,
+    ConfirmationModal, UpdateStatusModal, PrivatePostModal, NegotiationPosts,
   },
   props: {
     negotiationId: {
@@ -303,62 +258,28 @@ export default {
         resourceId: undefined,
       },
       roles: [],
-      isNegotiationLoaded: false,
       responseOptions: [],
       selectedItem: "",
       messageStatus: MESSAGE_STATUS,
-      showNegotiationApprovalModal: false,
-      showConfirmationModal: false,
       showPrivatePostModal: false,
-      showLifecycleModal: false,
       privatePostResourceId: undefined,
       lifecycleResourceId: undefined,
       availableRoles: ROLES
     }
   },  
   computed: {
-    organizations() {
-      const organizationNames = []
-
-      for (const request of this.negotiation.requests) {
-        for (const resource of request.resources) {
-          const organizationName = resource.id
-          organizationNames.push(organizationName)
-        }
-      }
-      return organizationNames
-    },
     collections() {
       const collections = []
 
       for (const request of this.negotiation.requests) {
         for (const resource of request.resources) {
-          const collection = resource.id
-          collections.push(collection)
+          collections.push(resource.id)
         }
       }
       return collections
     },
     numberOfCollections() {
-      let counter = 0
-      for (const request of this.negotiation.requests) {
-        for (const resource of request.resources) {
-          counter++
-        }
-      }
-      return counter
-
-    },
-    resourcesIds() {
-      const organizationNames = []
-
-      for (const request of this.negotiation.requests) {
-        for (const resource of request.resources) {
-          const organizationName = resource.id
-          organizationNames.push(organizationName)
-        }
-      }
-      return organizationNames
+      return this.collections.length
     },
     authorName() {
       for (const person of this.negotiation.persons) {
@@ -368,19 +289,17 @@ export default {
       }
       return ""
     },
-  },
-  watch: {
-    negotiation(n) {
-      if(n) {
-        this.isNegotiationLoaded = n
-      }
+    loading() {
+      return this.negotiation === undefined
     }
   },
   async beforeMount() {
     this.negotiation = await this.retrieveNegotiationById({
       negotiationId: this.negotiationId,
     }) 
-    this.loadPossibleEvents()
+    this.responseOptions = await this.retrievePossibleEvents({
+      negotiationId: this.negotiation.id
+    })
     this.roles = await this.retrieveUserRoles()
   },
   methods: {
@@ -388,17 +307,12 @@ export default {
       "retrieveNegotiationById",
       "retrievePostsByNegotiationId",
       "retrieveUserRoles",
-      "addMessageToNegotiation",
-      "markMessageAsRead",
       "retrievePossibleEvents",
       "retrievePossibleEventsForResource",
       "updateNegotiationStatus",
       "updateResourceStatus",
       "downloadAttachment"
     ]),
-    showConfirmationDialog() {
-      this.showConfirmationModal = !this.showConfirmationModal
-    },
     async isRepresentativeForResource(resourceId) {
       return !!this.roles.includes(resourceId)
 
@@ -410,9 +324,6 @@ export default {
         return ""
       }
     },
-    computed: {
-      ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
-    },
     isAttachment(value) {
       return value instanceof Object
     },
@@ -424,15 +335,13 @@ export default {
         negotiationId: this.negotiation.id,
         event: action
       })
-      this.showNegotiationApprovalModal = false
     },
-    async updateResource() {
+    async updateResource(status) {
       await this.updateResourceStatus({
         negotiationId: this.negotiation.id,
         resourceId: this.lifecycleResourceId,
-        event: this.selectedItem,
+        event: status,
       })
-      this.showLifecycleModal = false
     },
     loadPossibleEventsForResource() {
       this.retrievePossibleEventsForResource({
@@ -442,58 +351,22 @@ export default {
         this.responseOptions = data
       })
     },
-    loadPossibleEvents() {
-      this.retrievePossibleEvents({
-        negotiationId: this.negotiation.id
-      }).then((data) => {
-        this.responseOptions = data
-      })
-    },
     interactPrivatePostModal(resourceId) {
-      this.showPrivatePostModal = true
       this.privatePostResourceId = resourceId
     },
     interactLifecycleModal(resourceId) {
-      this.showLifecycleModal = true
       this.lifecycleResourceId = resourceId
       this.loadPossibleEventsForResource()
+    },
+    getElementIdFromCollectionId(collection) {
+      return collection.replaceAll(":", "_")
     }
   },
 }
 </script>
 
 <style scoped>
-.modal {
-  display: block;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-.modal-title {
-  font-size: large;
-}
-.list-group-item {
-  padding: 10px;
-  margin-top: 5px;
-  border: none;
-  border-bottom: lightgray 1px solid;
-}
-.modal-content {
-  background-color: "$light";
-  margin: 15% auto;
-  padding: 20px;
-  border: 1px solid gray;
-  width: 80%;
-}
 h1 {
   font-family: Calibri, Arial, sans-serif;
-  color: var(--bs-primary);
-  font-weight: bolder;
-  font-size: 60px;
-}
-.negotiation-list-table tbody tr:hover > td {
-  cursor: pointer;
 }
 </style>
\ No newline at end of file