diff --git a/package-lock.json b/package-lock.json
index dbffbd21..a3a96d52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mavedb-ui",
-  "version": "2025.0.0",
+  "version": "2025.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mavedb-ui",
-      "version": "2025.0.0",
+      "version": "2025.1.0",
       "dependencies": {
         "@fontsource/raleway": "^5.0.16",
         "axios": "^1.6.2",
diff --git a/package.json b/package.json
index 5bf82674..c8810d7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mavedb-ui",
-  "version": "2025.0.0",
+  "version": "2025.1.0",
   "private": true,
   "scripts": {
     "build": "vite build --mode=${MODE=live}",
diff --git a/src/assets/layout.css b/src/assets/layout.css
index 75562cb3..f745f02e 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -15,6 +15,7 @@
 }
 
 .mave-screen-title-bar {
+  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -24,6 +25,10 @@
   margin: 10px 0;
 }
 
+.mave-screen-title {
+  flex: 0 0 auto;
+}
+
 .mave-screen-title-controls {
   flex: 0 0 auto;
 }
diff --git a/src/components/CalibrationTable.vue b/src/components/CalibrationTable.vue
new file mode 100644
index 00000000..f266a614
--- /dev/null
+++ b/src/components/CalibrationTable.vue
@@ -0,0 +1,103 @@
+<template>
+    <table v-if="evidenceStrengthsForDisplay" class="mave-calibrations-table">
+        <tr>
+            <td colspan="100" class="dropdown" >
+                <Dropdown v-model="activeCalibrationKey" :options="Object.keys(calibrations)" :optionLabel="titleCase" style="width: 100%;" :disabled="Object.keys(calibrations).length < 2" />
+            </td>
+        </tr>
+        <tr>
+            <th>Evidence Strength</th>
+            <th v-for="evidenceStrength of evidenceStrengthsForDisplay" :key="evidenceStrength"><b>{{ evidenceStrength }}</b></th>
+        </tr>
+        <tr>
+            <td>Likelihood Ratio+</td>
+            <td v-for="likelihoodRatio of positiveLikelihoodRatiosForDisplay" :key="likelihoodRatio">{{ likelihoodRatio }}</td>
+        </tr>
+        <tr>
+            <td>Score Threshold</td>
+            <td v-for="threshold of thresholdsForDisplay" :key="threshold">{{ threshold }}</td>
+        </tr>
+    </table>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import { Calibrations } from '@/lib/calibrations';
+import Dropdown from 'primevue/dropdown';
+
+export default defineComponent({
+    name: 'CalibrationTable',
+    components: { Dropdown },
+
+    data: function() {
+        const defaultCalibration = Object.keys(this.calibrations)[0]
+        this.$emit('calibrationSelected', defaultCalibration)
+
+        return {
+            activeCalibrationKey: defaultCalibration
+        }
+    },
+
+    emits: ['calibrationSelected'],
+
+    props: {
+        calibrations: {
+            type: Object as () => {[key: string]: Calibrations},
+            required: true
+        },
+    },
+
+    computed: {
+        selectedCalibrations: function () {
+            return this.calibrations[this.activeCalibrationKey]
+        },
+
+        evidenceStrengthsForDisplay: function() {
+            return this.selectedCalibrations.evidenceStrengths
+        },
+
+        positiveLikelihoodRatiosForDisplay: function() {
+            return this.selectedCalibrations.positiveLikelihoodRatios
+        },
+
+        thresholdsForDisplay: function() {
+            return this.selectedCalibrations.thresholds
+        },
+    },
+
+    methods: {
+        titleCase(s: string) {
+            return s.replace (/^[-_]*(.)/, (_, c) => c.toUpperCase())       // Initial char (after -/_)
+                    .replace (/[-_]+(.)/g, (_, c) => ' ' + c.toUpperCase()) // First char after each -/_
+        }
+    },
+
+    watch: {
+        activeCalibrationKey: {
+            handler: function() {
+                this.$emit('calibrationSelected', this.activeCalibrationKey)
+            }
+        }
+    }
+})
+</script>
+
+<style>
+table.mave-calibrations-table {
+   border-collapse: collapse;
+   margin: 1em auto 0.5em auto;
+}
+
+table.mave-calibrations-table .dropdown {
+    border-top-style: hidden;
+    border-left-style: hidden;
+    border-right-style: hidden;
+}
+
+table.mave-calibrations-table td,
+table.mave-calibrations-table th {
+   border: 1px solid gray;
+   padding: 0.5em 1em;
+   text-align: center;
+}
+</style>
diff --git a/src/components/CollectionAdder.vue b/src/components/CollectionAdder.vue
new file mode 100644
index 00000000..40d26c84
--- /dev/null
+++ b/src/components/CollectionAdder.vue
@@ -0,0 +1,268 @@
+<template>
+  <template v-if="dialogVisible">
+    <EmailPrompt />
+  </template>
+  <div v-if="userIsAuthenticated" class="mave-collection-adder">
+    <Button
+      icon="pi pi-bookmark"
+      class="mave-save-to-collection-button"
+      label="Save to a collection"
+      @click="dialogVisible = true"
+    />
+    <div v-if="collectionsContainingDataSet.length > 0" class="mave-collection-bookmarks">
+      Member of:
+      <router-link v-for="collection in collectionsContainingDataSet" class="mave-collection-bookmark" :key="collection" :to="{name: 'collection', params: {urn: collection.urn}}">
+        <i class="pi pi-bookmark-fill" />
+        {{ collection.name }}
+      </router-link>
+    </div>
+
+    <Dialog
+      v-model:visible="dialogVisible"
+      :close-on-escape="true"
+      header="Add to collection"
+      modal
+      :style="{width: '25rem'}"
+    >
+      <div class="flex align-items-center gap-3 mb-3">
+        <Dropdown
+          v-model="selectedCollectionUrn"
+          class="w-full"
+          option-label="name"
+          option-value="urn"
+          :options="editableCollections"
+          placeholder="Select a collection"
+        >
+          <template #option="{option}">
+            {{ option.name }}
+            <i v-if="option.private" class="mave-collection-option-private pi pi-lock" title="Private collection" />
+            <span class="mave-collection-option-sharing">{{ collectionSharingInfo(option) }}</span>
+          </template>
+        </Dropdown>
+      </div>
+      <div class="mave-save-to-collection-actions">
+        <Button label="Create new collection" @click="creatorVisible = true" />
+        <div class="mave-save-cancel-actions">
+          <Button label="Cancel" severity="secondary" @click="dialogVisible = false" />
+          <Button label="Save" @click="saveToCollection" />
+        </div>
+      </div>
+    </Dialog>
+
+    <Dialog
+      v-model:visible="creatorVisible"
+      :close-on-escape="false"
+      header="Create collection"
+      modal
+      :style="{maxWidth: '90%', width: '50rem'}"
+    >
+      <CollectionCreator
+        @canceled="creatorVisible = false"
+        @created-collection="childComponentCreatedCollection"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import pluralize from 'pluralize'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Dropdown from 'primevue/dropdown'
+
+import config from '@/config'
+import CollectionCreator from '@/components/CollectionCreator'
+import useAuth from '@/composition/auth'
+import EmailPrompt from '@/components/common/EmailPrompt.vue'
+
+export default {
+  name: 'CollectionAdder',
+  components: {Button, CollectionCreator, Dialog, Dropdown, EmailPrompt},
+
+  props: {
+    dataSetUrn: {
+      type: String,
+      required: true
+    },
+    dataSetType: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup: () => {
+    const {userIsAuthenticated, userOrcidId} = useAuth()
+    return {userIsAuthenticated, userOrcidId}
+  },
+
+  data: () => ({
+    myCollections: {
+      admin: [],
+      editor: [],
+      viewer: []
+    },
+    selectedCollectionUrn: null,
+    dialogVisible: false,
+    creatorVisible: false
+  }),
+
+  computed: {
+    collectionsContainingDataSet: function() {
+      return [...this.myCollections.admin, ...this.myCollections.editor, ...this.myCollections.viewer].filter((collection) =>
+        (collection[this.dataSetType == 'scoreSet' ? 'scoreSetUrns' : 'experimentUrns'] || []).includes(this.dataSetUrn)
+      )
+    },
+
+    editableCollections: function() {
+      const adminCollections = this.myCollections['admin']
+      const editorCollections = this.myCollections['editor']
+      return adminCollections.concat(editorCollections)
+    }
+  },
+
+  mounted: async function() {
+    this.fetchMyCollections()
+  },
+
+  watch: {
+    userOrcidId: {
+      handler: function(newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.fetchMyCollections()
+        }
+      }
+    }
+  },
+
+  methods: {
+    childComponentCreatedCollection: function(collection) {
+      this.creatorVisible = false
+      this.myCollections.admin.push(collection)
+      this.selectedCollectionUrn = collection.urn
+    },
+
+    collectionSharingInfo: function(collection) {
+      const numUsers = (collection.admins || []).length + (collection.editors || []).length
+          + (collection.viewers || []).length
+      if (numUsers > 1) {
+        return `Shared with ${numUsers - 1} other ${pluralize('user', numUsers - 1)}`
+      }
+      return null
+    },
+
+    fetchMyCollections: async function() {
+      this.myCollections = {
+        admin: [],
+        editor: [],
+        viewer: []
+      }
+
+      let response = null
+      try {
+        response = await axios.get(`${config.apiBaseUrl}/users/me/collections`)
+      } catch (error) {
+        console.log(error)
+        response = error.response || {status: 500}
+      }
+
+      if (response.status == 200) {
+        this.myCollections = response.data
+      }
+    },
+
+    saveToCollection: async function() {
+      if (this.dataSetType === "scoreSet") {
+        this.saveScoreSetToCollection(this.dataSetUrn)
+      } else if (this.dataSetType === "experiment") {
+        this.saveExperimentToCollection(this.dataSetUrn)
+      }
+      this.dialogVisible = false
+      await this.fetchMyCollections()
+    },
+
+    saveScoreSetToCollection: async function(scoreSetUrn) {
+      let response = null
+      try {
+        response = await axios.post(
+          `${config.apiBaseUrl}/collections/${this.selectedCollectionUrn}/score-sets`,
+          {scoreSetUrn}
+        )
+      } catch (error) {
+        console.log(error)
+        response = error.response || {status: 500}
+      }
+
+      if (response.status == 200) {
+        this.$toast.add({severity: 'success', summary: 'Score set saved to collection.', life: 3000})
+      } else {
+        this.$toast.add({severity: 'warn', summary: response.data?.detail || 'Sorry, saving the score set to the collection failed.', life: 3000})
+      }
+    },
+
+    saveExperimentToCollection: async function(experimentUrn) {
+      let response = null
+      try {
+        response = await axios.post(
+          `${config.apiBaseUrl}/collections/${this.selectedCollectionUrn}/experiments`,
+          {experimentUrn}
+        )
+      } catch (error) {
+        response = error.response || {status: 500}
+      }
+
+      if (response.status == 200) {
+        this.$toast.add({ severity: 'success', summary: 'Experiment saved to collection.', life: 3000 })
+      } else if (response.data && response.data.detail) {
+        this.$toast.add({severity: 'warn', summary: response.data?.detail || 'Sorry, saving the experiment to the collection failed.', life: 3000})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-save-to-collection-button {
+  width: fit-content;
+}
+
+.mave-collection-bookmarks {
+  margin: 1em 0;
+}
+
+.mave-collection-bookmark {
+  /*background-color: #3f51b5;*/
+  color: #3f51b5;
+  padding: 5px;
+  margin-right: 2em;
+}
+
+.mave-collection-bookmark .mave-collection-option-private {
+  margin: 0;
+}
+
+.mave-save-to-collection-actions {
+  justify-content: space-between;
+  display: flex;
+}
+
+.mave-save-to-collection-actions .mave-save-cancel-actions {
+  display: inline;
+}
+
+.mave-save-to-collection-actions .mave-save-cancel-actions Button {
+  margin: 0 0 0 3px;
+}
+
+.mave-collection-option-private {
+  margin: 0 0.5em;
+}
+
+.mave-collection-option-sharing {
+  color: #999;
+}
+
+.mave-create-collection-button {
+  display: inline;
+}
+</style>
diff --git a/src/components/CollectionBadge.vue b/src/components/CollectionBadge.vue
new file mode 100644
index 00000000..ef8790bf
--- /dev/null
+++ b/src/components/CollectionBadge.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="mave-collection-badge">
+    <router-link :to="{name: 'collection', params: {urn: collection.urn}}">
+      <img v-if="badgeNameIsLink" :alt="collection.name" :src="collection.badgeName"/>
+      <Tag v-else :class="tagClassName" :value="collection.badgeName" rounded />
+    </router-link>
+  </div>
+</template>
+
+<script>
+import Tag from 'primevue/tag'
+
+export default {
+  name: 'CollectionBadge',
+  components: { Tag },
+
+  props: {
+    collection: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    // determine whether badgeName is a link to an img or not
+    badgeNameIsLink: function() {
+      // TODO make this a regex to also allow https
+      return this.collection.badgeName?.startsWith("http://") || false
+    },
+
+    tagClassName: function() {
+      return {
+        IGVF: "mave-collection-badge-igvf"
+      }[this.collection.badgeName] || "mave-collection-badge-other"
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-collection-badge {
+  cursor: pointer;
+  display: inline; /* may need inline-block */
+  padding: 0 7px 0 0;
+}
+
+.mave-collection-badge .mave-collection-badge-igvf {
+  background-color: rgb(227, 35, 176);
+}
+
+.mave-collection-badge .mave-collection-badge-other {
+  background-color: cadetblue;
+}
+</style>
diff --git a/src/components/CollectionCreator.vue b/src/components/CollectionCreator.vue
new file mode 100644
index 00000000..cca838ae
--- /dev/null
+++ b/src/components/CollectionCreator.vue
@@ -0,0 +1,264 @@
+<template>
+  <EmailPrompt />
+  <div class="mave-collection-creator">
+    <div class="flex flex-column gap-2">
+      <label :for="$scopedId('name-input')">Collection name</label>
+      <InputText :id="$scopedId('name-input')" v-model="collectionName" />
+    </div>
+
+    <div class="flex flex-column gap-2">
+      <label :for="$scopedId('description-input')">Description</label>
+      <Textarea :id="$scopedId('description-input')" v-model="collectionDescription" />
+    </div>
+
+    <div class="flex flex-column gap-2">
+      <label :for="$scopedId('public-input')">Public</label>
+      <InputSwitch v-model="collectionPublic" :aria-labelledby="$scopedId('public-help')" :input-id="$scopedId('public-input')" />
+      <small :id="$scopedId('public-help')">Public collections are visible to others. Private collections are only visible to you and anyone to whom you grant permissions.</small>
+    </div>
+
+    <div class="mave-contributors-adder">
+      <div class="mave-contributors-adder-title">
+        User permissions
+      </div>
+      <InputText
+        ref="userSearchInput"
+        v-model="orcidIdsToAddStr"
+        class="mave-collection-add-users-search-input"
+        placeholder="Type or paste 1 or more ORCID IDs here."
+        @keyup.enter="addUsers"
+        @keyup.escape="clearUserSearch"
+      />
+      <div class="mave-collection-user-role-add-controls">
+        <SelectButton
+          v-model="roleToAdd"
+          :allow-empty="false"
+          class="mave-collection-role-to-add"
+          option-label="title"
+          option-value="value"
+          :options="roleOptions"
+        />
+        <Button label="Add user" @click="addUsers" />
+      </div>
+      <DataTable
+        v-if="pendingUserRoles.length > 0"
+        data-key="orcidId"
+        :multi-sort-meta="[{field: 'user.lastName', order: 1}, {field: 'user.firstName', order: 1}, {field: 'user.orcidId', order: 1}]"
+        sort-mode="multiple"
+        :value="pendingUserRoles"
+      >
+        <Column field="user.orcidId" header="ORCID ID" />
+        <Column :field="(userRole) => `${userRole.user.firstName} ${userRole.user.lastName}`" header="Name" />
+        <Column field="role" header="Role">
+          <template #body="{data}">
+            <Dropdown
+              class="mave-collection-role-dropdown"
+              option-label="title"
+              option-value="value"
+              :options="roleOptions"
+              :model-value="data.role"
+              @change="changeRole(data.user.orcidId, $event.value)"
+            />
+          </template>
+        </Column>
+        <Column>
+          <template #body="{data}">
+            <Button label="Remove" size="small" @click="removeUserRole(data.user.orcidId)" />
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <div class="mave-collection-editor-action-buttons">
+      <Button label="Cancel" severity="secondary" @click="cancel" />
+      <Button label="Save" @click="saveCollection" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from 'lodash'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Dropdown from 'primevue/dropdown'
+import InputSwitch from 'primevue/inputswitch'
+import InputText from 'primevue/inputtext'
+import SelectButton from 'primevue/selectbutton'
+import Textarea from 'primevue/textarea'
+
+import config from '@/config'
+import {ORCID_ID_REGEX} from '@/lib/orcid'
+import EmailPrompt from '@/components/common/EmailPrompt.vue'
+
+export default {
+  name: 'CollectionCreator',
+  components: {Button, Column, DataTable, Dropdown, EmailPrompt, InputSwitch, InputText, SelectButton, Textarea},
+  emits: ['createdCollection', 'canceled'],
+
+  data: () => ({
+    collectionName: null,
+    collectionDescription: null,
+    collectionPublic: false,
+    pendingUserRoles: [],
+
+    orcidIdsToAddStr: '',
+    roleToAdd: 'viewer',
+
+    roleOptions: [
+      {title: 'Admin', value: 'admin'},
+      {title: 'Editor', value: 'editor'},
+      {title: 'Viewer', value: 'viewer'}
+    ]
+  }),
+
+  methods: {
+    addUsers: async function() {
+      const orcidIdsToAdd = _.without(this.orcidIdsToAddStr.split(/[ ,]+/g), '')
+
+      const invalidOrcidIds = []
+      for (const orcidId of orcidIdsToAdd) {
+        const pendingUserRole = this.pendingUserRoles.find((ur) => ur.user.orcidId == orcidId)
+        if (pendingUserRole) {
+          pendingUserRole.role = this.roleToAdd
+        } else if (!ORCID_ID_REGEX.test(orcidId)) {
+          invalidOrcidIds.push(orcidId)
+          this.$toast.add({
+            life: 3000,
+            severity: 'warn',
+            summary: `${orcidId} is not a valid ORCID ID`
+          })
+        } else {
+          const user = await this.lookupUser(orcidId)
+          if (!user) {
+            invalidOrcidIds.push(orcidId)
+            this.$toast.add({
+              life: 3000,
+              severity: 'warn',
+              summary: `No MaveDB user was found with ORCID ID ${orcidId}.`
+            })
+          } else {
+            this.pendingUserRoles.push({user, role: this.roleToAdd})
+          }
+        }
+      }
+      this.orcidIdsToAddStr = invalidOrcidIds.join(' ')
+    },
+
+    cancel: function() {
+      this.$emit('canceled')
+    },
+
+    changeRole: function(orcidId, newRole) {
+      const userRole = this.pendingUserRoles.find((ur) => ur.user.orcidId == orcidId)
+      if (userRole) {
+        userRole.role = newRole
+      }
+    },
+
+    clearUserSearch: function() {
+      this.$refs.userSearchinput.$refs.input.value = ''
+    },
+
+    lookupUser: async function(orcidId) {
+      let user = null
+      try {
+        user = (await axios.get(`${config.apiBaseUrl}/users/${orcidId}`)).data
+      } catch (err) {
+        // Assume that the error was 404 Not Found.
+      }
+      return user
+    },
+
+    removeUserRole: function(orcidId) {
+      // If the user as been added in this session, remove the pending user role.
+      const pendingUserRoleIndex = this.pendingUserRoles.findIndex((ur) => ur.user.orcidId == orcidId)
+      if (pendingUserRoleIndex >= 0) {
+        this.pendingUserRoles.splice(pendingUserRoleIndex, 1)
+      }
+    },
+
+    saveCollection: async function() {
+      const collectionName = this.collectionName?.trim()
+      let collectionDescription = this.collectionDescription?.trim()
+      collectionDescription = _.isEmpty(collectionDescription) ? null : collectionDescription
+      if (_.isEmpty(collectionName)) {
+        this.$toast.add({
+          life: 3000,
+          severity: 'warn',
+          summary: 'Must provide collection name'
+        })
+      } else {
+        const newCollection = {
+          name: collectionName,
+          description: collectionDescription,
+          private: !this.collectionPublic,
+          viewers: this.pendingUserRoles.filter((ur) => ur.role == 'viewer').map((ur) => ur.user),
+          editors: this.pendingUserRoles.filter((ur) => ur.role == 'editor').map((ur) => ur.user),
+          admins: this.pendingUserRoles.filter((ur) => ur.role == 'admin').map((ur) => ur.user)
+        }
+        let response = null
+        try {
+          response = await axios.post(`${config.apiBaseUrl}/collections`, newCollection)
+        } catch (error) {
+          console.log(error)
+          response = error.response || {status: 500}
+          this.$toast.add({severity: 'error', summary: 'Error', life: 3000})
+        }
+        if (response.status == 200) {
+          const savedCollection = response.data
+          this.$toast.add({severity: 'success', summary: 'Created new collection.', life: 3000})
+          this.$emit('createdCollection', savedCollection)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-collection-add-users-search-input {
+  width: 100%;
+}
+
+.mave-collection-add-users-search-input:deep(.p-inputtext) {
+  width: 100%;
+}
+
+.mave-collection-role-to-add {
+  display: inline;
+}
+
+.mave-collection-user-role-add-controls {
+  margin: 1em 0;
+}
+
+.mave-collection-user-role-add-controls .p-selectbutton {
+  margin-right: 1em;
+}
+
+.mave-collection-user-role-add-controls:deep(*) {
+  vertical-align: middle;
+}
+
+.mave-collection-role-dropdown:deep(.p-inputtext) {
+  padding: 0 0.3em;
+}
+
+.mave-collection-creator > * {
+  margin-bottom: 1em;
+}
+
+.mave-collection-editor-action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 2px;
+  margin: 5px 0 0 0;
+}
+
+.mave-collection-editor-action-buttons Button {
+  margin: 0 0 0 3px;
+}
+</style>
diff --git a/src/components/CollectionDataSetEditor.vue b/src/components/CollectionDataSetEditor.vue
new file mode 100644
index 00000000..e6a28011
--- /dev/null
+++ b/src/components/CollectionDataSetEditor.vue
@@ -0,0 +1,337 @@
+<template>
+  <template v-if="visible">
+    <EmailPrompt />
+  </template>
+  <div class="collection-data-set-editor">
+    <Button
+      class="mave-collection-data-set-editor-button"
+      label="Edit"
+      @click="visible = true"
+    />
+    <Dialog
+      v-model:visible="visible"
+      :close-on-escape="false"
+      :header="`Add and remove ${dataSetTypeDisplay[dataSetType]}s from collection`"
+      modal
+      :style="{width: '45rem'}"
+      @hide="resetDataSetEditor"
+    >
+      <div class="flex flex-column gap-2">
+        <Button
+          class="mave-collection-remove-data-set-button"
+          :disabled="!selectedDataSets || !selectedDataSets.length"
+          icon="pi pi-trash"
+          label="Remove"
+          severity="danger"
+          @click="markDataSetsToRemove"
+        />
+        <DataTable
+          v-model:selection="selectedDataSets"
+          data-key="urn"
+          :row-style="rowStyle"
+          tableStyle="min-width: 50rem"
+          :value="allDataSets"
+        >
+          <Column selectionMode="multiple"></Column>
+          <Column field="urn" header="URN"></Column>
+          <Column field="title" header="Title"></Column>
+        </DataTable>
+        <div class="flex gap-2">
+          <Chips
+            v-model="unvalidatedUrnsToAdd"
+            :add-on-blur="true"
+            :allow-duplicate="false"
+            class="flex-auto p-fluid"
+            placeholder="Type or paste comma-separated URNs"
+            separator=" "
+            @keyup.escape="unvalidatedUrnsToAdd = []"
+          />
+          <Button class="flex-none mave-collection-add-data-set-button" icon="pi pi-plus" label="Add" @click="fetchDataSetsToAdd" />
+        </div>
+        <Message class="mave-validation-errors-message" v-if="validationErrors.length > 0" severity="error">
+          There were validation errors
+          <div v-if="validationErrors.length > 0" class="mave-validation-errors">
+            <div v-for="errorMessage in validationErrors" class="mave-validation-error" :key="errorMessage">{{ errorMessage }}</div>
+          </div>
+        </Message>
+        <Message v-if="errors.length > 0" severity="error">
+          Sorry, some changes could not be saved.
+        </Message>
+      </div>
+      <div class="mave-collection-editor-action-buttons">
+        <Button label="Cancel" severity="secondary" @click="visible = false" />
+        <Button label="Save" @click="saveChanges" />
+      </div>
+    </Dialog>
+    <Dialog
+      v-model:visible="unpreparedChangesDialogVisible"
+      :close-on-escape="true"
+      header="Warning"
+      modal
+    >
+      Please add your new data sets or clear the URNs box before saving changes.
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from 'lodash'
+import Button from 'primevue/button'
+import Chips from 'primevue/chips'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Dialog from 'primevue/dialog'
+import Message from 'primevue/message'
+
+import useItem from '@/composition/item'
+import config from '@/config'
+import EmailPrompt from '@/components/common/EmailPrompt.vue'
+
+export default {
+  name: 'CollectionDataSetEditor',
+
+  emits: ['saved'],
+
+  components: {Button, Chips, Column, DataTable, Dialog, EmailPrompt, Message},
+
+  props: {
+    collectionUrn: {
+      type: String,
+      required: true
+    },
+    dataSetType: {
+      type: String,
+      required: true
+    },
+  },
+
+  setup: () => {
+    return {
+      ...useItem({itemTypeName: 'collection'}),
+    }
+  },
+
+  data: () => ({
+    visible: false,
+
+    unvalidatedUrnsToAdd: [],
+    dataSetsToAdd: [],
+    urnsToRemove: [],
+
+    selectedDataSets: [],
+
+    validationErrors: [],
+    additionErrors: [],
+    removalErrors: [],
+
+    dataSetTypeDisplay: {
+      scoreSet: 'score set',
+      experiment: 'experiment'
+    },
+    unpreparedChangesDialogVisible: false
+  }),
+
+  computed: {
+    allDataSets() {
+      const savedDataSets = this.savedDataSets.map((dataSet) => ({...dataSet, saved: true}))
+      const newDataSets = this.dataSetsToAdd.map((dataSet) =>({...dataSet, saved: false}))
+      return savedDataSets.concat(newDataSets)
+    },
+
+    errors: function() {
+      return [...this.additionErrors, ...this.removalErrors]
+    },
+
+    restCollectionParent: function() {
+      if (this.dataSetType === 'experiment') {
+        return 'experiments'
+      } else {
+        return 'score-sets'
+      }
+    },
+
+    savedDataSetUrns: function() {
+      return this.item?.[`${this.dataSetType}Urns`] || []
+    }
+  },
+
+  watch: {
+    collectionUrn: {
+      handler: function(newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.setItemId(newValue)
+        }
+      },
+      immediate: true
+    },
+
+    savedDataSetUrns: {
+      handler: async function(newValue, oldValue) {
+        if (!_.isEqual(newValue, oldValue)) {
+          await this.fetchSavedDataSets()
+        }
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    rowStyle: function(data) {
+      if (this.urnsToRemove.includes(data.urn)) {
+        return {backgroundColor: '#ffcccb'} // Light red
+      } else if (data.saved === false) {
+        return {backgroundColor: '#d1ffbd'} // Light green
+      }
+    },
+
+    markDataSetsToRemove: function() {
+      for (const dataSetToRemove of this.selectedDataSets) {
+        if (dataSetToRemove.saved) {
+          this.urnsToRemove.push(dataSetToRemove.urn)
+        } else {
+          _.remove(this.dataSetsToAdd, (dataSet) => dataSet.urn == dataSetToRemove.urn)
+        }
+      }
+    },
+
+    saveChanges: async function() {
+      if (this.unvalidatedUrnsToAdd.length > 0) {
+        this.unpreparedChangesDialogVisible = true
+        return
+      }
+
+      this.additionErrors = []
+      this.removalErrors = []
+
+      const additionErrorUrns = []
+      for (const dataSetToAdd of this.dataSetsToAdd) {
+        try {
+          if (this.dataSetType == 'experiment') {
+            await axios.post(
+              `${config.apiBaseUrl}/collections/${this.collectionUrn}/experiments`,
+              {experiment_urn: dataSetToAdd.urn}
+            )
+          } else if (this.dataSetType == 'scoreSet') {
+            await axios.post(
+              `${config.apiBaseUrl}/collections/${this.collectionUrn}/score-sets`,
+              {score_set_urn: dataSetToAdd.urn}
+            )
+          }
+        } catch (error) {
+          additionErrorUrns.push(dataSetToAdd.urn)
+          this.additionErrors.push(`${dataSetToAdd.urn}: ${error.message || 'Could not be added to the collection'}`)
+        }
+      }
+      _.remove(this.dataSetsToAdd, (dataSet) => !additionErrorUrns.includes(dataSet.urn))
+
+      const removalErrorUrns = []
+      for (const urn of this.urnsToRemove) {
+        try {
+          await axios.delete(`${config.apiBaseUrl}/collections/${this.collectionUrn}/${this.restCollectionParent}/${urn}`)
+        } catch (error) {
+          removalErrorUrns.push(urn)
+          this.removalErrors.push(`${urn}: ${error.message || 'Could not be removed from the collection'}`)
+        }
+      }
+      _.remove(this.urnsToRemove, (dataSet) => !removalErrorUrns.includes(dataSet.urn))
+
+      if (_.isEmpty(this.errors)) {
+        this.visible = false
+        this.$toast.add({severity: 'success', summary: 'Successfully updated collection\'s experiments.', life: 3000})
+      }
+
+      // Always emit 'saved', because if any API calls succeed (even if others fail), we need to reload collection's data sets.
+      this.$emit('saved')
+    },
+
+    fetchDataSetsToAdd: async function() {
+      this.validationErrors = []
+      const invalidUrns = []
+      for (let urn of this.unvalidatedUrnsToAdd) {
+        urn = urn.trim()
+        if (this.item[`${this.dataSetType}Urns`].includes(urn) || this.dataSetsToAdd.some((dataSet) => dataSet.urn == urn)) {
+          // Silently ignore the data sets in the collection or already prepared for adding in this session.
+        } else {
+          // Fetch the data set.
+          let response = null
+          try {
+            response = await axios.get(`${config.apiBaseUrl}/${this.restCollectionParent}/${urn}`)
+          } catch (e) {
+            response = e.response || {status: 500}
+            this.validationErrors.push(`${urn}: ${e.message}`)
+          }
+          if (response.status == 200) {
+            this.dataSetsToAdd.push(response.data)
+          } else {
+            invalidUrns.push(urn)
+          }
+        }
+      }
+      this.unvalidatedUrnsToAdd = invalidUrns
+    },
+
+    fetchSavedDataSets: async function() {
+      const savedDataSets = []
+      for (const urn of this.savedDataSetUrns) {
+        console.log(urn)
+        let response = null
+        try {
+          response = await axios.get(`${config.apiBaseUrl}/${this.restCollectionParent}/${urn}`)
+        } catch (e) {
+          response = e.response || {status: 500}
+        }
+        if (response.status == 200) {
+          savedDataSets.push(response.data)
+        }
+      }
+      this.savedDataSets = savedDataSets
+    },
+
+    resetDataSetEditor: function() {
+      this.unvalidatedUrnsToAdd = []
+      this.dataSetsToAdd = []
+      this.urnsToRemove = []
+
+      this.validationErrors = []
+      this.additionErrors = []
+      this.removalErrors = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-collection-data-set-editor-button {
+  width: fit-content;
+}
+
+.mave-collection-add-data-set-button {
+  width: fit-content;
+}
+
+.mave-collection-remove-data-set-button {
+  width: fit-content;
+}
+
+.mave-collection-editor-action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 2px;
+  margin: 20px 0 0 0;
+}
+
+.mave-collection-editor-action-buttons Button {
+  margin: 0 0 0 3px;
+}
+
+.mave-validation-errors-message:deep(.p-message-text) {
+  width: 100%;
+}
+
+.mave-validation-errors {
+  max-height: 100px;
+  overflow: auto;
+  width: 100%;
+}
+</style>
diff --git a/src/components/CollectionPermissionsEditor.vue b/src/components/CollectionPermissionsEditor.vue
new file mode 100644
index 00000000..855196d9
--- /dev/null
+++ b/src/components/CollectionPermissionsEditor.vue
@@ -0,0 +1,404 @@
+<template>
+  <template v-if="dialogVisible">
+    <EmailPrompt />
+  </template>
+  <div>
+    <Button
+      class="mave-collection-permissions-editor-button"
+      label="Edit"
+      @click="dialogVisible = true"
+    />
+    <Dialog
+      v-model:visible="dialogVisible"
+      :close-on-escape="false"
+      header="Edit collection permissions"
+      modal
+      :style="{width: '45rem'}"
+      @hide="resetContributorEditor"
+    >
+      <InputText
+        ref="userSearchInput"
+        v-model="orcidIdsToAddStr"
+        class="mave-collection-add-users-search-input"
+        placeholder="Type or paste ORCID IDs here."
+        @keyup.enter="addUsers"
+        @keyup.escape="clearUserSearch"
+      />
+      <div class="mave-collection-user-role-add-controls">
+        <SelectButton
+          v-model="roleToAdd"
+          :allow-empty="false"
+          class="mave-collection-role-to-add"
+          option-label="title"
+          option-value="value"
+          :options="roleOptions"
+        />
+        <Button label="Add user" @click="addUsers" />
+      </div>
+      <DataTable
+        data-key="orcidId"
+        :multi-sort-meta="[{field: 'user.lastName', order: 1}, {field: 'user.firstName', order: 1}, {field: 'user.orcidId', order: 1}]"
+        sort-mode="multiple"
+        :row-style="rowStyle"
+        :value="userRoles"
+      >
+        <Column field="user.orcidId" header="ORCID ID" />
+        <Column
+          :field="(userRole) => `${userRole.user.firstName} ${userRole.user.lastName}`"
+          header="Name"
+        />
+        <Column field="role" header="Role">
+          <template #body="{data}">
+            <span v-if="orcidIdsToRemove.includes(data.user.orcidId)">{{data.role }} &nbsp;&rightarrow; None</span>
+            <span v-if="data.oldRole">{{ data.oldRole }} &rightarrow;&nbsp;</span>
+            <span v-if="data.user.orcidId == userOrcidId">{{ data.role }}</span>
+            <Dropdown
+              v-if="!orcidIdsToRemove.includes(data.user.orcidId) && data.user.orcidId != userOrcidId"
+              class="mave-collection-role-dropdown"
+              option-label="title"
+              option-value="value"
+              :options="roleOptions"
+              :model-value="data.role"
+              @change="changeRole(data.user.orcidId, $event.value)"
+            />
+          </template>
+        </Column>
+        <Column>
+          <template #body="{data}">
+            <Button v-if="data.user.orcidId != userOrcidId && !orcidIdsToRemove.includes(data.user.orcidId)" label="Remove" size="small" @click="removeUserRole(data.user.orcidId)" />
+            <Button v-if="orcidIdsToRemove.includes(data.user.orcidId)" label="Restore" size="small" @click="restoreUserRole(data.user.orcidId)" />
+          </template>
+        </Column>
+      </DataTable>
+      <div class="mave-collection-editor-action-buttons">
+        <Button label="Cancel" severity="secondary" @click="dialogVisible = false" />
+        <Button :disabled="!dirty" label="Save" @click="saveChanges" />
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from 'lodash'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Dialog from 'primevue/dialog'
+import Dropdown from 'primevue/dropdown'
+import InputText from 'primevue/inputtext'
+import SelectButton from 'primevue/selectbutton'
+
+import config from '@/config'
+import useAuth from '@/composition/auth'
+import useItem from '@/composition/item'
+import {ORCID_ID_REGEX} from '@/lib/orcid'
+import EmailPrompt from '@/components/common/EmailPrompt.vue'
+
+export default {
+  name: 'CollectionPermissionsEditor',
+  components: {Button, Column, DataTable, Dialog, Dropdown, EmailPrompt, InputText, SelectButton},
+  emits: ['saved'],
+
+  props: {
+    collectionUrn: {
+      type: String,
+      required: true
+    },
+  },
+
+  setup: () => {
+    const {userOrcidId} = useAuth()
+    return {
+      userOrcidId,
+      ...useItem({itemTypeName: 'collection'}),
+    }
+  },
+
+  data: () => ({
+    dialogVisible: false,
+
+    pendingUserRoles: [],
+    existingUserRoles: [],
+    orcidIdsToRemove: [],
+
+    orcidIdsToAddStr: '',
+    roleToAdd: 'viewer',
+
+    roleOptions: [
+      {title: 'Admin', value: 'admin'},
+      {title: 'Editor', value: 'editor'},
+      {title: 'Viewer', value: 'viewer'}
+    ],
+
+    errors: []
+  }),
+
+  computed: {
+    dirty: function() {
+      return this.pendingUserRoles.length > 0
+          || this.orcidIdsToRemove.length > 0
+          || this.existingUserRoles.some((ur) => ur.oldRole)
+    },
+
+    userRoles: function() {
+      return [
+        ...this.pendingUserRoles.map((ur) => ({...ur, state: 'pending'})),
+        ...this.existingUserRoles.map((ur) => ({...ur, state: 'saved'}))
+      ]
+    }
+  },
+
+  watch: {
+    collectionUrn: {
+      handler: function(newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.setItemId(newValue)
+        }
+      },
+      immediate: true
+    },
+
+    item: {
+      handler: function(newValue, oldValue) {
+        if (!_.isEqual(newValue, oldValue)) {
+          this.existingUserRoles = [
+            ...newValue?.admins?.map((user) => ({user, role: 'admin'})) || [],
+            ...newValue?.editors?.map((user) => ({user, role: 'editor'})) || [],
+            ...newValue?.viewers?.map((user) => ({user, role: 'viewer'})) || []
+          ]
+        }
+      }
+    }
+  },
+
+  methods: {
+    addUsers: async function() {
+      const orcidIdsToAdd = _.without(this.orcidIdsToAddStr.split(/[ ,]+/g), )
+
+      const invalidOrcidIds = []
+      for (const orcidId of orcidIdsToAdd) {
+        const existingUserRole = this.existingUserRoles.find((ur) => ur.user.orcidId == orcidId)
+        const pendingUserRole = this.pendingUserRoles.find((ur) => ur.user.orcidId == orcidId)
+
+        if (orcidId == this.userOrcidId) {
+          // Do not allow ths user to add herself.
+          this.$toast.add({
+            life: 3000,
+            severity: 'warn',
+            summary: `Your own admin permissions cannot be changed.`
+          })
+        } else if (existingUserRole) {
+          // If the the target user already has a different saved role for this collection, behave as though the user
+          // had changed the role using the drop-down.
+          this.changeRole(orcidId, this.roleToAdd)
+        } else if (pendingUserRole) {
+          // If the target user has a pending role added in this session, update the desired role.
+          pendingUserRole.role = this.roleToAdd
+        } else if (!ORCID_ID_REGEX.test(orcidId)) {
+          // If the ORCID ID is invalid, issue a warning.
+          invalidOrcidIds.push(orcidId)
+          this.$toast.add({
+            life: 3000,
+            severity: 'warn',
+            summary: `${orcidId} is not a valid ORCID ID`
+          })
+        } else {
+          const user = await this.lookupUser(orcidId)
+          if (!user) {
+            // If the ORCID ID does not refer to a MaveDB user, issue a warning.
+            invalidOrcidIds.push(orcidId)
+            this.$toast.add({
+              life: 3000,
+              severity: 'warn',
+              summary: `No MaveDB user was found with ORCID ID ${orcidId}.`
+            })
+          } else {
+            // If the ORCID ID refers to a user who does not yet have a role for this collection, add the user role to
+            // the list of pending roles.
+            this.pendingUserRoles.push({user, role: this.roleToAdd})
+          }
+        }
+      }
+      this.orcidIdsToAddStr = invalidOrcidIds.join(' ')
+    },
+
+    changeRole: function(orcidId, newRole) {
+      const userRole = this.userRoles.find((ur) => ur.user.orcidId == orcidId)
+      if (userRole) {
+        if (userRole.state == 'saved') {
+          if (userRole.role != newRole) {
+            if (userRole.oldRole == newRole) {
+              userRole.role = newRole
+              userRole.oldRole = undefined
+            } else {
+              if (!userRole.oldRole) {
+                userRole.oldRole = userRole.role
+              }
+              userRole.role = newRole
+            }
+          }
+          const existingUserRoleIndex = this.existingUserRoles.findIndex((ur) => ur.user.orcidId == userRole.user.orcidId)
+          this.existingUserRoles.splice(existingUserRoleIndex, 1, userRole)
+        } else if (userRole.state == 'pending') {
+          userRole.role = newRole
+          const pendingUserRoleIndex = this.pendingUserRoles.findIndex((ur) => ur.user.orcidId == userRole.user.orcidId)
+          this.pendingUserRoles.splice(pendingUserRoleIndex, 1, userRole)
+        }
+      }
+    },
+
+    clearUserSearch: function() {
+      this.$refs.userSearchinput.$refs.input.value = ''
+    },
+
+    lookupUser: async function(orcidId) {
+      // Look up MaveDB user by ORCID ID.
+      let user = null
+      try {
+        user = (await axios.get(`${config.apiBaseUrl}/users/${orcidId}`)).data
+      } catch (err) {
+        // Assume that the error was 404 Not Found.
+      }
+
+      return user
+    },
+
+    removeUserRole: function(orcidId) {
+      const userRole = this.userRoles.find((ur) => ur.user.orcidId == orcidId)
+      if (userRole) {
+        if (userRole.state == 'saved') {
+          // If the user already has a role, mark it for removal. Clear any pending role change.
+          this.orcidIdsToRemove.push(userRole.user.orcidId)
+          if (userRole.oldRole) {
+            userRole.role = userRole.oldRole
+            userRole.oldRole = undefined
+          }
+          const existingUserRoleIndex = this.existingUserRoles.findIndex((ur) => ur.user.orcidId == userRole.user.orcidId)
+          this.existingUserRoles.splice(existingUserRoleIndex, 1, userRole)
+        } else if (userRole.state == 'pending') {
+          // If the user as been added in this session, remove the pending user role.
+          const pendingUserRoleIndex = this.pendingUserRoles.findIndex((ur) => ur.user.orcidId == userRole.user.orcidId)
+          if (pendingUserRoleIndex >= 0) {
+            this.pendingUserRoles.splice(pendingUserRoleIndex, 1)
+          }
+        }
+      }
+    },
+
+    restoreUserRole: function(orcidId) {
+      this.orcidIdsToRemove = _.without(this.orcidIdsToRemove, orcidId)
+    },
+
+    rowStyle: function(userRole) {
+      if (userRole.state == 'pending') {
+        return {backgroundColor: '#d1ffbd'} // Light green
+      } else if (this.orcidIdsToRemove.includes(userRole.user.orcidId)) {
+        return {backgroundColor: '#ffcccb'} // Light red
+      } else if (userRole.oldRole) {
+        return {backgroundColor: '#ccddff'} // Light red
+      }
+    },
+
+    saveChanges: async function() {
+      this.errors = []
+
+      const failedRemovalUserRoles = []
+      for (const orcidId of this.orcidIdsToRemove) {
+        const userRole = this.existingUserRoles.find((ur) => ur.user.orcidId == orcidId)
+        try {
+          await axios.delete(`${config.apiBaseUrl}/collections/${this.collectionUrn}/${userRole.role}s/${orcidId}`)
+        } catch (e) {
+          failedRemovalUserRoles.push(userRole)
+          this.errors.push(`${orcidId}: ${e.message}`)
+        }
+      }
+
+      const failedAdditionUserRoles = []
+      for (const role of ['admin', 'editor', 'viewer']) {
+        const userRoles = this.pendingUserRoles.filter((ur) => ur.role == role)
+
+        for (const userRole of userRoles) {
+          try {
+            await axios.post(
+              `${config.apiBaseUrl}/collections/${this.collectionUrn}/${role}s`,
+              {orcid_id: userRole.user.orcidId}
+            )
+          } catch (error) {
+            console.log(error)
+            failedAdditionUserRoles.push(userRole)
+            this.errors.push(`${userRole.user.orcidId}: ${error.message}`)
+          }
+        }
+      }
+
+      const failedRoleChangeUserRoles = []
+      const userRoles = this.existingUserRoles.filter((ur) => ur.oldRole != null && ur.oldRole != ur.role)
+
+      for (const userRole of userRoles) {
+        try {
+          await axios.delete(`${config.apiBaseUrl}/collections/${this.collectionUrn}/${userRole.oldRole}s/${userRole.user.orcidId}`)
+          await axios.post(
+            `${config.apiBaseUrl}/collections/${this.collectionUrn}/${userRole.role}s`,
+            {orcid_id: userRole.user.orcidId}
+          )
+        } catch (error) {
+          console.log(error)
+          failedRoleChangeUserRoles.push(userRole)
+          this.errors.push(`${userRole.user.orcidId}: ${error.message}`)
+        }
+      }
+
+      if (failedRemovalUserRoles.length == 0 && failedAdditionUserRoles.length == 0 && failedRoleChangeUserRoles == 0) {
+        this.dialogVisible = false
+        this.$emit('saved')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-collection-permissions-editor-button {
+  width: fit-content;
+}
+
+.mave-collection-editor-action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 2px;
+  margin: 5px 0 0 0;
+}
+
+.mave-collection-editor-action-buttons Button {
+  margin: 0 0 0 3px;
+}
+
+.mave-collection-add-users-search-input {
+  width: 100%;
+}
+
+.mave-collection-add-users-search-input:deep(.p-inputtext) {
+  width: 100%;
+}
+
+.mave-collection-role-dropdown:deep(.p-inputtext) {
+  padding: 0 0.3em;
+}
+
+.mave-collection-role-to-add {
+  display: inline;
+}
+
+.mave-collection-user-role-add-controls {
+  margin: 1em 0;
+}
+
+.mave-collection-user-role-add-controls .p-selectbutton {
+  margin-right: 1em;
+}
+
+.mave-collection-user-role-add-controls:deep(*) {
+  vertical-align: middle;
+}
+</style>
diff --git a/src/components/OddsPathTable.vue b/src/components/OddsPathTable.vue
new file mode 100644
index 00000000..b3bbd2c4
--- /dev/null
+++ b/src/components/OddsPathTable.vue
@@ -0,0 +1,101 @@
+<template>
+    <table v-if="evidenceStrengths" class="mave-odds-path-table">
+        <tr>
+            <th>Odds Path Abnormal<sup>*</sup></th>
+            <th>Odds Path Normal<sup>*</sup></th>
+        </tr>
+        <tr v-if="evidenceStrengths.oddsOfPathogenicity">
+            <td>{{ evidenceStrengths.oddsOfPathogenicity.abnormal }}</td>
+            <td>{{ evidenceStrengths.oddsOfPathogenicity.normal }}</td>
+        </tr>
+        <tr>
+            <td :class="`mave-evidence-code-${evidenceStrengths.evidenceCodes.abnormal}`">{{
+                evidenceStrengths.evidenceCodes.abnormal }}</td>
+            <td :class="`mave-evidence-code-${evidenceStrengths.evidenceCodes.normal}`">{{
+                evidenceStrengths.evidenceCodes.normal }}</td>
+        </tr>
+    </table>
+    <div v-if="evidenceStrengths" style="font-style: italic; text-align: center; margin-bottom: 2em;"><sup>*</sup>
+        Source: <a :href="evidenceStrengths.source" target="_blank">{{ evidenceStrengths.source }}</a></div>
+    <div v-if="evidenceStrengths?.exampleVariant"
+        style="font-style: italic; text-align: center; margin-top: -1.5em; margin-bottom: 2em;">
+        <router-link :to="{ name: 'variant', params: { urn: evidenceStrengths.exampleVariant.urn } }">Click
+            here</router-link> for a preview of future clinical variant features.
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: "OddsPathTable",
+
+    props: {
+        scoreSet: {
+            type: Object,
+            required: true
+        },
+    },
+
+    computed: {
+        evidenceStrengths: function () {
+            return {
+                'urn:mavedb:00000050-a-1': {
+                    oddsOfPathogenicity: {
+                        abnormal: 24.9,
+                        normal: 0.043
+                    },
+                    evidenceCodes: {
+                        abnormal: 'PS3_Strong',
+                        normal: 'BS3_Strong'
+                    },
+                    source: 'https://pubmed.ncbi.nlm.nih.gov/36550560/'
+                },
+                'urn:mavedb:00000097-0-1': {
+                    oddsOfPathogenicity: {
+                        abnormal: 52.4,
+                        normal: 0.02
+                    },
+                    evidenceCodes: {
+                        abnormal: 'PS3_Strong',
+                        normal: 'BS3_Strong'
+                    },
+                    source: 'https://pubmed.ncbi.nlm.nih.gov/34793697/',
+                    exampleVariant: {
+                        urn: 'urn:mavedb:00000097-0-1#1697',
+                        name: 'NM_007294.4(BRCA1):c.5237A>C (p.His1746Pro)'
+                    }
+                }
+            }[this.scoreSet.urn] || null
+        }
+    }
+})
+</script>
+
+<style>
+/* Evidence strength */
+
+table.mave-odds-path-table {
+    border-collapse: collapse;
+    margin: 1em auto 0.5em auto;
+}
+
+table.mave-odds-path-table td,
+table.mave-odds-path-table th {
+    border: 1px solid gray;
+    padding: 0.5em 1em;
+    text-align: center;
+}
+
+table.mave-odds-path-table td.mave-evidence-code-PS3_Strong {
+    background-color: #b02418;
+    color: white;
+    font-weight: bold;
+}
+
+table.mave-odds-path-table td.mave-evidence-code-BS3_Strong {
+    background-color: #385492;
+    color: white;
+    font-weight: bold;
+}
+</style>
diff --git a/src/components/ScoreSetHeatmap.vue b/src/components/ScoreSetHeatmap.vue
index 571ff323..74166b82 100644
--- a/src/components/ScoreSetHeatmap.vue
+++ b/src/components/ScoreSetHeatmap.vue
@@ -2,10 +2,22 @@
   <div v-if="heatmapVisible">
 
     <div style="text-align: center;">Functional Score by Variant</div>
-    <div id="mave-heatmap-container" class="heatmapContainer" ref="heatmapContainer">
-      <div id="mave-heatmap-scroll-container" class="heatmapScrollContainer" ref="heatmapScrollContainer">
-        <div id="mave-stacked-heatmap-container" class="mave-simple-variants-stacked-heatmap-container" ref="simpleVariantsStackedHeatmapContainer" />
-        <div id="mave-variants-heatmap-container" class="mave-simple-variants-heatmap-container" ref="simpleVariantsHeatmapContainer" />
+    <div class="mave-heatmap-wrapper">
+      <div id="mave-heatmap-container" class="heatmapContainer" ref="heatmapContainer">
+        <div id="mave-heatmap-scroll-container" class="heatmapScrollContainer" ref="heatmapScrollContainer">
+          <div id="mave-stacked-heatmap-container" class="mave-simple-variants-stacked-heatmap-container" ref="simpleVariantsStackedHeatmapContainer" />
+          <div id="mave-variants-heatmap-container" class="mave-simple-variants-heatmap-container" ref="simpleVariantsHeatmapContainer" />
+        </div>
+      </div>
+      <div class="mave-heatmap-controls">
+        <span class="mave-heatmap-controls-title">Heatmap format</span>
+        <SelectButton
+          v-model="layout"
+          :allow-empty="false"
+          option-label="title"
+          option-value="value"
+          :options="[{title: 'Normal', value: 'normal'}, {title: 'Compact', value: 'compact'}]"
+        />
       </div>
     </div>
     <div v-if="numComplexVariants > 0">{{numComplexVariants}} variants are complex and cannot be shown on this type of chart.</div>
@@ -14,8 +26,9 @@
 
 <script lang="ts">
 
-import _ from 'lodash'
 import * as d3 from 'd3'
+import _ from 'lodash'
+import SelectButton from 'primevue/selectbutton'
 
 import geneticCodes from '@/lib/genetic-codes'
 import makeHeatmap, {heatmapRowForNucleotideVariant, heatmapRowForProteinVariant, HEATMAP_AMINO_ACID_ROWS, HEATMAP_NUCLEOTIDE_ROWS, HeatmapDatum} from '@/lib/heatmap'
@@ -32,9 +45,11 @@ function stdev(array: number[]) {
   return Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n)
 }
 
+type HeatmapLayout = 'normal' | 'compact'
+
 export default {
   name: 'ScoreSetHeatmap',
-
+  components: {SelectButton},
   emits: ['variantSelected', 'heatmapVisible', 'exportChart'],
 
   props: {
@@ -83,7 +98,8 @@ export default {
     simpleVariants: null,
     numComplexVariants: 0,
     heatmap: null as Heatmap | null,
-    stackedHeatmap: null as Heatmap | null
+    stackedHeatmap: null as Heatmap | null,
+    layout: 'normal' as HeatmapLayout
   }),
 
   computed: {
@@ -138,6 +154,13 @@ export default {
   },
 
   watch: {
+    layout: {
+      handler: function(newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.renderOrRefreshHeatmaps()
+        }
+      }
+    },
     scores: {
       handler: function() {
         if (!this.scores) {
@@ -337,8 +360,13 @@ export default {
         return
       }
 
+      this.heatmap?.destroy()
+      this.stackedHeatmap?.destroy()
+
       this.drawHeatmap()
-      this.isNucleotideHeatmap ? null : this.drawStackedHeatmap()
+      if (!this.isNucleotideHeatmap && this.layout != 'compact') {
+        this.drawStackedHeatmap()
+      }
     },
 
     // Assumes that plate dimensions do not change.
@@ -353,6 +381,13 @@ export default {
         .tooltipHtml(this.tooltipHtmlGetter)
         .datumSelected(this.variantSelected)
 
+      if (this.layout == 'compact') {
+        this.heatmap.nodeBorderRadius(0)
+          .nodePadding(0)
+          .nodeSize({width: 1, height: 20})
+          .skipXTicks(99)
+      }
+
       this.heatmap.data(this.simpleAndWtVariants)
         .valueField((d) => d.meanScore)
         .colorClassifier((variant) => variant.details.wt ? d3.color('#ddbb00') : variant.meanScore)
@@ -421,6 +456,39 @@ export default {
 
 <style scoped>
 
+.mave-heatmap-controls {
+  display: none;
+  align-items: center;
+  gap: 10px;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+  width: 100%;
+  padding: 10px;
+  background-color: #eee;
+}
+
+.mave-heatmap-controls .p-selectbutton {
+  display: inline-block;
+}
+
+.mave-heatmap-controls * {
+  vertical-align: middle;
+}
+
+.mave-heatmap-controls-title {
+  font-weight: bold;
+}
+
+.mave-heatmap-wrapper {
+  position: relative;
+}
+
+.mave-heatmap-wrapper:hover .mave-heatmap-controls {
+  display: flex;
+  flex-direction: row;
+}
+
 .heatmapContainer {
   position: relative;
 }
diff --git a/src/components/ScoreSetHistogram.vue b/src/components/ScoreSetHistogram.vue
index fe7063bc..e9f5f5e0 100644
--- a/src/components/ScoreSetHistogram.vue
+++ b/src/components/ScoreSetHistogram.vue
@@ -1,5 +1,22 @@
 <template>
   <TabMenu class="mave-histogram-viz-select" v-if="hasTabBar" v-model:activeIndex="activeViz" :model="vizOptions" />
+  <div v-if="hasTabBar && showShaders" class="mave-histogram-controls">
+    <div class="flex flex-wrap gap-3">
+      Shader Options:
+      <div class="flex align-items-center gap-1">
+          <RadioButton v-model="activeShader" inputId="unsetShader" name="shader" value="null" />
+          <label for="unsetShader">No Shader</label>
+      </div>
+      <div class="flex items-center gap-2" v-if="scoreSet.scoreRanges">
+          <RadioButton v-model="activeShader" inputId="rangeShader" name="shader" value="range" />
+          <label for="rangeShader">Score Ranges</label>
+      </div>
+      <div class="flex items-center gap-2" v-if="scoreSet.scoreCalibrations">
+          <RadioButton v-model="activeShader" inputId="calibrationShader" name="shader" value="threshold" />
+          <label for="calibrationShader">Calibration Thresholds</label>
+      </div>
+    </div>
+  </div>
   <div v-if="showControls" class="mave-histogram-controls">
     <div class="mave-histogram-control">
       <label for="mave-histogram-star-select" class="mave-histogram-control-label">Minimum ClinVar review status 'gold stars': </label>
@@ -16,14 +33,20 @@
     </div>
   </div>
   <div class="mave-histogram-container" ref="histogramContainer" />
+  <div v-if="activeShader == 'range'">
+    <OddsPathTable :score-set="scoreSet" />
+  </div>
+  <div v-if="activeShader == 'threshold'">
+    <CalibrationTable :calibrations="scoreSet.scoreCalibrations" @calibration-selected="childComponentSelectedCalibrations" />
+  </div>
 </template>
 
 <script lang="ts">
-import * as d3 from 'd3'
-import { variantNotNullOrNA } from '@/lib/mave-hgvs'
 import { saveChartAsFile } from '@/lib/chart-export'
 import _ from 'lodash'
 import Checkbox from 'primevue/checkbox'
+import Dropdown from 'primevue/dropdown'
+import RadioButton from 'primevue/radiobutton'
 import Rating from 'primevue/rating'
 import TabMenu from 'primevue/tabmenu'
 import {defineComponent} from 'vue'
@@ -35,7 +58,11 @@ import {
   CLINVAR_REVIEW_STATUS_STARS,
   PATHOGENIC_CLINICAL_SIGNIFICANCE_CLASSIFICATIONS
 } from '@/lib/clinvar'
-import makeHistogram, {DEFAULT_SERIES_COLOR, Histogram, HistogramSerieOptions} from '@/lib/histogram'
+import makeHistogram, {DEFAULT_SERIES_COLOR, Histogram, HistogramSerieOptions, HistogramDatum} from '@/lib/histogram'
+import CalibrationTable from '@/components/CalibrationTable.vue'
+import { prepareThresholdsForHistogram } from '@/lib/calibrations'
+import { prepareRangesForHistogram } from '@/lib/ranges'
+import OddsPathTable from './OddsPathTable.vue'
 
 const CLNSIG_FIELD = 'mavedb_clnsig'
 const CLNREVSTAT_FIELD = 'mavedb_clnrevstat'
@@ -52,7 +79,7 @@ const DEFAULT_MIN_STAR_RATING = 1
 
 export default defineComponent({
   name: 'ScoreSetHistogram',
-  components: { Checkbox, Rating, TabMenu, },
+  components: { Checkbox, Dropdown, RadioButton, Rating, TabMenu, CalibrationTable, OddsPathTable },
 
   emits: ['exportChart'],
 
@@ -98,20 +125,27 @@ export default defineComponent({
     }
   },
 
-  data: () => ({
-    config: config,
+  data: function() {
+    const scoreSetHasRanges = config.CLINICAL_FEATURES_ENABLED && this.scoreSet.scoreRanges != null
 
-    activeViz: 0,
-    clinicalSignificanceClassificationOptions: CLINVAR_CLINICAL_SIGNIFICANCE_CLASSIFICATIONS,
-    customMinStarRating: DEFAULT_MIN_STAR_RATING,
-    customSelectedClinicalSignificanceClassifications: DEFAULT_CLINICAL_SIGNIFICANCE_CLASSIFICATIONS,
-    histogram: null as Histogram | null
-  }),
+    return {
+      config: config,
+
+      activeViz: 0,
+      activeShader: scoreSetHasRanges ? 'range' : 'null',
+      activeCalibrationKey: null,
+
+      clinicalSignificanceClassificationOptions: CLINVAR_CLINICAL_SIGNIFICANCE_CLASSIFICATIONS,
+      customMinStarRating: DEFAULT_MIN_STAR_RATING,
+      customSelectedClinicalSignificanceClassifications: DEFAULT_CLINICAL_SIGNIFICANCE_CLASSIFICATIONS,
+      histogram: null as Histogram | null,
+    }
+  },
 
   computed: {
     series: function() {
-      switch (this.activeViz) {
-        case 1: // Clinical view
+      switch (this.vizOptions[this.activeViz].view) {
+        case 'clinical':
 
           return [{
             classifier: (d) =>
@@ -131,7 +165,7 @@ export default defineComponent({
             }
           }]
 
-        case 2: // Custom
+        case 'custom':
           {
             const series = [{
               classifier: (d) =>
@@ -179,28 +213,57 @@ export default defineComponent({
             return series
           }
 
-        case 0: // Overall score distribution
-        default:
+        case 'calibrations':
+          return null
 
+        default: // Overall score distribution
           return null
       }
     },
 
     vizOptions: function() {
-      const options = [{label: 'Overall Distribution'}]
-      if (this.variants.some((v) => v[CLNSIG_FIELD] !== undefined)) {
-        options.push({label: 'Clinical View'})
-        options.push({label: 'Custom'})
+      const options = [{label: 'Overall Distribution', view: 'distribution'}]
+      const someVariantsHaveClinicalSignificance = this.variants.some((v) => v[CLNSIG_FIELD] !== undefined)
+
+      if (someVariantsHaveClinicalSignificance) {
+        options.push({label: 'Clinical View', view: 'clinical'})
+      }
+
+      // custom view should always come last
+      if (someVariantsHaveClinicalSignificance) {
+        options.push({label: 'Custom', view: 'custom'})
       }
       return options
     },
 
+    shaderOptions: function() {
+      const options = [{label: 'Hide Shaders', view: 'null'}]
+
+      if (this.scoreSet.scoreRanges) {
+        options.push({label: 'Score Ranges', view: 'range'})
+      }
+
+      if (this.scoreSet.scoreCalibrations) {
+        options.push({label: 'Calibration Thresholds', view: 'calibration'})
+      }
+
+      return options
+    },
+
     hasTabBar: function() {
       return this.config.CLINICAL_FEATURES_ENABLED && this.vizOptions.length > 1
     },
 
     showControls: function() {
-      return this.activeViz == 2
+      return this.activeViz == this.vizOptions.findIndex(item => item.view === 'custom')
+    },
+
+    showShaders: function() {
+      return this.shaderOptions.length > 1
+    },
+
+    activeCalibration: function() {
+      return this.activeCalibrationKey ? this.scoreSet.scoreCalibrations[this.activeCalibrationKey] : null
     },
 
     minStarRating: function() {
@@ -304,7 +367,7 @@ export default defineComponent({
   watch: {
     variants: {
       handler: function() {
-        renderOrRefreshHistogram()
+        this.renderOrRefreshHistogram()
       }
     },
     series: {
@@ -312,6 +375,16 @@ export default defineComponent({
         this.renderOrRefreshHistogram()
       }
     },
+    activeCalibration: {
+      handler: function() {
+        this.renderOrRefreshHistogram()
+      }
+    },
+    activeShader: {
+      handler: function() {
+          this.renderOrRefreshHistogram()
+      }
+    },
     externalSelection: {
       handler: function(newValue) {
         if (this.histogram) {
@@ -332,7 +405,7 @@ export default defineComponent({
       handler: function() {
         this.renderOrRefreshHistogram()
       }
-    }
+    },
   },
 
   mount: function() {
@@ -354,6 +427,7 @@ export default defineComponent({
             .valueField((variant) => variant.score)
             .tooltipHtml(this.tooltipHtmlGetter)
       }
+
       let seriesClassifier: ((d: HistogramDatum) => number[]) | null = null
       if (this.series) {
         const seriesIndices = _.range(0, this.series.length)
@@ -361,36 +435,12 @@ export default defineComponent({
           seriesIndices.filter((seriesIndex) => this.series[seriesIndex].classifier(d))
       }
 
-      let ranges = []
-      if (this.config.CLINICAL_FEATURES_ENABLED) {
-        switch (this.scoreSet.urn) {
-          case 'urn:mavedb:00000097-0-1':
-            ranges = [{
-              min: -0.748,
-              max: 1.307,
-              color: '#4444ff',
-              title: 'Functionally normal'
-            }, {
-              min: -5.651,
-              max: -1.328,
-              color: '#ff4444',
-              title: 'Functionally abnormal'
-            }]
-            break
-          case 'urn:mavedb:00000050-a-1':
-            ranges = [{
-              min: -7.57,
-              max: 0,
-              color: '#4444ff',
-              title: 'Functionally normal'
-            }, {
-              min: 0,
-              max: 5.39,
-              color: '#ff4444',
-              title: 'Functionally abnormal'
-            }]
-            break
-        }
+      const histogramShaders = {}
+      if (this.scoreSet.scoreRanges) {
+        histogramShaders["range"] = prepareRangesForHistogram(this.scoreSet.scoreRanges)
+      }
+      if (this.activeCalibration) {
+        histogramShaders["threshold"] = prepareThresholdsForHistogram(this.activeCalibration)
       }
 
       this.histogram.data(this.variants)
@@ -398,15 +448,30 @@ export default defineComponent({
           .seriesClassifier(seriesClassifier)
           .title(this.hasTabBar ? null : 'Distribution of Functional Scores')
           .legendNote(this.activeViz == 0 ? null : 'ClinVar data from time of publication')
-          .ranges(ranges)
-          .refresh()
+          .shaders(histogramShaders)
 
       if (this.externalSelection) {
         this.histogram.selectDatum(this.externalSelection)
       } else {
         this.histogram.clearSelection()
       }
-    }
+
+      // Only render clinical specific viz options if such features are enabled.
+      this.histogram.renderShader(null)
+      if (this.config.CLINICAL_FEATURES_ENABLED) {
+        this.histogram.renderShader(this.activeShader)
+      }
+
+      this.histogram.refresh()
+    },
+
+    childComponentSelectedCalibrations: function(calibrationKey: string) {
+      this.activeCalibrationKey = calibrationKey
+    },
+
+    titleCase: (s) =>
+            s.replace (/^[-_]*(.)/, (_, c) => c.toUpperCase())       // Initial char (after -/_)
+            .replace (/[-_]+(.)/g, (_, c) => ' ' + c.toUpperCase()) // First char after each -/_
   }
 })
 </script>
diff --git a/src/components/layout/Toolbar.vue b/src/components/layout/Toolbar.vue
index 869e16f1..a4df7e29 100644
--- a/src/components/layout/Toolbar.vue
+++ b/src/components/layout/Toolbar.vue
@@ -119,6 +119,10 @@ export default {
           label: 'Settings',
           route: '/settings',
           available: ({authenticated}) => authenticated
+        }, {
+          label: 'Collections',
+          route: '/collections',
+          available: ({authenticated}) => authenticated
         }, {
           label: 'Sign out',
           command: () => this.signOut(),
diff --git a/src/components/screens/CollectionView.vue b/src/components/screens/CollectionView.vue
new file mode 100644
index 00000000..dd721143
--- /dev/null
+++ b/src/components/screens/CollectionView.vue
@@ -0,0 +1,486 @@
+<template>
+  <DefaultLayout>
+    <div v-if="itemStatus=='Loaded'" class="mave-collection">
+      <div class="mave-1000px-col">
+        <div class="mave-screen-title-bar">
+          <Button v-if="userIsAuthorized.update && item.private" aria-label="Private collection" class="flex-i" icon="pi pi-lock" text title="Private collection" @click="privacyDialogVisible = true" />
+          <Button v-else-if="userIsAuthorized.update && !item.private" aria-label="Publicly visible" class="flex-i" icon="pi pi-lock-open" text title="Publicly visible" @click="privacyDialogVisible = true" />
+          <i v-else-if="item.private" class="flex-i pi pi-lock" />
+          <div v-if="userIsAuthorized.update" class="flex-auto">
+            <Inplace
+              :active="displayCollectionNameEdit"
+              class="mave-screen-collection-title"
+              @open="displayCollectionNameEdit = true; editName = item.name"
+            >
+              <template #display>
+                {{ item.name }}
+                <CollectionBadge
+                  v-if="item.badgeName"
+                  :collection="item"
+                />
+              </template>
+              <template #content>
+                <div class="flex mave-collection-name-editor">
+                  <InputText
+                    v-model="editName"
+                    autofocus
+                    class="flex-auto"
+                    @keyup.enter="saveCollectionName"
+                    @keyup.escape="displayCollectionNameEdit = false"
+                  />
+                  <Button class="flex-none" icon="pi pi-check" @click="saveCollectionName" />
+                  <Button class="flex-none" icon="pi pi-times" severity="danger" @click="displayCollectionNameEdit = false" />
+                </div>
+              </template>
+            </Inplace>
+          </div>
+          <div v-else>
+            <div class="mave-screen-title">
+              {{ item.name }}
+              <CollectionBadge
+                v-if="item.badgeName"
+                :collection="item"
+              />
+            </div>
+          </div>
+          <div v-if="userIsAuthorized.delete" class="mave-screen-title-controls">
+            <Button label="Delete" severity="danger" size="small" @click="deleteCollectionWithConfirmation" />
+          </div>
+        </div>
+        <div v-if="userIsAuthorized.update">
+          <Inplace
+            :active="displayCollectionDescriptionEdit"
+            class="mave-collection-description"
+            @open="displayCollectionDescriptionEdit = true; editDescription = item.description"
+          >
+            <template #display>
+              {{ item.description || "(Click here to add description)" }}
+            </template>
+            <template #content>
+              <div class="flex mave-collection-description-editor">
+                <Textarea
+                  v-model="editDescription"
+                  autofocus
+                  class="flex-auto"
+                  @keyup.escape="displayCollectionDescriptionEdit = false"
+                />
+                <Button icon="pi pi-check" @click="saveCollectionDescription" />
+                <Button icon="pi pi-times" severity="danger" @click="displayCollectionDescriptionEdit = false" />
+              </div>
+            </template>
+          </Inplace>
+        </div>
+        <div v-else>
+          <div v-if="item.description" class="mave-collection-description">{{ item.description }}</div>
+        </div>
+      </div>
+      <div class="mave-1000px-col">
+        <div v-if="item.creationDate">Created {{ formatDate(item.creationDate) }} <span v-if="item.createdBy">
+          <a :href="`https://orcid.org/${item.createdBy.orcidId}`" target="_blank"><img src="@/assets/ORCIDiD_icon.png"
+            alt="ORCIDiD">{{ item.createdBy.firstName }} {{ item.createdBy.lastName }}</a></span></div>
+        <div v-if="item.modificationDate">
+          Last updated {{ formatDate(item.modificationDate) }}
+          <span v-if="item.modifiedBy">
+            <a :href="`https://orcid.org/${item.modifiedBy.orcidId}`" target="_blank">
+              <img src="@/assets/ORCIDiD_icon.png" alt="ORCIDiD" />
+              {{ item.modifiedBy.firstName }} {{ item.modifiedBy.lastName }}
+            </a>
+          </span>
+        </div>
+        <div class="mave-collection-section-title">
+          Score Sets
+          <div v-if="userIsAuthorized.add_score_set">
+            <CollectionDataSetEditor
+              :collection-urn="item.urn"
+              data-set-type="scoreSet"
+              @saved="childComponentEditedCollection"
+            />
+          </div>
+        </div>
+        <ul v-if="item.scoreSetUrns.length != 0">
+          <li v-for="scoreSetUrn in item.scoreSetUrns" :key="scoreSetUrn">
+            <EntityLink display="title" entity-type="scoreSet" :urn="scoreSetUrn" />
+          </li>
+        </ul>
+        <div v-else>No associated score sets yet</div>
+        <div class="mave-collection-section-title">
+          Experiments
+          <!-- NOTE: permissions are the same for add score set and add experiment -->
+          <div v-if="userIsAuthorized.add_score_set">
+            <CollectionDataSetEditor
+              :collection-urn="item.urn"
+              data-set-type="experiment"
+              @saved="childComponentEditedCollection"
+            />
+          </div>
+        </div>
+        <ul v-if="item.experimentUrns.length != 0">
+          <li v-for="experimentUrn in item.experimentUrns" :key="experimentUrn">
+            <EntityLink display="title" entity-type="experiment" :urn="experimentUrn" />
+          </li>
+        </ul>
+        <div v-else>No associated experiments yet</div>
+        <div class="mave-collection-section-title">
+          User Permissions
+          <div v-if="userIsAuthorized.add_role">
+            <CollectionPermissionsEditor
+              :collection-urn="item.urn"
+              @saved="childComponentEditedCollection"
+            />
+          </div>
+        </div>
+        <div v-if="item.admins.length != 0 || userIsAuthorized.add_role" class="mave-collection-contributors-subsection">
+          <div class="mave-collection-contributors-subsection-title">Admins</div>
+          <ul v-if="item.admins.length > 0">
+            <div v-for="admin in item.admins" :key="admin">
+              <a :href="`https://orcid.org/${admin.orcidId}`" target="_blank">
+                <img src="@/assets/ORCIDiD_icon.png" alt="ORCIDiD" />
+                {{ admin.firstName }} {{ admin.lastName }}
+              </a>
+            </div>
+          </ul>
+          <p v-else>No admins</p>
+        </div>
+        <div v-if="userIsAuthorized.add_role" class="mave-collection-contributors-subsection">
+          <div class="mave-collection-contributors-subsection-title">Editors</div>
+          <ul v-if="item.editors.length > 0">
+            <div v-for="editor in item.editors" :key="editor">
+              <a :href="`https://orcid.org/${editor.orcidId}`" target="_blank">
+                <img src="@/assets/ORCIDiD_icon.png" alt="ORCIDiD" />
+                {{ editor.firstName }} {{ editor.lastName }}
+              </a>
+            </div>
+          </ul>
+          <p v-else>No editors</p>
+        </div>
+        <div v-if="userIsAuthorized.add_role" class="mave-collection-contributors-subsection">
+          <div class="mave-collection-contributors-subsection-title">Viewers</div>
+          <ul v-if="item.viewers.length > 0">
+            <div v-for="viewer in item.viewers" :key="viewer">
+              <a :href="`https://orcid.org/${viewer.orcidId}`" target="_blank">
+                <img src="@/assets/ORCIDiD_icon.png" alt="ORCIDiD" />
+                {{ viewer.firstName }} {{ viewer.lastName }}
+              </a>
+            </div>
+          </ul>
+          <p v-else>No viewers</p>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="itemStatus=='Loading' || itemStatus=='NotLoaded'">
+      <PageLoading/>
+    </div>
+    <div v-else>
+      <ItemNotFound model="collection" :item-id="itemId"/>
+    </div>
+  </DefaultLayout>
+  <Dialog
+    v-if="userIsAuthorized.update"
+    v-model:visible="privacyDialogVisible"
+    :close-on-escape="true"
+    header="Privacy"
+    modal
+    :style="{width: '25rem'}"
+  >
+    <p v-if="item.private">This collection is currently private. Only you and other users listed as admins, editors, or viewers can access it.</p>
+    <p v-else-if="item.badgeName">This collection is currently public and is an official collection of MaveDB.</p>
+    <p v-else>This collection is currently public. Any user who has the URL can access it.</p>
+
+    <Button v-if="item.private" icon="pi pi-lock-open" label="Make it public" severity="danger" @click="updatePrivacyWithConfirmation(false)" />
+    <Button v-else-if="!item.badgeName" icon="pi pi-lock" label="Make it private" severity="danger" @click="updatePrivacyWithConfirmation(true)" />
+  </Dialog>
+</template>
+
+<script>
+import axios from 'axios'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Inplace from 'primevue/inplace'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+
+import EntityLink from '@/components/common/EntityLink'
+import CollectionBadge from '@/components/CollectionBadge'
+import CollectionDataSetEditor from '@/components/CollectionDataSetEditor'
+import CollectionPermissionsEditor from '@/components/CollectionPermissionsEditor'
+import DefaultLayout from '@/components/layout/DefaultLayout'
+import ItemNotFound from '@/components/common/ItemNotFound'
+import PageLoading from '@/components/common/PageLoading'
+import config from '@/config'
+import useAuth from '@/composition/auth'
+import useFormatters from '@/composition/formatters'
+import useItem from '@/composition/item'
+
+export default {
+  name: 'CollectionView',
+
+  components: { Button, CollectionBadge, CollectionDataSetEditor, CollectionPermissionsEditor, DefaultLayout, Dialog, EntityLink, Inplace, InputText, ItemNotFound, PageLoading, Textarea },
+
+  props: {
+    itemId: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: () => ({
+    userIsAuthorized: {
+      delete: false,
+      publish: false,
+      update: false,
+      add_score_set: false, // permissions are the same for add score set, remove score set, add experiment, and remove experiment
+      add_role: false, // permissions are the same for add user to role and remove user from role
+    },
+    editName: null,
+    displayCollectionNameEdit: false,
+    editDescription: null,
+    displayCollectionDescriptionEdit: false,
+    privacyDialogVisible: false
+  }),
+
+  setup: () => {
+    const {userIsAuthenticated} = useAuth()
+    return {
+      config: config,
+      userIsAuthenticated,
+
+      ...useFormatters(),
+      ...useItem({ itemTypeName: 'collection' }),
+    }
+  },
+
+  mounted: async function() {
+    await this.checkAuthorization()
+  },
+
+  watch: {
+    itemId: {
+      handler: function(newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.setItemId(newValue)
+        }
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    checkAuthorization: async function() {
+      // Response should be true to get authorization
+      const actions = ['delete', 'publish', 'update', 'add_score_set', 'add_role']
+      try {
+        for (const action of actions) {
+          let response = await axios.get(`${config.apiBaseUrl}/permissions/user-is-permitted/collection/${this.itemId}/${action}`)
+          this.userIsAuthorized[action] = response.data
+        }
+      } catch (err) {
+        console.log(`Error to get authorization:`, err)
+      }
+    },
+
+    childComponentEditedCollection: function() {
+      this.reloadItem(this.itemId)
+    },
+
+    deleteCollectionWithConfirmation: function() {
+      const numOtherUsers = (this.item.admins || []).length + (this.item.editors || []).length
+          + (this.item.viewers || []).length - 1
+
+      const message = (numOtherUsers > 0) ?
+        `Are you sure you want to delete the collection named "${this.item.name}"? ${numOtherUsers} users will also lose access.`
+        : `Are you sure you want to delete the collection named "${this.item.name}"?`
+
+      this.$confirm.require({
+        message,
+        header: `Delete ${this.item.name}`,
+        icon: 'pi pi-exclamation-triangle',
+        accept: async () => {
+          if (this.item) {
+            let response = null
+            try {
+              response = await axios.delete(`${config.apiBaseUrl}/collections/${this.item.urn}`, this.item)
+            } catch (e) {
+              response = e.response || {status: 500}
+            }
+
+            if (response.status == 200) {
+              this.$router.replace({ name: `collections` })
+              this.$toast.add({severity: 'success', summary: 'The collection was successfully deleted.', life: 3000})
+            } else  {
+              this.$toast.add({severity: 'warn', summary: response.data?.detail || 'Sorry, deletion failed.', life: 3000})
+            }
+          }
+        }
+      })
+    },
+
+    saveCollectionName: async function() {
+      const editedName = this.editName?.trim()
+      if (!editedName || editedName.length == 0 || editedName == this.item.name) {
+        // Do nothing if the name is empty or has not changed.
+        this.displayCollectionNameEdit = false
+      } else {
+        const collectionPatch = {
+          name: editedName
+        }
+        let response = null
+        try {
+          response = await axios.patch(`${config.apiBaseUrl}/collections/${this.item.urn}`, collectionPatch)
+        } catch (e) {
+          response = e.response || { status: 500 }
+          this.$toast.add({ severity: 'error', summary: 'Error saving collection name', life: 3000 })
+        }
+        if (response.status == 200) {
+          this.reloadItem(this.itemId)
+          this.displayCollectionNameEdit = false
+          this.$toast.add({ severity: 'success', summary: 'Saved new collection name.', life: 3000 })
+        } else {
+          console.log(response)
+        }
+      }
+    },
+
+    saveCollectionDescription: async function() {
+      let editedDescription = this.editDescription?.trim()
+      editedDescription = editedDescription == '' ? null : editedDescription
+      if (editedDescription == this.item.description) {
+        // Do nothing if the description has not changed.
+        this.displayCollectionNameEdit = false
+      } else {
+        const collectionPatch = {
+          description: editedDescription == '' ? null : editedDescription
+        }
+        let response = null
+        try {
+          response = await axios.patch(`${config.apiBaseUrl}/collections/${this.item.urn}`, collectionPatch)
+        } catch (e) {
+          response = e.response || { status: 500 }
+          this.$toast.add({ severity: 'error', summary: 'Error saving description', life: 3000 })
+        }
+        if (response.status == 200) {
+          this.reloadItem(this.itemId)
+          this.displayCollectionDescriptionEdit = false
+          this.$toast.add({ severity: 'success', summary: 'Saved description.', life: 3000 })
+        } else {
+          console.log(response)
+        }
+      }
+    },
+
+    updatePrivacyWithConfirmation: function(newPrivate) {
+      if (newPrivate != this.item.private) {
+        if (newPrivate) {
+          this.$confirm.require({
+            message: 'After making it private, only users you designated as admins, editors, or viewers will be able to see it.',
+            header: `Are you sure you want to make this collection private?`,
+            icon: 'pi pi-exclamation-triangle',
+            accept: async () => {
+              if (this.item) {
+                let response = null
+                try {
+                  response = await axios.patch(`${config.apiBaseUrl}/collections/${this.item.urn}`, {private: true})
+                } catch (e) {
+                  response = e.response || { status: 500 }
+                }
+
+                if (response.status == 200) {
+                  this.reloadItem(this.itemId)
+                  this.$toast.add({severity: 'success', summary: 'The collection is now private.', life: 3000})
+                  this.privacyDialogVisible = false
+                } else  {
+                  this.$toast.add({severity: 'warn', summary: response.data?.detail || 'Sorry, the collection privacy setting could not be updated.', life: 3000})
+                }
+              }
+            }
+          })
+        } else {
+          this.$confirm.require({
+            message: 'After making it public, any user with the collection URL will be able to see it. Editing will still be limited to people you designated as admins or editors.',
+            header: `Are you sure you want to make this collection public?`,
+            icon: 'pi pi-exclamation-triangle',
+            accept: async () => {
+              if (this.item) {
+                let response = null
+                try {
+                  response = await axios.patch(`${config.apiBaseUrl}/collections/${this.item.urn}`, {private: false})
+                } catch (e) {
+                  response = e.response || { status: 500 }
+                }
+
+                if (response.status == 200) {
+                  this.reloadItem(this.itemId)
+                  this.$toast.add({severity: 'success', summary: 'The collection is now public.', life: 3000})
+                  this.privacyDialogVisible = false
+                } else  {
+                  this.$toast.add({severity: 'warn', summary: response.data?.detail || 'Sorry, the collection privacy setting could not be updated.', life: 3000})
+                }
+              }
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-collection {
+  padding: 20px;
+}
+
+.mave-collection-description {
+  white-space: pre-line;
+}
+
+.mave-collection-description:deep(.p-inplace-display) {
+  margin: 0 0 10px 0;
+  padding-left: 0;
+}
+
+.mave-collection-section-title {
+  font-size: 24px;
+  padding: 0 0 5px 0;
+  border-bottom: 1px solid #ccc;
+  margin: 20px 0 10px 0;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 20px;
+}
+
+.mave-collection-contributors-subsection-title {
+  font-size: 18px;
+  padding: 0 0 0 0;
+  /* margin: 20px 0 10px 0; */
+}
+
+.mave-collection-contributors-subsection {
+  padding: 0 0 5px 0;
+  border-bottom: 1px dashed #ccc;
+  margin: 20px 0 10px 0;
+}
+
+.mave-collection-description-editor,
+.mave-collection-name-editor {
+  position: relative;
+  width: 100%;
+}
+
+.mave-collection-description-editor > *,
+.mave-collection-name-editor > * {
+  margin-left: 0.5em;
+}
+
+.mave-collection-description-editor > *:first-child,
+.mave-collection-name-editor > *:first-child {
+  margin-left: 0;
+}
+
+.mave-screen-collection-title:deep(.p-inplace-display) {
+  flex: 0 0 auto;
+  font-size: 28px;
+  padding: 0;
+}
+</style>
diff --git a/src/components/screens/CollectionsView.vue b/src/components/screens/CollectionsView.vue
new file mode 100644
index 00000000..51e85839
--- /dev/null
+++ b/src/components/screens/CollectionsView.vue
@@ -0,0 +1,134 @@
+<template>
+  <DefaultLayout>
+    <div>
+      <div class="mave-1000px-col">
+        <div class="mave-screen-title-bar">
+          <div class="mave-screen-title">My saved collections</div>
+        </div>
+        <div v-if="collectionsStatus == 'Loaded' && collections.length > 0">
+          <DataTable
+            class="mave-collections-table"
+            data-key="urn"
+            :multi-sort-meta="[{field: 'role', order: 1}, {field: 'name', order: 1}]"
+            sort-mode="multiple"
+            :value="collections"
+          >
+            <Column field="name" header="Collection name" :sortable="true">
+              <template #body="{data}"><router-link :to="{name: 'collection', params: {urn: data.urn}}">{{data.name}}</router-link></template>
+            </Column>
+            <Column class="mave-collection-description" field="description" header="Description" :sortable="true" />
+            <Column body-class="mave-align-center" :field="(c) => (c.experimentUrns || []).length" header="Experiments" :sortable="true" />
+            <Column body-class="mave-align-center" :field="(c) => (c.scoreSetUrns || []).length" header="Score&nbsp;sets" :sortable="true" />
+            <Column field="role" header="Permissions" :sortable="true" />
+            <Column field="modificationDate" header="Last modified" :sortable="true">
+              <template #body="{data}">{{ formatDate(data.modificationDate) }}</template>
+            </Column>
+          </DataTable>
+          <Button label="Add an empty collection" @click="creatorVisible = true" />
+        </div>
+        <div v-else-if="collectionsStatus == 'Loaded'">
+          <p>You have not saved any data sets to a collection.</p>
+          <Button label="Create an empty collection" @click="creatorVisible = true" />
+        </div>
+        <PageLoading v-else-if="['NotLoaded', 'Loading'].includes(collectionsStatus)" />
+        <div v-else>
+          Sorry, an error occurred, and collection data could not be loaded. Please refresh the page to try again.
+        </div>
+      </div>
+    </div>
+  </DefaultLayout>
+  <Dialog
+    v-model:visible="creatorVisible"
+    :close-on-escape="true"
+    header="Create a new collection"
+    modal
+    :style="{maxWidth: '90%', width: '50rem'}"
+  >
+    <CollectionCreator
+      @canceled="creatorVisible = false"
+      @created-collection="childComponentCreatedCollection"
+    />
+  </Dialog>
+</template>
+
+<script>
+import axios from 'axios'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Dialog from 'primevue/dialog'
+
+import CollectionCreator from '@/components/CollectionCreator'
+import PageLoading from '@/components/common/PageLoading'
+import DefaultLayout from '@/components/layout/DefaultLayout'
+import useFormatters from '@/composition/formatters'
+import config from '@/config'
+
+export default {
+  name: 'CollectionsView',
+
+  components: {Button, CollectionCreator, Column, DataTable, DefaultLayout, Dialog, PageLoading},
+
+  setup: useFormatters,
+
+  data: () => ({
+    collections: [],
+    collectionsStatus: 'NotLoaded',
+    creatorVisible: false
+  }),
+
+  mounted: async function() {
+    await this.fetchData()
+  },
+
+  methods: {
+    childComponentCreatedCollection: function() {
+      this.creatorVisible = false
+      this.fetchData()
+    },
+
+    fetchData: async function() {
+      this.collectionsStatus = 'Loading'
+      this.collections = []
+
+      let response = null
+      try {
+        response = await axios.get(`${config.apiBaseUrl}/users/me/collections`)
+      } catch (error) {
+        response = error.response || {status: 500}
+        console.log('Error while loading collections: ', error)
+      }
+
+      if (response.status == 200) {
+        this.collections = [
+          ...response.data['admin'].map((c) => ({...c, role: 'Admin'})),
+          ...response.data['editor'].map((c) => ({...c, role: 'Edit'})),
+          ...response.data['viewer'].map((c) => ({...c, role: 'View'}))
+        ]
+        this.collectionsStatus = 'Loaded'
+      } else {
+        this.collections = []
+        this.collectionsStatus = 'LoadingFailed'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mave-collections-table {
+  margin: 1em 0;
+}
+
+.mave-collections-table:deep(td) {
+  vertical-align: top;
+}
+
+.mave-collections-table:deep(.mave-align-center) {
+  text-align: center;
+}
+
+.mave-collections-table:deep(.mave-collection-description) {
+  white-space: pre-line;
+}
+</style>
diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index e912e7b3..ca896fb9 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -229,7 +229,7 @@
                         >
                           <template #chip="slotProps">
                             <div>
-                              <div>{{ slotProps.value.identifier }}</div>
+                              <div>{{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}</div>
                             </div>
                           </template>
                           <template #item="slotProps">
@@ -899,6 +899,10 @@ export default {
       }
     },
 
+    truncatePublicationTitle: function(title) {
+      return title.length > 50 ? title.slice(0, 50) + "..." : title
+    },
+
     acceptNewRawReadIdentifier: function() {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.rawReadIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index b9c5aab3..72120b14 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -3,7 +3,16 @@
     <div v-if="itemStatus=='Loaded'" class="mave-score-set">
       <div class="mave-1000px-col">
         <div class="mave-screen-title-bar">
-          <div class="mave-screen-title">{{ item.title || 'Untitled experiment' }}</div>
+          <div class="mave-screen-title">
+            {{ item.title || 'Untitled experiment' }}
+          </div>
+          <div class="mave-collection-badges">
+            <CollectionBadge
+              v-for="officialCollection in item.officialCollections"
+              :collection="officialCollection"
+              :key="officialCollection.urn"
+            />
+          </div>
           <div v-if="userIsAuthenticated">
             <div class="mave-screen-title-controls">
               <Button v-if="userIsAuthorized.add_score_set" class="p-button-sm" @click="addScoreSet">Add a score set</Button>
@@ -44,6 +53,7 @@
             }}</router-link>
         </div>
         <div v-if="item.currentVersion">Current version {{ item.currentVersion }}</div>
+        <CollectionAdder class="mave-save-to-collection-button" data-set-type="experiment" :data-set-urn="item.urn" />
 
         <div class="mave-score-set-section-title">Score Sets</div>
         <div v-if="this.associatedScoreSets.length != 0">
@@ -212,27 +222,28 @@
 </template>
 
 <script>
-
 import axios from 'axios'
 import _ from 'lodash'
 import {marked} from 'marked'
+import {PrimeIcons} from 'primevue/api'
 import Button from 'primevue/button'
-import Chip from 'primevue/chip'
-import DefaultLayout from '@/components/layout/DefaultLayout'
 import Dialog from 'primevue/dialog'
-import PageLoading from '@/components/common/PageLoading'
-import { PrimeIcons } from 'primevue/api'
+import 'primeicons/primeicons.css'
+
+import CollectionAdder from '@/components/CollectionAdder'
+import CollectionBadge from '@/components/CollectionBadge'
 import ItemNotFound from '@/components/common/ItemNotFound'
+import PageLoading from '@/components/common/PageLoading'
+import DefaultLayout from '@/components/layout/DefaultLayout'
 import useAuth from '@/composition/auth'
-import { textForTargetGeneCategory } from '@/lib/target-genes'
-import useItem from '@/composition/item'
 import useFormatters from '@/composition/formatters'
+import useItem from '@/composition/item'
 import config from '@/config'
-import 'primeicons/primeicons.css'
+import {textForTargetGeneCategory} from '@/lib/target-genes'
 
 export default {
   name: 'ExperimentView',
-  components: { Button, DefaultLayout, Dialog, PageLoading, ItemNotFound, PrimeIcons },
+  components: {Button, CollectionAdder, CollectionBadge, DefaultLayout, Dialog, PageLoading, ItemNotFound, PrimeIcons},
 
   setup: () => {
     const {userIsAuthenticated} = useAuth()
@@ -413,6 +424,13 @@ export default {
   margin: 10px 0;
 }
 
+.mave-collection-badges {
+  flex: 1 1 auto;
+  padding: 0 0 0 7px;
+  font-size: 12px;
+  line-height: 29px;
+}
+
 /* Score set details */
 
 .mave-score-set-section-title {
@@ -459,4 +477,8 @@ export default {
   font-size: 87.5%;
   word-wrap: break-word;
 }
+
+.mave-save-to-collection-button {
+  margin: 1em 0;
+}
 </style>
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 47e8df3a..32084320 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -450,7 +450,7 @@
                         >
                           <template #chip="slotProps">
                             <div>
-                              <div>{{ slotProps.value.identifier }}</div>
+                              <div>{{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}</div>
                             </div>
                           </template>
                           <template #item="slotProps">
@@ -1963,6 +1963,10 @@ export default {
       }
     },
 
+    truncatePublicationTitle: function(title) {
+      return title.length > 50 ? title.slice(0, 50) + "..." : title
+    },
+
     addDefaultOffset: function (dbName, targetIdx) {
       const currentTargetGene = this.createdTargetGenes[targetIdx].targetGene
       if (!currentTargetGene.externalIdentifiers[dbName]?.offset){
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index e5ea2063..9a4f268a 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -53,6 +53,13 @@
             <span>{{ item.title || 'Untitled score set' }}</span>
             <span v-if="item.urn" class="mave-score-set-urn">{{ item.urn }}</span>
           </div>
+          <div class="mave-collection-badges">
+            <CollectionBadge
+              v-for="officialCollection in item.officialCollections"
+              :collection="officialCollection"
+              :key="officialCollection.urn"
+            />
+          </div>
           <div v-if="userIsAuthenticated">
             <div v-if="!item.publishedDate" class="mave-screen-title-controls">
               <Button v-if="userIsAuthorized.update" class="p-button-sm" @click="editItem">Edit</Button>
@@ -111,24 +118,6 @@
             @export-chart="setHeatmapExport" ref="heatmap"
           />
         </div>
-        <table v-if="evidenceStrengths" class="mave-odds-path-table">
-          <tr>
-            <th>Odds Path Abnormal<sup>*</sup></th>
-            <th>Odds Path Normal<sup>*</sup></th>
-          </tr>
-          <tr v-if="evidenceStrengths.oddsOfPathogenicity">
-            <td>{{ evidenceStrengths.oddsOfPathogenicity.abnormal }}</td>
-            <td>{{ evidenceStrengths.oddsOfPathogenicity.normal }}</td>
-          </tr>
-          <tr>
-            <td :class="`mave-evidence-code-${evidenceStrengths.evidenceCodes.abnormal}`">{{ evidenceStrengths.evidenceCodes.abnormal }}</td>
-            <td :class="`mave-evidence-code-${evidenceStrengths.evidenceCodes.normal}`">{{ evidenceStrengths.evidenceCodes.normal }}</td>
-          </tr>
-        </table>
-        <div v-if="evidenceStrengths" style="font-style: italic; text-align: center; margin-bottom: 2em;"><sup>*</sup> Source: <a :href="evidenceStrengths.source" target="_blank">{{ evidenceStrengths.source }}</a></div>
-        <div v-if="evidenceStrengths?.exampleVariant" style="font-style: italic; text-align: center; margin-top: -1.5em; margin-bottom: 2em;">
-          <router-link :to="{name: 'variant', params: {urn: evidenceStrengths.exampleVariant.urn}}">Click here</router-link> for a preview of future clinical variant features.
-        </div>
       </div>
       <div class="mave-1000px-col">
         <div v-if="item.externalLinks?.ucscGenomeBrowser?.url">
@@ -192,6 +181,8 @@
             <Button class="p-button-outlined p-button-sm" @click="heatmapExport()">Heatmap</Button>&nbsp;
           </template>
         </div>
+        <CollectionAdder class="mave-save-to-collection-button" data-set-type="scoreSet" :data-set-urn="item.urn" />
+
         <div v-if="requestFromGalaxy == '1'"><br>Send files to <a :href="`${this.galaxyUrl}`">Galaxy</a> <Button class="p-button-outlined p-button-sm" @click="sendToGalaxy('scores')">Scores</Button>&nbsp;
           <template v-if="countColumns.length != 0">
             <Button class="p-button-outlined p-button-sm" @click="sendToGalaxy('counts')">Counts</Button>&nbsp;
@@ -428,6 +419,8 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import ScrollPanel from 'primevue/scrollpanel';
 
+import CollectionAdder from '@/components/CollectionAdder'
+import CollectionBadge from '@/components/CollectionBadge'
 import ScoreSetHeatmap from '@/components/ScoreSetHeatmap'
 import ScoreSetHistogram from '@/components/ScoreSetHistogram'
 import EntityLink from '@/components/common/EntityLink'
@@ -440,7 +433,6 @@ import useItem from '@/composition/item'
 import useRemoteData from '@/composition/remote-data'
 import config from '@/config'
 import { textForTargetGeneCategory } from '@/lib/target-genes';
-import {saveChartAsFile} from '@/lib/chart-export'
 import { parseScoresOrCounts } from '@/lib/scores'
 import { preferredVariantLabel, variantNotNullOrNA } from '@/lib/mave-hgvs';
 import { mapState } from 'vuex'
@@ -448,7 +440,7 @@ import { ref } from 'vue'
 
 export default {
   name: 'ScoreSetView',
-  components: { Accordion, AccordionTab, AutoComplete, Button, Chip, DefaultLayout, EntityLink, ScoreSetHeatmap, ScoreSetHistogram, TabView, TabPanel, Message, DataTable, Column, ProgressSpinner, ScrollPanel, PageLoading, ItemNotFound },
+  components: { Accordion, AccordionTab, AutoComplete, Button, Chip, CollectionAdder, CollectionBadge, DefaultLayout, EntityLink, ScoreSetHeatmap, ScoreSetHistogram, TabView, TabPanel, Message, DataTable, Column, ProgressSpinner, ScrollPanel, PageLoading, ItemNotFound },
   computed: {
     contributors: function() {
       return _.sortBy(
@@ -456,40 +448,6 @@ export default {
         ['familyName', 'givenName', 'orcidId']
       )
     },
-    evidenceStrengths: function() {
-      if (this.config.CLINICAL_FEATURES_ENABLED) {
-        return {
-          'urn:mavedb:00000050-a-1': {
-            oddsOfPathogenicity: {
-              abnormal: 24.9,
-              normal: 0.043
-            },
-            evidenceCodes: {
-              abnormal: 'PS3_Strong',
-              normal: 'BS3_Strong'
-            },
-            source: 'https://pubmed.ncbi.nlm.nih.gov/36550560/'
-          },
-          'urn:mavedb:00000097-0-1': {
-            oddsOfPathogenicity: {
-              abnormal: 52.4,
-              normal: 0.02
-            },
-            evidenceCodes: {
-              abnormal: 'PS3_Strong',
-              normal: 'BS3_Strong'
-            },
-            source: 'https://pubmed.ncbi.nlm.nih.gov/34793697/',
-            exampleVariant: {
-              urn: 'urn:mavedb:00000097-0-1#1697',
-              name: 'NM_007294.4(BRCA1):c.5237A>C (p.His1746Pro)'
-            }
-          }
-        }[this.item.urn] || null
-      } else {
-        return null
-      }
-    },
     isMetaDataEmpty: function() {
       //If extraMetadata is empty, return value will be true.
       return Object.keys(this.item.extraMetadata).length === 0
@@ -746,9 +704,9 @@ export default {
       let response = null
       try {
         if (this.item && download_type == "counts") {
-          response = await axios.get(`${config.apiBaseUrl}/score-sets/${this.item.urn}/counts`)
+          response = await axios.get(`${config.apiBaseUrl}/score-sets/${this.item.urn}/counts?drop_na_columns=true`)
         } else if (this.item && download_type == "scores") {
-          response = await axios.get(`${config.apiBaseUrl}/score-sets/${this.item.urn}/scores`)
+          response = await axios.get(`${config.apiBaseUrl}/score-sets/${this.item.urn}/scores?drop_na_columns=true`)
         }
       } catch (e) {
         response = e.response || { status: 500 }
@@ -966,6 +924,13 @@ export default {
   width: 100%;
 }
 
+.mave-collection-badges {
+  flex: 1 1 auto;
+  padding: 0 0 0 7px;
+  font-size: 12px;
+  line-height: 29px;
+}
+
 /* Score set details */
 
 .mave-score-set-section-title {
@@ -991,31 +956,6 @@ export default {
   margin: 0 0.5em;
 }
 
-/* Evidence strength */
-
-table.mave-odds-path-table {
-   border-collapse: collapse;
-   margin: 1em auto 0.5em auto;
-}
-
-table.mave-odds-path-table td,
-table.mave-odds-path-table th {
-   border: 1px solid gray;
-   padding: 0.5em 1em;
-   text-align: center;
-}
-
-table.mave-odds-path-table td.mave-evidence-code-PS3_Strong {
-   background-color: #b02418;
-   color: white;
-   font-weight: bold;
-}
-table.mave-odds-path-table td.mave-evidence-code-BS3_Strong {
-   background-color: #385492;
-   color: white;
-   font-weight: bold;
-}
-
 /* Formatting in Markdown blocks */
 
 .mave-score-set-abstract {
@@ -1041,4 +981,8 @@ table.mave-odds-path-table td.mave-evidence-code-BS3_Strong {
   height: 50px;
   width: 50px;
 }
+
+.mave-save-to-collection-button {
+  margin: 1em 0;
+}
 </style>
diff --git a/src/composition/auth.ts b/src/composition/auth.ts
index dddc2cfe..eff0071d 100644
--- a/src/composition/auth.ts
+++ b/src/composition/auth.ts
@@ -39,6 +39,7 @@ export default () => {
 
   const userIdToken = computed(() => orcidIdToken)
   const userIsAuthenticated = computed(() => orcidIsAuthenticated.value)
+  const userOrcidId = computed(() => orcidUserProfile.value?.sub)
   const userProfile = computed(() => orcidUserProfile.value)
   const roles = computed(() => store.state.auth.roles)
   const activeRoles = computed(() => store.state.auth.activeRoles)
@@ -54,6 +55,7 @@ export default () => {
     roles,
     userIdToken,
     userIsAuthenticated,
+    userOrcidId,
     userProfile,
 
     signIn,
diff --git a/src/lib/calibrations.ts b/src/lib/calibrations.ts
new file mode 100644
index 00000000..e6706805
--- /dev/null
+++ b/src/lib/calibrations.ts
@@ -0,0 +1,89 @@
+import { HistogramShader } from "@/lib/histogram"
+
+export const POSITIVE_EVIDENCE_STRENGTH_COLOR_SHADES = "#ff4444"
+export const NEGATIVE_EVIDENCE_STRENGTH_COLOR_SHADES = "#4444ff"
+
+export interface Calibrations {
+    thresholds: number[]
+    positiveLikelihoodRatios: number[]
+    evidenceStrengths: number[]
+}
+
+export function prepareThresholdsForHistogram(calibrations: Calibrations): HistogramShader[] {
+    const thresholdRanges: HistogramShader[] = []
+
+    const thresholdCardinality = inferCardinalityOfThresholds(calibrations)
+
+    calibrations.thresholds.forEach((threshold, idx) => {
+        const evidenceStrengthAtIndex = calibrations.evidenceStrengths[idx]
+        const evidenceStrengthIsPositive = evidenceStrengthAtIndex > 0
+        const thresholdColor = evidenceStrengthIsPositive ? POSITIVE_EVIDENCE_STRENGTH_COLOR_SHADES : NEGATIVE_EVIDENCE_STRENGTH_COLOR_SHADES
+
+        const thresholdRange: HistogramShader = {
+            min: null,
+            max: null,
+
+            color: thresholdColor,
+            thresholdColor: thresholdColor,
+            title: calibrations.evidenceStrengths[idx].toString(),
+            align: "center",
+
+            startOpacity: 0.15,
+            stopOpacity: 0.05,
+
+            gradientUUID: undefined,
+        }
+
+        // The first and last threshold have no min or max. Depending on their cardinality, the threshold itself is the other
+        // value.
+        if (idx === 0 || idx === calibrations.thresholds.length - 1) {
+            thresholdCardinality[idx] > 0 ? thresholdRange.min = threshold : thresholdRange.max = threshold
+        }
+        // If the threshold cardinality is positive, the threshold maximum will be the next threshold. The opposite is true
+        // for thresholds with negative cardinality.
+        else {
+            if (thresholdCardinality[idx] > 0) {
+                thresholdRange.min = threshold
+                thresholdRange.max = calibrations.thresholds[idx+1]
+            } else {
+                thresholdRange.min = calibrations.thresholds[idx-1]
+                thresholdRange.max = threshold
+            }
+        }
+
+        thresholdRanges.push(thresholdRange)
+    })
+
+    return thresholdRanges
+}
+
+
+// Infer the cardinality of a given threshold.
+// Assumptions:
+//     - The thresholds are ordered in either ascending or descending fashion
+//     - The evidence strengths are ordered in either ascending or descending fashion
+//     - All positive evidence strengths have the same cardinality (the same applies for negative evidence strengths)
+function inferCardinalityOfThresholds(calibrations: Calibrations): number[] {
+
+    // If the first threshold is larger, that implies its initial cardinality is positive.
+    const initialCardinality = calibrations.thresholds[0] > calibrations.thresholds[-1] ? 1 : -1
+
+    const thresholdCardinality = [initialCardinality]
+
+    let lastCardinality = initialCardinality
+    for (let i = 1; i < calibrations.thresholds.length; i++) {
+        const evidenceStrengthFlipped = calibrations.evidenceStrengths[i-1] * calibrations.evidenceStrengths[i] < 0 ? true : false
+
+        // If the sign of the evidence strength flipped, flip the cardinality of the threhsold. Otherwise, the
+        // cardinality will be the same as the prior threshold.
+        if (evidenceStrengthFlipped) {
+            thresholdCardinality.push(lastCardinality * -1)
+        } else {
+            thresholdCardinality.push(lastCardinality)
+        }
+
+        lastCardinality = thresholdCardinality[thresholdCardinality.length - 1]
+    }
+
+    return thresholdCardinality
+}
diff --git a/src/lib/heatmap.ts b/src/lib/heatmap.ts
index 834a6daa..b4725fe5 100644
--- a/src/lib/heatmap.ts
+++ b/src/lib/heatmap.ts
@@ -114,6 +114,8 @@ export interface Heatmap {
   margins: Accessor<HeatmapMargins, Heatmap>
   rows: Accessor<HeatmapRowSpecification[], Heatmap>
   nodeSize: Accessor<HeatmapNodeSize, Heatmap>
+  nodeBorderRadius: Accessor<number, Heatmap>
+  nodePadding: Accessor<number, Heatmap>
 
   // Color
   lowerBoundColor: Accessor<string, Heatmap>
@@ -123,6 +125,7 @@ export interface Heatmap {
   // Axis controls
   drawX: Accessor<boolean, Heatmap>
   drawY: Accessor<boolean, Heatmap>
+  skipXTicks: Accessor<number, Heatmap>
 
   // Legend controls
   legendTitle: Accessor<string | null, Heatmap>
@@ -176,6 +179,8 @@ export default function makeHeatmap(): Heatmap {
 
   // Layout
   let margins: HeatmapMargins = { top: 20, right: 20, bottom: 30, left: 20 }
+  let nodeBorderRadius: number = 4
+  let nodePadding: number = .1
   let nodeSize: HeatmapNodeSize = { width: 20, height: 20}
   let rows: HeatmapRowSpecification[] = HEATMAP_AMINO_ACID_ROWS
 
@@ -187,6 +192,7 @@ export default function makeHeatmap(): Heatmap {
   // Axis controls
   let drawX: boolean = true
   let drawY: boolean = true
+  let skipXTicks: number = 1
 
   // Legend controls
   let legendTitle: string | null = null
@@ -229,10 +235,9 @@ export default function makeHeatmap(): Heatmap {
 
   /** Margins of the heatmap itself, after leaving space for other drawn elements. */
   let effectiveMargins: HeatmapMargins = { top: 0, right: 0, bottom: 0, left: 0 }
-  const padding: number = .1
 
   // D3 selections containing DOM elements
-  let svg: d3.Selection<SVGSVGElement, any, any, any> | null = null
+  let svg: d3.Selection<SVGElement, any, any, any> | null = null
   let hoverTooltip: d3.Selection<HTMLDivElement, any, any, any> | null = null
   let selectionTooltip: d3.Selection<HTMLDivElement, any, any, any> | null = null
 
@@ -628,10 +633,10 @@ export default function makeHeatmap(): Heatmap {
         }
 
         // Set the Y scale. We are placing all row content starting at screen position 0 and continuing to the heatmap height.
-        yScale.range([0, height]).domain(_.range(0, rows.length)).padding(padding)
+        yScale.range([0, height]).domain(_.range(0, rows.length)).padding(nodePadding)
 
         // Set the X scale. We are placing idxLowerBound to idxUpperBound (all heatmap content) starting at screen position 0 and continuing to the effective heatmap width.
-        xScale.range([0, width - effectiveMargins.left]).domain((idxLowerBound && idxUpperBound ? _.range(idxLowerBound, idxUpperBound + 1) : [])).padding(padding)
+        xScale.range([0, width - effectiveMargins.left]).domain((idxLowerBound && idxUpperBound ? _.range(idxLowerBound, idxUpperBound + 1) : [])).padding(nodePadding)
 
         // Refresh the axes.
         if (drawX) {
@@ -642,9 +647,9 @@ export default function makeHeatmap(): Heatmap {
           .call(d3.axisBottom(xScale).ticks(0))
           .select('.domain').remove()
 
-          // Make all even-numbered x-axis labels invisible so they don't overlap at n > 100.
+          // Skip x-axis labels by making them invisible.
           svg.select('g.heatmap-bottom-axis').selectAll('g.tick')
-          .attr('class', (n) => (n % 2 === 0) ? 'heatmap-x-axis-invisible' : '')
+            .attr('class', (n) => (skipXTicks > 0 && (n % (skipXTicks + 1) === 1)) ? '' : 'heatmap-x-axis-invisible')
         }
         if (drawY) {
           svg.select('g.heatmap-y-axis-tick-labels')
@@ -669,8 +674,8 @@ export default function makeHeatmap(): Heatmap {
         chartedDatum.enter()
           .append('rect')
           .attr('class', d => `node-${xCoordinate(d)}-${yCoordinate(d)}`)
-          .attr('rx', 4)
-          .attr('ry', 4)
+          .attr('rx', nodeBorderRadius)
+          .attr('ry', nodeBorderRadius)
           .style('cursor', 'pointer')
           .style('opacity', 0.8)
           .on('mouseover', mouseover)
@@ -699,8 +704,8 @@ export default function makeHeatmap(): Heatmap {
         const heatmapCalculatedWidth = nodeSize.width * (content.columns ? content.columns : 0)
 
         // Total width/height, including all margins and additional elements.
-        const heatmapTotalWidth = ((margins.left + margins.right) + (drawLegend || alignViaLegend ? LEGEND_SIZE : 0) + heatmapCalculatedWidth) * (1 + padding)
-        const heatmapTotalHeight = ((margins.top + margins.bottom) + heatmapCalculatedHeight) * (1 + padding)
+        const heatmapTotalWidth = ((margins.left + margins.right) + (drawLegend || alignViaLegend ? LEGEND_SIZE : 0) + heatmapCalculatedWidth) * (1 + nodePadding)
+        const heatmapTotalHeight = ((margins.top + margins.bottom) + heatmapCalculatedHeight) * (1 + nodePadding)
 
         // Total width/height, less any provided margins.
         const drawableHeight = heatmapTotalHeight - margins.top - margins.bottom
@@ -827,6 +832,22 @@ export default function makeHeatmap(): Heatmap {
       return chart
     },
 
+    nodeBorderRadius: (value?: number) => {
+      if (value === undefined) {
+        return nodeBorderRadius
+      }
+      nodeBorderRadius = value
+      return chart
+    },
+
+    nodePadding: (value?: number) => {
+      if (value === undefined) {
+        return nodePadding
+      }
+      nodePadding = value
+      return chart
+    },
+
     nodeSize: (value?: HeatmapNodeSize) => {
       if (value === undefined) {
         return nodeSize
@@ -877,6 +898,15 @@ export default function makeHeatmap(): Heatmap {
       return chart
     },
 
+    skipXTicks: (value?: number) => {
+      if (value === undefined) {
+        return skipXTicks
+      }
+
+      skipXTicks = value
+      return chart
+    },
+
     legendTitle: (value?: string | null) => {
       if (value === undefined) {
         return legendTitle
diff --git a/src/lib/histogram.ts b/src/lib/histogram.ts
index 8b0f6832..c9cb5a86 100644
--- a/src/lib/histogram.ts
+++ b/src/lib/histogram.ts
@@ -1,12 +1,13 @@
 import * as d3 from 'd3'
 import $ from 'jquery'
 import _ from 'lodash'
+import { v4 as uuidv4 } from 'uuid';
 
 type FieldGetter<T> = ((d: HistogramDatum) => T) | string
 type Getter<T> = () => T
 type Accessor<T, Self> = (value?: T) => T | Self
 
-export const DEFAULT_RANGE_COLOR = '#333333'
+export const DEFAULT_SHADER_COLOR = '#333333'
 export const DEFAULT_SERIES_COLOR = '#333333'
 const LABEL_SIZE = 10
 
@@ -61,11 +62,39 @@ export interface HistogramBin {
   seriesBins: d3.Bin<HistogramDatum, number>[]
 }
 
-export interface HistogramRange {
+/** The definition for a shaded region */
+export interface HistogramShader {
+  /** The minimum and maximum x positions of this shaded region. */
   min: number | null
   max: number | null
+
+  /** The displayed title of this region. */
   title: string | null
+
+  /** The alignment of the title of this region. */
+  align: "left" | "right" | "center" | null
+
+  /** The color of this shaded region. */
   color: string | null
+
+  /** The color of the lines demarcating the shaded region at positions min and max. Also used
+   * for the color of the title.
+   */
+  thresholdColor: string | undefined
+
+  /** How opaque the start and end of the gradient should be. Opacity will change linearly
+   * between these two values across the shaded region.
+   */
+  startOpacity: number | undefined
+  stopOpacity: number | undefined
+
+  /** Created dynamically by this histogram object. Identifies the linear gradient internally. */
+  gradientUUID: string | undefined
+}
+
+/** An object containing definitions of each of the possible shaded regions on this Histogram. */
+export interface HistogramShaderRegions {
+  [key: string]: HistogramShader[]
 }
 
 export interface Histogram {
@@ -92,7 +121,6 @@ export interface Histogram {
   data: Accessor<HistogramDatum[], Histogram>
   seriesOptions: Accessor<HistogramSerieOptions[] | null, Histogram>
   seriesClassifier: Accessor<((d: HistogramDatum) => number[]) | null, Histogram>
-  ranges: Accessor<HistogramRange[], Histogram>
   numBins: Accessor<number, Histogram>
 
   // Data fields
@@ -113,6 +141,10 @@ export interface Histogram {
   bottomAxisLabel: Accessor<string | null, Histogram>
   legendNote: Accessor<string | null, Histogram>
 
+  // Shaded regions
+  shaders: Accessor<HistogramShaderRegions | null, Histogram>
+  renderShader: Accessor<string | null, Histogram>
+
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Getters
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -138,7 +170,6 @@ export default function makeHistogram(): Histogram {
   let data: HistogramDatum[] = []
   let seriesOptions: HistogramSerieOptions[] | null = null
   let seriesClassifier: ((d: HistogramDatum) => number[]) | null = null
-  let ranges: HistogramRange[] = []
   let numBins = 30
 
   // Data fields
@@ -159,6 +190,10 @@ export default function makeHistogram(): Histogram {
   let bottomAxisLabel: string | null = null
   let legendNote: string | null = null
 
+  // Shaded regions
+  let shaders: HistogramShaderRegions | null = null
+  let renderShader: string | null = null
+
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Read-only properties
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -204,8 +239,11 @@ export default function makeHistogram(): Histogram {
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
   const prepareData = () => {
+    // Filter NaN entries from the data property. We're unable to place such scores on the histogram.
+    const filteredData = data.filter((d) => !isNaN(applyField(d, valueField)))
+
     // Bin all the data, regardless of what series each datum belongs to.
-    const overallBins = d3.bin<HistogramDatum, number>().thresholds(numBins).value((d) => applyField(d, valueField))(data)
+    const overallBins = d3.bin<HistogramDatum, number>().thresholds(numBins).value((d) => applyField(d, valueField))(filteredData)
     const thresholds = (overallBins.length > 0 ? [overallBins[0].x0, ...overallBins.map((bin) => bin.x1)] : [])
         .filter((t) => t != null)
     const domain: [number, number] = [thresholds[0] || 0, thresholds[thresholds.length - 1] || 0]
@@ -217,7 +255,7 @@ export default function makeHistogram(): Histogram {
           .thresholds(thresholds)
           .value((d) => applyField(d, valueField))
       series = seriesOptions.map((serieOptions, i) => ({
-        bins: binClassifier(data.filter((datum) => classifier(datum).includes(i))),
+        bins: binClassifier(filteredData.filter((datum) => classifier(datum).includes(i))),
         x0: null,
         x1: null,
         maxBinSize: 0,
@@ -259,7 +297,7 @@ export default function makeHistogram(): Histogram {
     bins = overallBins.map((bin, binIndex) => ({
       x0: bin.x0 || 0,
       x1: bin.x1 || 0,
-      yMax: Math.max(...series.map((serie, i) => serie.bins[binIndex].length)),
+      yMax: Math.max(...series.map((serie) => serie.bins[binIndex].length)),
       seriesBins: series.map((serie) => serie.bins[binIndex])
     }))
   }
@@ -274,6 +312,39 @@ export default function makeHistogram(): Histogram {
     return _.isString(field) ? (_.get(d, field) as T) : (field(d) as T)
   }
 
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Canvas placement calculations
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+  const alignTextInRegion = (min: number, max: number, align: string | null) => {
+    switch(align){
+      case "left":
+        return min
+      case "right":
+        return max
+      default:
+        return (min + max) / 2
+    }
+  }
+
+  const padTextInElement = (elem: d3.Selection<d3.BaseType | SVGGElement, HistogramShader, d3.BaseType, any>, align: string | null, text: string | null) => {
+    const tempText = elem.append('g')
+        .append('text')
+        .style('visibility', 'hidden')
+        .text(text)
+    const textWidth = (tempText.node()?.getBoundingClientRect()?.width || 0)
+
+    switch (align) {
+      case "left":
+        return 10
+      case "right":
+        return -textWidth
+      default:
+        return 0
+    }
+  }
+
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Hovering
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -464,12 +535,12 @@ export default function makeHistogram(): Histogram {
   }
 
   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Ranges
+  // Shaders
   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-  const rangePolygon = (range: HistogramRange, yMax: number) => {
+  const shaderPolygon = (shaderRegion: HistogramShader, yMax: number) => {
     const points = []
-    const {min: xMin, max: xMax} = visibleRange(range)
+    const {min: xMin, max: xMax} = visibleShaderRegion(shaderRegion)
     const yMin = yScale.domain()[0]
 
     // Start at the top left.
@@ -512,10 +583,10 @@ export default function makeHistogram(): Histogram {
     return points
   }
 
-  const visibleRange = (range: HistogramRange) => {
+  const visibleShaderRegion = (region: HistogramShader) => {
     return {
-      min: range.min == null ? xScale.domain()[0] : Math.max(range.min, xScale.domain()[0]),
-      max: range.max == null ? xScale.domain()[1] : Math.min(range.max, xScale.domain()[1])
+      min: region.min == null ? xScale.domain()[0] : Math.max(region.min, xScale.domain()[0]),
+      max: region.max == null ? xScale.domain()[1] : Math.min(region.max, xScale.domain()[1])
     }
   }
 
@@ -553,9 +624,9 @@ export default function makeHistogram(): Histogram {
             .attr('class', 'histogram-main')
             .attr('transform', `translate(${margins.left},${margins.top})`)
         mainGroup.append('g')
-            .attr('class', 'histogram-ranges')
+          .attr('class', 'histogram-shaders')
         mainGroup.append('g')
-            .attr('class', 'histogram-range-thresholds')
+          .attr('class', 'histogram-shader-thresholds')
         mainGroup.append('g')
             .attr('class', 'histogram-bars')
         mainGroup.append('g')
@@ -776,7 +847,7 @@ export default function makeHistogram(): Histogram {
 
         // Hover target is the full height of the chart.
         hovers.append('rect')
-            .attr('class', (d) => `histogram-hover-target`)
+            .attr('class', () => `histogram-hover-target`)
             .attr('x', (d) => xScale(d.x0))
             .attr('width', (d) => xScale(d.x1) - xScale(d.x0))
             .attr('y', () => yScale(yMax))
@@ -785,7 +856,7 @@ export default function makeHistogram(): Histogram {
 
         // However, only the largest bin is highlighted on hover.
         hovers.append('rect')
-            .attr('class', (d) => `histogram-hover-highlight`)
+            .attr('class', () => `histogram-hover-highlight`)
             .attr('x', (d) => xScale(d.x0))
             .attr('width', (d) => xScale(d.x1) - xScale(d.x0))
             .attr('y', (d) => yScale(d.yMax))
@@ -795,64 +866,79 @@ export default function makeHistogram(): Histogram {
             .style('stroke-width', 1.5)
             .style('opacity', d => hoverOpacity(d))
 
-        // Refresh the ranges.
+        // Refresh the shaded regions.
+        const activeShader = shaders && renderShader ? shaders[renderShader] : null
+
         svg.select('defs')
-            .selectAll('linearGradient')
-            .data(ranges)
-            .join(
-              (enter) => {
-                const gradient = enter.append('linearGradient')
-                    .attr('id', (d, i) => `histogram-range-gradient-${i}`) // TODO Include a UUID for this chart.
-                    .attr('gradientTransform', 'rotate(45)')
-                gradient.append('stop')
-                    .attr('offset', '0')
-                    .attr('stop-color', (d) => d.color || DEFAULT_SERIES_COLOR)
-                    .attr('stop-opacity', '0.15')
-                gradient.append('stop')
-                    .attr('offset', '100%')
-                    .attr('stop-color', (d) => d.color || DEFAULT_SERIES_COLOR)
-                    .attr('stop-opacity', '0.05')
-                return gradient
-              }
-            )
-        const rangeG = svg.select('g.histogram-ranges')
-            .selectAll('g.histogram-range')
-            .data(chartHasContent ? ranges : [])
-            .join(
-              (enter) => {
-                const g = enter.append('g')
-                g.append('polygon')
-                g.append('text')
-                return g
-              },
-              (update) => update,
-              (exit) => exit.remove()
-            )
-        rangeG.attr('class', 'histogram-range')
-            .style('fill', (d, i) => `url(#histogram-range-gradient-${i})`)
-        rangeG.select('polygon')
-            .attr('points', (d) => rangePolygon(d, yMax).map(([x, y]) => `${xScale(x)},${yScale(y)}`).join(' '))
-        rangeG.select('text')
-            .attr('class', 'histogram-range-title')
-            .style('fill', (d) => d.color || '#000000')
+          .selectAll('linearGradient')
+          .remove()
+
+        // Select the active shader elements.
+        const shaderG = svg.select('g.histogram-shaders')
+          .selectAll('g.histogram-shader')
+          .data(chartHasContent && activeShader ? activeShader : [])
+          .join(
+            (enter) => {
+              const g = enter.append('g')
+              g.append('polygon')
+              g.append('text')
+              return g
+            },
+            (update) => update,
+            (exit) => exit.remove()
+        )
+
+        if (activeShader) {
+          // Add the gradients for the active shader.
+          svg.select('defs')
+          .selectAll('linearGradient')
+          .data(activeShader)
+          .join(
+            (enter) => {
+              const gradient = enter.append('linearGradient')
+                  .attr('id', (d) => {d.gradientUUID = uuidv4(); return `histogram-gradient-${d.gradientUUID}`})
+                  .attr('gradientTransform', 'rotate(45)')
+              gradient.append('stop')
+                  .attr('offset', '0')
+                  .attr('stop-color', (d) => d.color || DEFAULT_SERIES_COLOR)
+                  .attr('stop-opacity', (d) => d.startOpacity || '0.15')
+              gradient.append('stop')
+                  .attr('offset', '100%')
+                  .attr('stop-color', (d) => d.color || DEFAULT_SERIES_COLOR)
+                  .attr('stop-opacity', (d) => d.stopOpacity || '0.05')
+
+              return gradient
+            }
+          )
+
+          // Draw each shader region according to the shader definition.
+          shaderG.attr('class', 'histogram-shader')
+            .style('fill', (d) => `url(#histogram-gradient-${d.gradientUUID})`)
+          shaderG.select('polygon')
+            .attr('points', (d) => shaderPolygon(d, yMax).map(([x, y]) => `${xScale(x)},${yScale(y)}`).join(' '))
+          shaderG.select('text')
+            .attr('class', 'histogram-shader-title')
+            .style('fill', (d) => d.thresholdColor || '#000000')
             .attr('x', (d) => {
-              const span = visibleRange(d)
-              return xScale((span.min + span.max) / 2)
+              const span = visibleShaderRegion(d)
+              return xScale(alignTextInRegion(span.min, span.max, d.align)) + padTextInElement(shaderG, d.align, d.title)
             })
             .attr('y', 15)
             .style('text-anchor', 'middle')
             .style('visibility', (d) => d.title ? 'visible' : 'hidden')
             .text((d) => d.title)
-        const rangeThresholds = ranges.map((range) => [
-          ...(range.min != null && range.min > xScale.domain()[0]) ? [{x: range.min, range}] : [],
-          ...(range.max != null && range.max < xScale.domain()[1]) ? [{x: range.max, range}] : [],
-        ]).flat()
-        svg.select('g.histogram-range-thresholds')
-            .selectAll('path.histogram-range-threshold')
-            .data(chartHasContent ? rangeThresholds : [])
+
+          // Draw the shader thresholds.
+          const shaderThresholds = activeShader.map((region) => [
+            ...(region.min != null && region.min > xScale.domain()[0]) ? [{x: region.min, region}] : [],
+            ...(region.max != null && region.max < xScale.domain()[1]) ? [{x: region.max, region}] : [],
+          ]).flat()
+          svg.select('g.histogram-shader-thresholds')
+            .selectAll('path.histogram-shader-threshold')
+            .data(chartHasContent ? shaderThresholds : [])
             .join('path')
-            .attr('class', 'histogram-range-threshold')
-            .attr('stroke', (d) => d.range.color || DEFAULT_RANGE_COLOR)
+            .attr('class', 'histogram-shader-threshold')
+            .attr('stroke', (d) => d.region.thresholdColor || DEFAULT_SHADER_COLOR)
             .attr('stroke-dasharray', '4 4')
             .attr('stroke-width', 1.5)
             .attr('d', (d) => {
@@ -861,8 +947,14 @@ export default function makeHistogram(): Histogram {
               if (intersectedBinIndex != null && intersectedBinIndex > 0 && d.x == bins[intersectedBinIndex].x0) {
                 yMin = Math.max(yMin, bins[intersectedBinIndex - 1].x1)
               }
-              return path([[d.x, yMin], [d.x, yMax]])
+              return path([[d.x, 0], [d.x, yMax]])
             })
+        } else {
+          shaderG.remove()
+          svg.select('g.histogram-shader-thresholds')
+            .selectAll('path.histogram-shader-threshold')
+            .remove()
+        }
       }
 
       updateSelectionAfterRefresh()
@@ -936,11 +1028,27 @@ export default function makeHistogram(): Histogram {
       return chart
     },
 
-    ranges: (value?: HistogramRange[]) => {
+    shaders: (value?: HistogramShaderRegions | null) => {
+      if (value === undefined) {
+        return shaders
+      }
+      shaders = value
+      return chart
+    },
+
+    renderShader: (value?: string | null) => {
       if (value === undefined) {
-        return ranges
+        return renderShader
       }
-      ranges = value
+      // Don't allow rendering of a shader which does not have a shader definition.
+      if (!shaders && value) {
+        return renderShader
+      }
+      else if (shaders && value && !(value in shaders)) {
+        return renderShader
+      }
+
+      renderShader = value
       return chart
     },
 
diff --git a/src/lib/item-types.js b/src/lib/item-types.js
index c19d339c..15a1d930 100644
--- a/src/lib/item-types.js
+++ b/src/lib/item-types.js
@@ -241,6 +241,11 @@ const itemTypes = {
     restCollectionName: 'score-sets',
     primaryKey: 'urn'
   },
+  'collection': {
+    name: 'collection',
+    restCollectionName: 'collections',
+    primaryKey: 'urn'
+  },
   'target-gene-search': {
     name: 'target-gene', // TODO Redundant, change this structure
     restCollectionName: 'target-genes',
diff --git a/src/lib/ranges.ts b/src/lib/ranges.ts
new file mode 100644
index 00000000..db0f1727
--- /dev/null
+++ b/src/lib/ranges.ts
@@ -0,0 +1,40 @@
+import { HistogramShader } from "@/lib/histogram"
+
+export const NORMAL_RANGE_DEFAULT_COLOR = "#4444ff"
+export const ABNORMAL_RANGE_DEFAULT_COLOR = "#ff4444"
+
+export interface ScoreSetRanges {
+    wtScore: number
+    ranges: Array<ScoreSetRange>
+}
+
+export interface ScoreSetRange {
+    label: string,
+    description: string | undefined,
+    classification: "normal" | "abnormal"
+    range: Array<number>
+}
+
+export function prepareRangesForHistogram(scoreRanges: ScoreSetRanges): HistogramShader[] {
+    const preparedRanges: HistogramShader[] = []
+
+    scoreRanges.ranges.forEach((range) => {
+        const rangeIsNormal = range.classification === "normal" ? true : false
+
+        const scoreRange: HistogramShader = {
+            min: range.range[0],
+            max: range.range[1],
+            title: range.label,
+            align: "center",
+            color: rangeIsNormal ? NORMAL_RANGE_DEFAULT_COLOR : ABNORMAL_RANGE_DEFAULT_COLOR,
+            thresholdColor: rangeIsNormal ? NORMAL_RANGE_DEFAULT_COLOR : ABNORMAL_RANGE_DEFAULT_COLOR,
+            startOpacity: 0.15,
+            stopOpacity: 0.05,
+            gradientUUID: undefined
+        }
+
+        preparedRanges.push(scoreRange)
+    })
+
+    return preparedRanges
+}
diff --git a/src/router/index.js b/src/router/index.js
index f833875b..efa58ef0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,7 @@
 import {createRouter, createWebHistory} from 'vue-router'
 
+import CollectionView from '@/components/screens/CollectionView'
+import CollectionsView from '@/components/screens/CollectionsView'
 import DashboardView from '@/components/screens/DashboardView'
 import DocumentationView from '@/components/screens/DocumentationView'
 import ExperimentCreator from '@/components/screens/ExperimentCreator'
@@ -102,6 +104,15 @@ const routes = [{
   props: (route) => ({
     itemId: route.params.urn,
   })
+}, {
+  path: '/collections',
+  name: 'collections',
+  component: CollectionsView
+}, {
+  path: '/collections/:urn',
+  name: 'collection',
+  component: CollectionView,
+  props: (route) => ({itemId: route.params.urn})
 }, ...config.CLINICAL_FEATURES_ENABLED ? [{
   path: '/variants/:urn',
   name: 'variant',