diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
index 34495c0b1..0f001160d 100644
--- a/src/views/portfolio/projects/ComponentDetailsModal.vue
+++ b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -224,6 +224,7 @@
           author: this.component.author,
           description: this.component.description,
           license: this.selectedLicense,
+          licenseExpression: this.component.licenseExpression,
           licenseUrl: this.component.licenseUrl,
           filename: this.component.filename,
           classifier: this.component.classifier,
@@ -258,6 +259,8 @@
       retrieveLicenses: function() {
         let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_CONCISE}`;
         this.axios.get(url).then((response) => {
+          // Allow for license to be un-selected.
+          this.selectableLicenses.push({value: '', text: ''});
           for (let i = 0; i < response.data.length; i++) {
             let license = response.data[i];
             this.selectableLicenses.push({value: license.licenseId, text: license.name, uuid: license.uuid});
diff --git a/src/views/portfolio/projects/ProjectAddComponentModal.vue b/src/views/portfolio/projects/ProjectAddComponentModal.vue
index b3a2146e0..974cc0671 100644
--- a/src/views/portfolio/projects/ProjectAddComponentModal.vue
+++ b/src/views/portfolio/projects/ProjectAddComponentModal.vue
@@ -48,6 +48,10 @@
           <b-input-group-form-select id="component-license-input" required="false"
                                      v-model="selectedLicense" :options="selectableLicenses"
                                      :label="$t('message.license')" :tooltip="$t('message.component_spdx_license_desc')" />
+          <b-input-group-form-input id="component-license-expression" input-group-size="mb-3" type="text" v-model="component.licenseExpression"
+                                    required="false" :label="$t('message.license_expression')" :tooltip="$t('message.component_license_expression_desc')" />
+          <b-input-group-form-input id="component-license-url-input" input-group-size="mb-3" type="text" v-model="component.licenseUrl"
+                                    required="false" :label="$t('message.license_url')" :tooltip="$t('message.component_license_url_desc')" />
           <b-form-group
             id="component-copyright-form-group"
             :label="this.$t('message.copyright')"
@@ -138,6 +142,7 @@
           group: this.component.group,
           description: this.component.description,
           license: this.selectedLicense,
+          licenseExpression: this.component.licenseExpression,
           licenseUrl: this.component.licenseUrl,
           filename: this.component.filename,
           classifier: this.component.classifier,
@@ -167,6 +172,7 @@
           group: null,
           description: null,
           license: null,
+          licenseExpression: null,
           licenseUrl:null,
           filename: null,
           classifier: null,
@@ -186,6 +192,8 @@
       retrieveLicenses: function() {
         let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_CONCISE}`;
         this.axios.get(url).then((response) => {
+          // Allow for license to be un-selected.
+          this.selectableLicenses.push({value: '', text: ''});
           for (let i = 0; i < response.data.length; i++) {
             let license = response.data[i];
             this.selectableLicenses.push({value: license.licenseId, text: license.name});