diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1f1e3a951..c543d2749 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -394,6 +394,15 @@
     "service_details": "Service Details",
     "provider": "Provider",
     "provider_name": "Provider name",
+    "supplier": "Supplier",
+    "supplier_name": "Supplier name",
+    "component_supplier_name_desc": "The organization that supplied the component",
+    "project_supplier_name_desc": "The organization that supplied the component that the project describes",
+    "project_metadata_supplier_name_desc": "The organization that supplied the BOM",
+    "manufacturer": "Manufacturer",
+    "manufacturer_name": "Manufacturer name",
+    "manufacturer_name_desc": "The organization that manufactured the component that the project describes",
+    "authors": "Authors",
     "endpoints": "Endpoints",
     "data": "Data",
     "url": "URL",
diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
index 0f001160d..bad34887b 100644
--- a/src/views/portfolio/projects/ComponentDetailsModal.vue
+++ b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -104,6 +104,32 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="component.supplier">
+        <template v-slot:title><i class="fa fa-building-o"></i> {{ $t('message.supplier') }}</template>
+        <b-card>
+          <b-input-group-form-input id="component-supplier-name-input" input-group-size="mb-3" type="text" v-model="component.supplier.name"
+                                    required="false" readonly :label="$t('message.supplier_name')"
+                                    :tooltip="this.$t('message.component_supplier_name_desc')"/>
+          <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
+            <bootstrap-table
+              id="supplierUrlsTable"
+              ref="supplierUrlsTable"
+              :columns="supplierUrlsTableColumns"
+              :data="component.supplier.urls"
+              :options="supplierUrlsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+          <b-form-group id="supplierContactsTable-Fieldset" :label="this.$t('message.contacts')" label-for="contactsTable">
+            <bootstrap-table
+              id="supplierContactsTable"
+              ref="supplierContactsTable"
+              :columns="supplierContactsTableColumns"
+              :data="component.supplier.contacts"
+              :options="supplierContactsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+        </b-card>
+      </b-tab>
       <b-tab>
         <template v-slot:title><i class="fa fa-external-link"></i> {{ $t('message.external_references') }}</template>
         <b-card>
@@ -167,6 +193,78 @@
         ],
         selectableLicenses: [],
         selectedLicense: '',
+        supplierUrlsTableColumns: [
+          {
+            title: this.$t('message.urls'),
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(row, ""));
+            }
+          }
+        ],
+        supplierUrlsTableOptions: {
+          search: false,
+          showHeader: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
+        supplierContactsTableColumns: [
+          {
+            title: this.$t('message.name'),
+            field: "name",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.email'),
+            field: "email",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.phone'),
+            field: "phone",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          }
+        ],
+        supplierContactsTableOptions: {
+          search: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
         referencesTableColumns: [
           {
             title: this.$t('message.url'),
@@ -218,6 +316,7 @@
         let url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}`;
         this.axios.post(url, {
           uuid: this.component.uuid,
+          supplier: this.component.supplier,
           name: this.component.name,
           version: this.component.version,
           group: this.component.group,
diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
index 0ac486b1c..0989f6142 100644
--- a/src/views/portfolio/projects/ProjectDetailsModal.vue
+++ b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -78,6 +78,58 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.manufacturer">
+        <template v-slot:title><i class="fa fa-industry"></i> {{ $t('message.manufacturer') }}</template>
+        <b-card>
+          <b-input-group-form-input id="project-manufacturer-name-input" input-group-size="mb-3" type="text" v-model="project.manufacturer.name"
+                                    required="false" readonly :label="$t('message.manufacturer_name')"
+                                    disabled="true" :tooltip="this.$t('message.manufacturer_name_desc')"/>
+          <b-form-group id="manufacturerUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="manufacturerUrlsTable">
+            <bootstrap-table
+              id="manufacturerUrlsTable"
+              ref="manufacturerUrlsTable"
+              :columns="urlsTableColumns"
+              :data="project.manufacturer.urls"
+              :options="urlsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+          <b-form-group id="manufacturerContactsTable-Fieldset" :label="this.$t('message.contacts')" label-for="contactsTable">
+            <bootstrap-table
+              id="manufacturerContactsTable"
+              ref="manufacturerContactsTable"
+              :columns="contactsTableColumns"
+              :data="project.manufacturer.contacts"
+              :options="contactsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+        </b-card>
+      </b-tab>
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.supplier">
+        <template v-slot:title><i class="fa fa-building-o"></i> {{ $t('message.supplier') }}</template>
+        <b-card>
+          <b-input-group-form-input id="project-supplier-name-input" input-group-size="mb-3" type="text" v-model="project.supplier.name"
+                                    required="false" readonly :label="$t('message.supplier_name')"
+                                    disabled="true" :tooltip="this.$t('message.project_supplier_name_desc')"/>
+          <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
+            <bootstrap-table
+              id="supplierUrlsTable"
+              ref="supplierUrlsTable"
+              :columns="urlsTableColumns"
+              :data="project.supplier.urls"
+              :options="urlsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+          <b-form-group id="supplierContactsTable-Fieldset" :label="this.$t('message.contacts')" label-for="contactsTable">
+            <bootstrap-table
+              id="supplierContactsTable"
+              ref="supplierContactsTable"
+              :columns="contactsTableColumns"
+              :data="project.supplier.contacts"
+              :options="contactsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+        </b-card>
+      </b-tab>
       <b-tab>
         <template v-slot:title><i class="fa fa-external-link"></i> {{ $t('message.external_references') }}</template>
         <b-card>
@@ -89,6 +141,52 @@
           </bootstrap-table>
         </b-card>
       </b-tab>
+      <b-tab style="border:0;padding:0"
+             v-if="project.metadata && (project.metadata.authors || project.metadata.supplier)">
+        <template v-slot:title><i class="fa fa-file-text-o"></i> {{ $t('message.bom') }}</template>
+        <b-card>
+          <b-tabs pills card vertical>
+            <b-tab :title="$t('message.authors')" v-if="project.metadata.authors">
+              <b-card>
+                <b-form-group id="authorsTable-Fieldset">
+                  <bootstrap-table
+                      id="authorsTable"
+                      ref="authorsTable"
+                      :columns="contactsTableColumns"
+                      :data="project.metadata.authors"
+                      :options="contactsTableOptions">
+                  </bootstrap-table>
+                </b-form-group>
+              </b-card>
+            </b-tab>
+            <b-tab :title="$t('message.supplier')" v-if="project.metadata.supplier">
+              <b-card>
+                <b-input-group-form-input id="project-metadata-supplier-name-input" input-group-size="mb-3" type="text" v-model="project.metadata.supplier.name"
+                                          required="false" readonly :label="$t('message.supplier_name')"
+                                          disabled="true" :tooltip="this.$t('message.project_metadata_supplier_name_desc')"/>
+                <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
+                  <bootstrap-table
+                      id="supplierUrlsTable"
+                      ref="supplierUrlsTable"
+                      :columns="urlsTableColumns"
+                      :data="project.metadata.supplier.urls"
+                      :options="urlsTableOptions">
+                  </bootstrap-table>
+                </b-form-group>
+                <b-form-group id="supplierContactsTable-Fieldset" :label="this.$t('message.contacts')" label-for="contactsTable">
+                  <bootstrap-table
+                      id="supplierContactsTable"
+                      ref="supplierContactsTable"
+                      :columns="contactsTableColumns"
+                      :data="project.metadata.supplier.contacts"
+                      :options="contactsTableOptions">
+                  </bootstrap-table>
+                </b-form-group>
+              </b-card>
+            </b-tab>
+          </b-tabs>
+        </b-card>
+      </b-tab>
     </b-tabs>
     <template v-slot:modal-footer="{ cancel }">
       <b-button size="md" variant="outline-danger" @click="deleteProject()" v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT">{{ $t('message.delete') }}</b-button>
@@ -149,6 +247,78 @@
           dataOff: '\u2715'
         },
         isLoading: false,
+        urlsTableColumns: [
+          {
+            title: this.$t('message.urls'),
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(row, ""));
+            }
+          }
+        ],
+        urlsTableOptions: {
+          search: false,
+          showHeader: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
+        contactsTableColumns: [
+          {
+            title: this.$t('message.name'),
+            field: "name",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.email'),
+            field: "email",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.phone'),
+            field: "phone",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          }
+        ],
+        contactsTableOptions: {
+          search: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
         referencesTableColumns: [
           {
             title: this.$t('message.url'),
@@ -225,6 +395,7 @@
           uuid: this.project.uuid,
           author: this.project.author,
           publisher: this.project.publisher,
+          supplier: this.project.supplier,
           group: this.project.group,
           name: this.project.name,
           version: this.project.version,