diff --git a/src/App.vue b/src/App.vue
index bb02f794..c87ce2e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,15 @@
 <template>
   <div id="app">
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
     Click arrow to open sidebar
-    <SideBar class="side-bar" ref="sideBar" :visible="sideBarVisibility"></SideBar>
+    <SideBar class="side-bar" ref="sideBar" :apiLocation=apiLocation :visible="sideBarVisibility"></SideBar>
   </div>
 </template>
 
 <script>
-import "element-ui/lib/theme-chalk/index.css";
 
 // optionally import default styles
-import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 import SideBar from './components/SideBar'
 
 export default {
@@ -19,7 +19,8 @@ export default {
   },
   data: function(){
     return {
-      sideBarVisibility: true
+      sideBarVisibility: true,
+      apiLocation: process.env.VUE_APP_API_LOCATION
     }
   },
 }
@@ -27,14 +28,12 @@ export default {
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  height:90%;
-  width: 90%;
+  height:100%;
+  width: 100%;
   position:absolute;
+  font-family: "Asap",sans-serif;
+}
+body {
+  margin:0px;
 }
-
 </style>
diff --git a/src/components/DatasetCard.vue b/src/components/DatasetCard.vue
index 9bab9cef..a470b5dc 100644
--- a/src/components/DatasetCard.vue
+++ b/src/components/DatasetCard.vue
@@ -1,21 +1,28 @@
 <template>
   <div class="dataset-card-container"  ref="container">
     <div v-bind:class=" expanded ? 'dataset-card-expanded' : 'dataset-card'"  ref="card">
-      <div class="seperator-path"></div>
+      <div v-if="entry.id !== 0" class="seperator-path"></div>
       <div class="card" >
-        <span class="card-left" >
+        <span class="card-left">
+          <img svg-inline class="banner-img" :src="thumbnail" @click="openDataset"/>
+        </span>
+        <div class="card-right" >
           <div class="title" @click="cardClicked">{{entry.description}}</div>
           <div class="details">{{entry.contributors[0].name}}; {{entry.contributors[1].name}}</div>
           <div class="details">{{entry.numberSamples}} sample(s)</div>
-          <div class="details"><template v-for="(sex, i) in entry.sexes"><template v-if="i !== 0">, </template>{{sex}}</template></div>
-          <div v-if="entry.age" class="details">{{entry.age}}</div>
-          <div class="details">Last updated: {{entry.updated}}</div>
-          <p v-if="(cardOverflow && !expanded)" class="read-more"><el-button @click="expand" class="button">Read more...</el-button></p>
-        </span>
-        <span class="card-right">
-          <img class="banner-img" :src="thumbnail" @click="cardClicked"/>
-        </span>
+          <div>
+            <el-button @click="openDataset" size="mini" class="button" icon="el-icon-coin">View dataset</el-button>
+          </div>
+          <div>
+            <el-button v-if="entry.scaffold" @click="openScaffold" size="mini" class="button" icon="el-icon-view">View scaffold</el-button>
+          </div>
+          <div>
+            <el-button v-if="hasCSVFile"  @click="openPlot" size="mini" class="button" icon="el-icon-view">View plot</el-button>
+          </div>
+        </div>
+
       </div>
+        <p v-if="(cardOverflow && !expanded)" class="read-more"><el-button @click="expand" class="read-more-button">Read more...</el-button></p>
     </div>
   </div>
 </template>
@@ -24,57 +31,115 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Link, Icon, Card, Button, Select, Input } from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
+import { Button, Icon } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
+import EventBus from "./EventBus"
+import scaffoldMetaMap from './scaffold-meta-map';
 
 locale.use(lang);
-Vue.use(Link);
-Vue.use(Icon);
-Vue.use(Card);
 Vue.use(Button);
-Vue.use(Select);
-Vue.use(Input);
-
-
+Vue.use(Icon);
 
-var api_location = process.env.VUE_APP_API_LOCATION + "banner/";
+var capitalise = function(string){
+  return string.replace(/\b\w/g, v => v.toUpperCase())
+}
 
 export default {
-  name: "SideBar",
+  name: "DatasetCard",
   props: {
     /**
      * Object containing information for
      * the required viewing.
      */
     entry: Object,
+    apiLocation: {
+      type: String,
+      default: ""
+    },
   },
   data: function () {
     return {
-      thumbnail: require('../../assets/missing-image.svg'),
-      dataLocation: this.entry.url,
+      thumbnail: require('@/../assets/missing-image.svg'),
+      dataLocation: this.entry.doi,
+      discoverId: undefined,
       cardOverflow: false,
       expanded: false
     };
   },
+  computed: {
+    hasCSVFile: function(){
+      return ( this.entry.csvFiles && this.entry.csvFiles.length !== 0 )
+    }
+  },
   methods: {
     cardClicked: function(){
+      if(this.entry.scaffold){
+        this.openScaffold()
+      }else{
+        this.openDataset()
+      }
+    },
+    openScaffold: function(){
+      let action = {
+          label: capitalise(this.entry.organs[0]),
+          resource: this.getScaffoldPath(this.discoverId, this.version, this.entry.scaffolds[0].dataset.path),
+          title: "View 3D scaffold",
+          type: "Scaffold",
+          discoverId: this.discoverId,
+        }
+        EventBus.$emit("PopoverActionClick", action)
+    },
+    openPlot: function(){
+      let action = {
+          label: capitalise(this.entry.organs[0]),
+          resource: this.getFileFromPath(this.discoverId, this.version, this.entry.csvFiles[0].dataset.path),
+          title: "View plot",
+          type: "Plot",
+          discoverId: this.discoverId,
+        }
+        EventBus.$emit("PopoverActionClick", action)
+    },
+    openDataset: function(){
       window.open(this.dataLocation,'_blank');
     },
+    getScaffoldPath: function(discoverId, version, scaffoldPath){
+      let id = discoverId
+      let path = `${this.apiLocation}s3-resource/${id}/${version}/files/${scaffoldPath}/${scaffoldMetaMap[id].meta_file}`
+      return path
+    },
+    getFileFromPath: function(discoverId, version, path){
+      return  `${this.apiLocation}s3-resource/${discoverId}/${version}/files/${path}`
+    },
     isOverflown: function(el){
-      console.log(el.clientHeight , el.scrollHeight)
       return el.clientHeight < el.scrollHeight
     },
     expand: function() {
       this.expanded = true
     },
+    splitDOI: function(doi){
+      return [doi.split('/')[doi.split('/').length-2], doi.split('/')[doi.split('/').length-1]]
+    },
     getBanner: function () {
-      fetch(api_location + this.entry.datasetId)
-        .then((response) => response.json())
+      let doi = this.splitDOI(this.entry.doi)
+      fetch(`https://api.blackfynn.io/discover/datasets/doi/${doi[0]}/${doi[1]}`)
+        .then((response) =>{
+          if (!response.ok){
+            throw Error(response.statusText)
+          } else {
+             return response.json()
+          }
+        })
         .then((data) => {
           this.thumbnail = data.banner
-          this.dataLocation = 'https://sparc.science/datasets/' + data.id
+          this.discoverId = data.id
+          this.version = data.version
+          this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
+        })
+        .catch(() => {
+          //set defaults if we hit an error
+          this.thumbnail = require('@/../assets/missing-image.svg')
+          this.discoverId = undefined
         });
     },
   },
@@ -84,37 +149,31 @@ export default {
   },
   updated: function () {
   },
-  watch: { 
+  watch: {
     'entry.description': function() { // watch it
-      this.getBanner()
+      this.cardOverflow = false
+      this.expanded = false
       this.cardOverflow = this.isOverflown(this.$refs.card)
+      this.getBanner()
     }
-  }
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .dataset-card {
-  height: 230px;
-  padding-left: 16px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.dataset-card-expanded {
   padding-left: 16px;
-  cursor: pointer;
   position: relative;
 }
 .seperator-path {
   width: 486px;
   height: 0px;
-  border: solid 1px var(--pale-grey);
-  background-color: var(--pale-grey);
+  border: solid 1px #e4e7ed;
+  background-color: #e4e7ed;
 }
 .title {
-  padding-bottom: 20px;
+  padding-bottom: 5px;
   font-family: Asap;
   font-size: 14px;
   font-weight: bold;
@@ -123,29 +182,37 @@ export default {
   line-height: 1.5;
   letter-spacing: 1.05px;
   color: #484848;
+  cursor: pointer;
 }
 .card {
-  padding-top: 22px;
+  padding-top: 18px;
   position: relative;
   display: flex;
 }
 
 .card-left{
+  flex: 1
+}
+
+.card-right {
   flex: 1.3;
+  padding-left: 6px;
 }
 
-.dataset-card .read-more { 
-  position: absolute; 
-  bottom: 0; 
+.dataset-card .read-more {
+  position: absolute;
+  z-index: 9;
+  bottom: 0;
   left: 0;
-  width: 100%; 
-  text-align: left; 
-  margin: 0; padding: 30px 0; 
+  width: 100%;
+  height: 20px;
+  margin: 0; padding: 20px 66px;
   /* "transparent" only works here because == rgba(0,0,0,0) */
   background-image: linear-gradient(to bottom, transparent, white);
+  pointer-events: none;
 }
 
-.read-more .button{
+.read-more-button{
   width: 85px;
   height: 20px;
   font-family: Asap;
@@ -155,19 +222,34 @@ export default {
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  color: var(--vibrant-purple);
+  color: #8300bf;
   padding: 0px;
+  pointer-events: all;
+  cursor: pointer;
 }
 
-.card-right {
-  flex: 1;
-  padding-left: 6px;
+.button{
+  z-index: 10;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  background-color: #8300bf;
+  border: #8300bf;
+  color: white;
+  cursor: pointer;
+  margin-top: 8px;
 }
+
 .banner-img {
   width: 128px;
   height: 128px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
   background-color: #ffffff;
+  cursor: pointer;
 }
 .details{
   font-family: Asap;
@@ -180,3 +262,4 @@ export default {
   color: #484848;
 }
 </style>
+
diff --git a/src/components/SearchFilters.vue b/src/components/SearchFilters.vue
index 551be07a..4800c76b 100644
--- a/src/components/SearchFilters.vue
+++ b/src/components/SearchFilters.vue
@@ -1,31 +1,32 @@
 <template>
   <div class="filters">
+    <SvgSpriteColor/>
     <transition name="el-zoom-in-top">
-      <div v-show="showFilters" class="search-filters transition-box">
+      <span v-show="showFilters" class="search-filters transition-box">
           <el-cascader
           class="cascader"
-          placeholder="Filter"
-      :options="options"
-          :props="propss"
+          v-model="cascadeSelected"
+          placeholder=""
+          :collapse-tags="true"
+          :options="options"
+          :props="props"
           @change="cascadeEvent($event)"
-          :show-all-levels="false">
+          :show-all-levels="false"
+          :append-to-body="false">
         </el-cascader>
-      </div>
+        <div v-if="cascadeSelected.length === 0" class="filter-default-value"> 
+          <svg-icon icon="noun-filter" class="filter-icon-inside" />
+          Apply Filters
+        </div>
+      </span>
     </transition>
 
-    <div class="filter-collapsed" @click="showFilters = !showFilters">
-      <img class="filter-icon" :src="require('../../assets/noun-filter.svg')"/>
-      Filter
-     </div>
-    
-    <span
+      <el-select class="number-shown-select"  v-model="numberShown" placeholder="10" @change="numberShownChanged($event)">
+        <el-option v-for="item in numberDatasetsShown" :key="item" :label="item" :value="item"></el-option>
+      </el-select>
+      <span
         class="dataset-results-feedback"
-      >{{entry.numberOfHits }} Datasets for '{{entry.lastSearch}}' | Showing</span>
-      <span v-if="entry.lastSearch  !== ''">
-        <el-select class="number-shown-select" v-model="numberShown" placeholder="10" @change="numberShownChanged($event)">
-          <el-option v-for="item in numberDatasetsShown" :key="item" :label="item" :value="item"></el-option>
-        </el-select>
-      </span>
+      >{{this.numberOfResultsText}}</span>
   </div>
 </template>
 
@@ -33,96 +34,96 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Link, Icon, Card, Button, Select, Cascader } from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
+import { Cascader, Option, Select } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
+import EventBus from './EventBus';
+import {SvgIcon, SvgSpriteColor} from '@abi-software/svg-sprite';
+Vue.component('svg-icon', SvgIcon);
 
 locale.use(lang);
-Vue.use(Link);
-Vue.use(Icon);
-Vue.use(Card);
-Vue.use(Button);
+Vue.use(Cascader);
+Vue.use(Option);
 Vue.use(Select);
-Vue.use(Cascader)
 
-const api_location = process.env.VUE_APP_API_LOCATION;
-const facet_endpoint = "get-facets/";
+var capitalise = function(string){
+  return string.replace(/\b\w/g, v => v.toUpperCase())
+}
 
 export default {
   name: "SearchFilters",
-  components: {},
+  components: {
+    SvgSpriteColor,
+  },
   props: {
     /**
      * Object containing information for
      * the required viewing.
      */
     entry: Object,
+    apiLocation: {
+      type: String,
+      default: ""
+    },
   },
   data: function () {
     return {
-      showFilters: false,
-      speciesSelected: [],
-      organSelected: [],
-      regionSelected: [],
-      genderSelected: [],
+      showFilters: true,
+      cascadeSelected: [],
       numberShown: 10,
-      species: ["All species", "Mouse", "Pig", "Human"],
-      organ: [
-        "All organs",
-        "Heart",
-        "Lung",
-        "Stomach",
-        "Urinary tract",
-        "Pancreas",
-        "Colon",
-      ],
-      regions: [
-        "All regions",
-        "Left ventricle",
-        "Right ventricle",
-        "ICN",
-        "Left atrium",
-      ],
-      facets: ['species', 'gender'],
-      gender: ["All sex", "Male", "Female", "Uknown"],
-      numberDatasetsShown: ["10", "20"],
-      defaultSelect: "10",
-      propss: { multiple: true },
+      filters: [],
+      facets: ['Species', 'Gender', 'Genotype'],
+      numberDatasetsShown: ["10", "20", "50"],
+      props: { multiple: true },
       options: [{
         value: 1,
         label: 'Species',
         children: [{
         }]
-      }]
+      }],
     };
   },
+  computed: {
+    numberOfResultsText: function(){
+      return `${this.entry.numberOfHits} results | Showing`
+    }
+  },
   methods: {
     populateCascader: function () {
-      var value = 1
-      this.options = []
-      this.facets.forEach((term)=>{
-        this.getFacet(term).then((facets)=>{
+      return new Promise( (resolve) => {
+        var value = 1
+        this.options = []
+        for(let i in this.facets){
           this.options.push({
-            value: value,
-            label: term,
-            children: []
-          })
-          value++;
-          facets.forEach((facet)=>{
-            this.options[this.options.length-1].children.push({
               value: value,
-              label: facet, 
+              label: this.facets[i],
+              children: []
             })
             value++;
+        }
+        var promiseList = []
+        for(let i in this.facets){
+          // Create a promise for each facet request
+          promiseList.push(this.getFacet(this.facets[i]).then((labels)=>{
+            // Populate children of each facet with scicrunch's facets
+            for(let j in labels){
+              this.options[i].children.push({
+                value: value,
+                label: capitalise(labels[j]), // Capitalisation is to match design specs
+              })
+              value++;
+            }
           })
-        })
+          )
+        }
+        Promise.allSettled(promiseList).then(()=>{resolve()})
       })
     },
-    getFacet: function (facet) {
+    getFacet: function (facetLabel) {
       return new Promise((resolve) => {
-        var facets = [`All ${facet}`];
-        this.callSciCrunch(api_location, facet_endpoint, facet).then(
+        var facets = [`All ${facetLabel}`];
+        let facet = facetLabel.toLowerCase()
+        this.callSciCrunch(this.apiLocation, this.facetEndpoint, facet).then(
           (facet_terms) => {
             facet_terms.forEach((element) => {
               facets.push(element["key"]);
@@ -132,83 +133,116 @@ export default {
         );
       })
     },
-    getSpecies: function () {
-      var species = ["All species"];
-      this.callSciCrunch(api_location, facet_endpoint, "species").then(
-        (species_terms) => {
-          species_terms.forEach((element) => {
-            species.push(element["key"]);
-          });
-          this.species = [...new Set(species)];
+    // switchFacetToRequest is used to set 'All' to lowercase. Api will not be case sensitive soon and this can be removed
+    switchFacetToRequest: function(facet){
+      if (!facet.includes('All')){
+        return facet.toLowerCase()
+      } else {
+        return facet
+      }
+    },
+    // switchTermToRequest is used to remove the count for sending a request to scicrunch
+    switchTermToRequest: function(term){
+      return term.split(' ')[0].toLowerCase()
+    },
+    updateLabels: function(counter){
+      for( let i in counter){
+        if( counter[i] > 0){
+          this.options[i].label = this.options[i].label.split(' ')[0] + ` (${counter[i]})`
+        } else {
+          this.options[i].label = this.options[i].label.split(' ')[0]
         }
-      );
+      }
     },
     cascadeEvent: function(event){
-      var output = { facet: undefined, term: undefined }
-      let id = event[0][1]
+      // If filters have been cleared, send an empty object
+      if(event[0] === undefined){
+       this.$emit("filterResults", {});
+       this.updateLabels([0,0,0]) // reset label counts
+       return
+      }
+      this.filters = []
+      // Label counts is used to show user how many are at each nested level.
+      //    i.e.: if 3 species are selected it will show 'Species (3)' in the cascader
+      let labelCounts = [0,0,0]
+      // event[0][1] contains the index of the latest addition
       for(let i in this.options){
         for(let j in this.options[i].children){
-          if(this.options[i].children[j].value == id){
-            output.facet = this.options[i].children[j].label
-            output.term = this.options[i].label
+          for(let k in event){
+            if(event[k] !== undefined){
+              var id = event[k][1]
+              if(this.options[i].children[j].value == id){
+                let output = {}
+                output.facet = this.switchFacetToRequest(this.options[i].children[j].label)
+                output.term = this.switchTermToRequest(this.options[i].label)
+                this.filters.push(output)
+                labelCounts[i] += 1
+              }
+            }
           }
         }
       }
-      this.$emit("filterResults", output);
-      this.showFilters = false;
-
-    },
-    speciesFilterSearch: function (event) {
-      this.$emit("filterResults", { facet: event, term: "species" });
-    },
-    genderFilterSearch: function (event) {
-      this.$emit("filterResults", { facet: event, term: "gender" });
+      this.updateLabels(labelCounts)
+      this.$emit("filterResults", this.filters);
     },
     numberShownChanged: function (event){
       this.$emit("numberPerPage", event);
     },
-    getGenders: function () {
-      var gender = ["All sex"];
-      this.callSciCrunch(api_location, facet_endpoint, "gender").then(
-        (gender_terms) => {
-          gender_terms.forEach((element) => {
-            gender.push(element["key"]);
-          });
-          this.gender = [...new Set(gender)];
-        }
-      );
-    },
-    callSciCrunch: function (api_location, endpoint, term) {
+    callSciCrunch: function (apiLocation, endpoint, term) {
       return new Promise((resolve) => {
-        fetch(api_location + endpoint + term)
+        fetch(apiLocation + endpoint + term)
           .then((response) => response.json())
           .then((data) => {
             resolve(data);
           });
       });
     },
+    setCascader: function(tagName){
+      let labelCounts = [0,0,0]
+      for(let i in this.options){
+        for(let j in this.options[i].children){
+          if(tagName === this.options[i].children[j].label){
+            this.cascadeSelected = [[Number(i)+1,this.options[i].children[j].value]]
+            labelCounts[i] += 1
+          }
+        }
+      }
+      this.updateLabels(labelCounts)
+    }
+  },
+  created: function() {
+    //Create non-reactive local variables
+    this.facetEndpoint = "get-facets/";
   },
   mounted: function () {
-    this.populateCascader();
-    this.getSpecies();
-    this.getGenders();
+    this.populateCascader().then(()=>{
+      this.setCascader(this.entry.filterFacet);
+    })
+    EventBus.$on('filterUiUpdate', (payLoad) => {
+      this.setCascader(payLoad);
+    })
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.filters{
-    justify-content: center;
-    align-items: center;
+
+.filter-default-value{
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-top: 10px;
+  padding-left: 16px;
 }
 
-.filter-icon{
-  width: 40px;
-  height: 24px;
+.filter-icon-inside{
+  width: 12px!important;
+  height: 12px!important;
   color: #292b66;
-  transform: scale(1.5);
-  bottom: -10px;
+  transform: scale(2)!important;
+  margin-bottom: 0px!important;
 }
 
 .cascader {
@@ -219,69 +253,58 @@ export default {
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  color: #292b66; 
+  color: #292b66;
   text-align: center;
+  padding-bottom: 6px;
+}
 
+.cascader >>> .el-scrollbar__wrap{
+  overflow-x: hidden;
+  margin-bottom: 2px !important;
 }
 
-.dataset-results-feedback{
-  text-align: left;
+.cascader >>> li[aria-owns*="cascader"] > .el-checkbox {
+  display: none;
 }
 
-.filter-collapsed {
+.dataset-results-feedback{
+  float: right;
+  text-align: right;
+  color: rgb(48, 49, 51);
   font-family: Asap;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: right;
-  color: #292b66;
-  width: 100px;
-  float: right;
-  cursor: pointer;
+  padding-top: 8px;
 }
 
-.filter-select {
-  width: 120px;
-  height: 40px;
-  margin-right: 16px;
-  border-radius: 4px;
-  border: solid 1px #8300bf;
-  background-color: var(--white);
-  font-weight: 500;
-  color: #8300bf;
+.search-filters {
+  position: relative;
+  float:left;
+  padding-right: 15px;
+  padding-bottom: 12px;
 }
 
-.filters-row-2 {
-  padding-top: 16px;
+.number-shown-select{
+  float: right;
 }
 
-.filter-select >>> .el-input__inner {
-  color: #8300bf;
-  padding-top: 0.25em;
+.number-shown-select >>> .el-input__inner{
+  width: 68px;
+  height: 40px;
+  color: rgb(48, 49, 51);
 }
 
-.filter-select >>> .el-select-dropdown__item.selected {
+.search-filters >>> .el-cascader-node.is-active{
   color: #8300bf;
-  font-weight: normal;
-  font-family: Asap !important;
 }
 
-.search-filters {
-  text-align: left;
-        -moz-transition: height 0.5s;
-    -ms-transition: height 0.5s;
-    -o-transition: height 0.5s;
-    -webkit-transition: height 0.5s;
-    transition: height 0.5s;
+.search-filters >>> .el-cascader-node.in-active-path{
+  color: #8300bf;
 }
 
-.number-shown-select >>> .el-input__inner{
-  width: 68px;
-  height: 32px;
-  color: #8300bf;
+.search-filters >>> .el-checkbox__input.is-checked > .el-checkbox__inner {
+  background-color: #8300bf;
+  border-color: #8300bf;
 }
 
 </style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index dd70863f..22d01e6a 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -3,76 +3,58 @@
     <div v-if="!drawerOpen" @click="close" class="open-tab">
       <i class="el-icon-arrow-left"></i>
     </div>
+
     <el-drawer
+      custom-class="my-drawer"
       class="side-bar"
       :visible.sync="drawerOpen"
       :appendToBody="false"
-      :size="'550'"
+      :modal-append-to-body="false"
+      size=550
       :with-header="false"
       :wrapperClosable="false"
-      v-if="isDrawer"
+      :modal="false"
     >
-      <el-card class="box-card">
-        <div slot="header" class="header">
-          <el-input
-            class="search-input"
-            placeholder="Search"
-            v-model="searchInput"
-            @keyup.native="searchEvent"
-            clearable
-          ></el-input>
-          <el-button @click="searchEvent">Search</el-button>
-          <i class="el-icon-copy-document" style="float: right; padding: 3px 0" @click="dock"></i>
-        </div>
-        <SearchFilters class="filters" :entry="filterEntry" @filterResults="filterUpdate" @numberPerPage="numberPerPageUpdate"></SearchFilters>
-        <el-pagination class="pagination" hide-on-single-page small layout="prev, pager, next" :total="numberOfHits" @current-change="pageChange"></el-pagination>
-        <div class="wrapper">
-          <div class="wrapper-left">
-            <i class="el-icon-arrow-right" @click="close"></i>
+    <div>
+      <div v-if="drawerOpen" @click="close" class="close-tab">
+        <i class="el-icon-arrow-right"></i>
+      </div>
+        <el-card class="box-card">
+          <div slot="header" class="header">
+            <el-input
+              class="search-input"
+              placeholder="Search"
+              v-model="searchInput"
+              @keyup.native="searchEvent"
+              clearable
+              @clear="clearSearchClicked"
+            ></el-input>
+            <el-button class="button" @click="searchEvent">Search</el-button>
           </div>
-          <div class="wrapper-right">
-            <div class="content scrollbar"  v-loading="loadingCards">
-              <div class="card-container">
-                <span v-if="results.length > 0" class="dataset-table-title">Title</span>
-                <span v-if="results.length > 0" class="image-table-title">Image</span>
-              </div>
-              <div v-for="o in results" :key="o.id" class="step-item">
-                <DatasetCard :entry="o"></DatasetCard>
-              </div>
+          <SearchFilters class="filters" ref="filtersRef" :entry="filterEntry"
+            :apiLocation="apiLocation" @filterResults="filterUpdate" @numberPerPage="numberPerPageUpdate"></SearchFilters>
+          <div class="content scrollbar"  v-loading="loadingCards" ref="content">
+            <div class="error-feedback" v-if="results.length === 0 && !loadingCards && !sciCrunchError">
+              No results found - Please change your search / filter criteria.
             </div>
-          </div>
-        </div>
-      </el-card>
-    </el-drawer>
-    <el-card v-if="!isDrawer" class="box-card">
-        <div slot="header" class="header">
-          <el-input
-            class="search-input"
-            placeholder="Search"
-            v-model="searchInput"
-            @keyup.native="searchEvent"
-            clearable
-          ></el-input>
-          <el-button @click="searchEvent">Search</el-button>
-        </div>
-        <SearchFilters class="filters" :entry="filterEntry" @filterResults="filterUpdate" @numberPerPage="numberPerPageUpdate"></SearchFilters>
-        <el-pagination class="pagination" hide-on-single-page small layout="prev, pager, next" :total="numberOfHits" @current-change="pageChange"></el-pagination>
-        <div class="wrapper">
-          <div class="wrapper-left">
-          </div>
-          <div class="wrapper-right">
-            <div class="content scrollbar"  v-loading="loadingCards">
-              <div class="card-container">
-                <span v-if="results.length > 0" class="dataset-table-title">Title</span>
-                <span v-if="results.length > 0" class="image-table-title">Image</span>
-              </div>
-              <div v-for="o in results" :key="o.id" class="step-item">
-                <DatasetCard :entry="o"></DatasetCard>
-              </div>
+            <div class="error-feedback" v-if="sciCrunchError">{{sciCrunchError}}</div>
+            <div v-for="o in results" :key="o.id" class="step-item">
+              <DatasetCard :entry="o" :apiLocation="apiLocation"></DatasetCard>
             </div>
+            <el-pagination
+              class="pagination"
+              :current-page.sync="page"
+              hide-on-single-page
+              large
+              layout="prev, pager, next"
+              :page-size="numberPerPage"
+              :total="numberOfHits"
+              @current-change="pageChange">
+            </el-pagination>
           </div>
-        </div>
-      </el-card>
+        </el-card>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -81,17 +63,14 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import {
-  Link,
-  Icon,
-  Card,
   Button,
-  Select,
-  Input,
+  Card,
   Drawer,
-  Pagination,
+  Icon,
+  Input,
   Loading,
+  Pagination,
 } from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import SearchFilters from "./SearchFilters";
@@ -99,17 +78,27 @@ import DatasetCard from "./DatasetCard";
 import EventBus from './EventBus';
 
 locale.use(lang);
-Vue.use(Link);
-Vue.use(Icon);
-Vue.use(Card);
 Vue.use(Button);
-Vue.use(Select);
-Vue.use(Input);
+Vue.use(Card);
 Vue.use(Drawer);
+Vue.use(Icon);
+Vue.use(Input);
+Vue.use(Loading);
 Vue.use(Pagination);
-Vue.use(Loading)
 
-var api_location = process.env.VUE_APP_API_LOCATION + "filter-search/";
+// handleErrors: A custom fetch error handler to recieve messages from the server
+//    even when an error is found
+var handleErrors = async function(response) {
+    if (!response.ok) {
+      let parse = await response.json()
+      if (parse){
+        throw new Error(parse.message)
+      } else {
+        throw new Error(response)
+      }
+    }
+  return response;
+}
 
 var initial_state = {
       searchInput: "",
@@ -118,10 +107,14 @@ var initial_state = {
       drawerOpen: false,
       numberOfHits: 0,
       filter:{},
+      filterFacet: undefined,
       loadingCards: false,
       numberPerPage: 10,
       page: 1,
-      start: 0
+      pageModel: 1,
+      start: 0,
+      hasSearched: false,
+      sciCrunchError: false
 }
 
 export default {
@@ -139,56 +132,60 @@ export default {
     entry: {
       type: Object,
       default: () => (initial_state)
-    }
+    },
+    apiLocation: {
+      type: String,
+      default: ""
+    },
   },
   data: function () {
-    return {...this.entry}
+    return {
+      ...this.entry,
+    }
   },
   computed: {
+    // This computed property populates filter data's entry object with $data from this sidebar
     filterEntry: function () {
       return {
         results: this.results,
         lastSearch: this.lastSearch,
         numberOfHits: this.numberOfHits,
+        filterFacet: this.filterFacet
       };
     },
   },
-  watch: {
-    search: function (val) {
-      this.searchInput = val;
-      this.lastSearch = val;
-    },
-  },
   methods: {
     close: function () {
       this.drawerOpen = !this.drawerOpen;
-      if(this.drawerOpen){
+      if(this.drawerOpen && !this.hasSearched){
         this.openSearch(this.searchInput);
       }
     },
-    openSearch: function (search) {
+    openSearch: function (search, filter=undefined) {
       this.drawerOpen = true;
-      if (this.searchInput !== search){
-        this.searchInput = search;
-        this.searchSciCrunch(search);
+      this.searchInput = search;
+      this.resetPageNavigation()
+      this.searchSciCrunch(search, filter);
+      if (filter){
+        this.filterFacet = filter[0].facet;
+        EventBus.$emit("filterUiUpdate", filter[0].facet);
       }
     },
-    dock: function(){
-      EventBus.$emit("PopoverActionClick", {'type': 'Search', 'entry':this.$data});
-      this.drawerOpen = false;
+    clearSearchClicked: function(){
+      this.searchInput = ''
+      this.resetPageNavigation()
+      this.searchSciCrunch(this.searchInput)
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
+        this.resetPageNavigation()
         this.searchSciCrunch(this.searchInput);
       }
     },
     filterUpdate: function(filter){
-      if(filter.facet === undefined){
-        this.filter = {}
-      } else {
-        this.filter = filter
-      }
-      this.searchSciCrunch(this.searchInput)
+      this.resetPageNavigation()
+      this.searchSciCrunch(this.searchInput, filter);
+      this.filter = filter
     },
     numberPerPageUpdate: function (val) {
       this.numberPerPage = val;
@@ -198,15 +195,51 @@ export default {
       this.start = (page-1) * this.numberPerPage;
       this.searchSciCrunch(this.searchInput);
     },
-    searchSciCrunch: function (search) {
+    searchSciCrunch: function (search, filter=undefined) {
       this.loadingCards = true;
-      let params = this.filter;
-      params.size = this.numberPerPage;
-      params.start = this.start;
-      this.callSciCrunch(api_location, search, params).then((result) => {
-        this.resultsProcessing(result);
-        this.loadingCards = false;
-      });
+      this.results = [];
+      this.disableCards();
+      let params = this.createParams(filter, this.start, this.numberPerPage)
+      this.callSciCrunch(this.apiLocation, this.searchEndpoint, search, params).then((result) => {
+        this.sciCrunchError = false
+        this.resultsProcessing(result)
+        this.$refs.content.style['overflow-y'] = 'scroll'
+      }).catch((result) => {
+        this.sciCrunchError = result.message
+      }).finally(() => {
+        this.loadingCards = false
+      })
+    },
+    disableCards: function(){
+      if(this.$refs.content){
+        this.$refs.content.scroll({top:0, behavior:'smooth'})
+        this.$refs.content.style['overflow-y'] = 'hidden'
+      }
+    },
+    resetPageNavigation: function(){
+      this.start = 0
+      this.page = 1
+    },
+    createParams: function(filter, start, size){
+      var params = {}
+      if (filter !== undefined){
+        params = filter
+      } else {
+         params = this.filter;
+      }
+      if(params.length > 0){
+        for(let i in params){
+          if(params[i].start){
+            params[i].start = start
+            params[i].size = size
+          }
+        }
+      } else {
+        params.start = start
+        params.size = size
+        params = [params]
+      }
+      return params
     },
     resultsProcessing: function (data) {
       this.lastSearch = this.searchInput
@@ -220,42 +253,70 @@ export default {
         this.results.push({
           description: element.name,
           contributors: element.contributors,
-          numberSamples: Array.isArray(element.sample)
-            ? element.sample.length
+          numberSamples: Array.isArray(element.samples)
+            ? element.samples.length
             : 1,
-          sexes: element.attributes
-            ? element.attributes.sex
-              ? [...new Set(element.attributes.map((v) => v.sex.value))]
+          sexes: element.samples
+            ? element.samples[0].sex
+              ? [...new Set(element.samples.map((v) => v.sex.value))]
               : undefined
             : undefined, // This processing only includes each gender once into 'sexes'
-          age: element.attributes
-            ? "ageCategory" in element.attributes[0]
-              ? element.attributes[0].ageCategory.value
+          organs: (element.organs && element.organs.length > 0)
+            ? [...new Set(element.organs.map((v) => v.name))]
+            : undefined,
+          ages: element.samples
+            ? "ageCategory" in element.samples[0]
+              ? [...new Set(element.samples.map((v) => v.ageCategory.value))]
               : undefined
             : undefined,
           updated: element.updated[0].timestamp.split("T")[0],
-          url: element.current[0].uri,
+          url: element.uri[0],
           datasetId: element.identifier,
+          csvFiles: element.csvFiles,
           id: id,
+          doi: element.doi,
+          scaffold: element.scaffolds ? true : false,
+          scaffolds: element.scaffolds ? element.scaffolds : false
         });
         id++;
       });
     },
-    callSciCrunch: function (api_location, search, params={}) {
-      return new Promise((resolve) => {
-        var endpoint = api_location;
+    createfilterParams: function(params){
+      var paramsString = ''
+      for(let param in params){
+        paramsString += (new URLSearchParams(params[param])).toString()
+        paramsString += '&'
+      }
+      paramsString = paramsString.slice(0, -1);
+      return paramsString
+    },
+    callSciCrunch: function (apiLocation, searchEndpoint, search, params={}) {
+      return new Promise((resolve, reject) => {
+        var endpoint = apiLocation + searchEndpoint;
         // Add parameters if we are sent them
         if (search !== '' && Object.entries(params).length !== 0){
-          endpoint = api_location + search + '/?' + (new URLSearchParams(params)).toString();
+          endpoint = endpoint + search + '/?' + this.createfilterParams(params)
+        } else {
+          endpoint = endpoint + '?' + this.createfilterParams(params)
         }
+
         fetch(endpoint)
+          .then(handleErrors)
           .then((response) => response.json())
-          .then((data) => {
-            resolve(data);
-          });
+          .then((data) => resolve(data))
+          .catch((data) => reject(data))
       });
     },
   },
+  created: function () {
+    //Create non-reactive local variables
+    this.searchEndpoint = "filter-search/";
+  },
+  mounted: function() {
+    EventBus.$on("PopoverActionClick", (payLoad) => {
+      this.$emit("actionClick", payLoad);
+    });
+  },
 };
 </script>
 
@@ -264,21 +325,27 @@ export default {
 .side-bar{
   position: relative;
   height: 100%;
+  pointer-events: none;
+}
+
+.side-bar >>> .el-drawer:focus{
+  outline:none;
 }
 
 .open-tab{
   width: 20px;
   height: 40px;
-  z-index: 25;
+  z-index: 8;
   position: absolute;
   top: calc(50vh - 80px);
   right: 0px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px var(--pale-grey);
+  border: solid 1px #e4e7ed;
   background-color: #F7FAFF;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
+  pointer-events: auto;
 }
 
 .el-icon-arrow-left{
@@ -287,7 +354,41 @@ export default {
   color: #292b66;
 }
 
-.box-card{
+.el-icon-arrow-right{
+  font-size: 20px;
+  padding-top: 8px;
+  color: #292b66;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.close-tab{
+  float: left;
+  flex: 1;
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  margin-top: calc(50vh - 80px);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  border-right: 0;
+  background-color: #F7FAFF;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.button{
+  background-color: #8300bf;
+  border: #8300bf;
+  color: white;
+}
+
+.box-card {
+  flex: 3;
+  height: 100%;
+  overflow: hidden;
   pointer-events: auto;
 }
 
@@ -296,90 +397,41 @@ export default {
   margin-bottom: 18px;
   text-align: left;
 }
+
 .search-input {
-  width: 298px;
+  width: 298px!important;
   height: 40px;
   padding-right: 14px;
   align-items: left;
 }
 
 .header {
-  height: 50px;
   border: solid 1px #292b66;
   background-color: #292b66;
   text-align: left;
 }
 
-.filters {
-  witdth: 518px;
-}
-
 .pagination {
-  padding-top: 10px;
-  background-color: #F7FAFF;
+  padding-bottom: 16px;
+  background-color: white;
+  text-align:center;
 }
 
 .pagination>>>button{
-  background-color: #F7FAFF !important;
+  background-color: white !important;
 }
 .pagination>>>li{
-  background-color: #F7FAFF !important;
+  background-color: white !important;
 }
 .pagination>>>li.active{
-  color: var(--vibrant-purple);
+  color: #8300bf;
 }
 
-.dataset-results-feedback {
-  width: 215px;
-  height: 16px;
+.error-feedback{
   font-family: Asap;
   font-size: 14px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: #292b66;
-}
-
-.card-container {
-  display: flex;
-  position: sticky;
-  top:0;
-  background-color: white;
-  z-index: 300;
-  padding-top: 10px;
-  height: 20px;
-  border-bottom: 1px solid var(--pale-grey);
-}
-
-.dataset-table-title {
-  flex: 1.3;
-  height: 16px;
-  font-family: Asap;
-  text-align: left !important;
-  padding-left: 16px;
-  font-size: 14px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: var(--slate-grey);
-}
-
-.image-table-title {
-  flex: 1;
-  padding-left: 16px;
-  font-family: Asap;
-  text-align: left !important;
-  font-size: 14px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: var(--slate-grey);
+  font-style: italic;
+  padding-top: 15px;
 }
 
 >>> .el-card__header {
@@ -389,47 +441,18 @@ export default {
 
 >>> .el-card__body {
   background-color: #f7faff;
-}
-
-.wrapper{
-  display: flex;
-  flex-direction: row;
-}
-
-.el-icon-copy-document{
-  cursor: pointer;
-  font-size: 32px;
-  width: 16px;
-  height: 16px;
-  color: #f9f9fa;
-  padding-right: 32px;
-}
-
-.el-icon-arrow-right{
-  cursor: pointer;
-  font-size: 20px;
-  top: 50%; 
-  position: absolute;
-  left: 0;
+  height: calc(100% - 8rem);
+  overflow-y: hidden;
 }
 
 .content {
   width: 518px;
-  height: 48rem;
+  height: calc(100vh - 20rem);
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px var(--pale-grey);
+  border: solid 1px #e4e7ed;
   background-color: #ffffff;
   overflow-y: scroll;
-}
-
-.box-card {
-  height: 100%;
-  overflow: auto;
-}
-
-.active {
-  width: 380px !important;
-  height: 380px !important;
+  scrollbar-width: thin;
 }
 
 .scrollbar::-webkit-scrollbar-track {
@@ -439,6 +462,7 @@ export default {
 
 .scrollbar::-webkit-scrollbar {
   width: 12px;
+  right: -12px;
   background-color: #f5f5f5;
 }
 
@@ -452,13 +476,9 @@ export default {
   padding-right: 10px;
 }
 
-</style>
-<style>
-.v-modal{
-  pointer-events: none;
-  opacity: 0;
+>>> .my-drawer {
+  background: rgba(0,0,0,0);
+  box-shadow: none;
 }
-.el-drawer__wrapper{
-  pointer-events: none;
-}
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 799d3f5f..ab9e0247 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,15 +1,8 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from "vue";
 import SideBar from "./SideBar.vue"
 
-const Components = {
-    SideBar
-  };
-  
-  Object.keys(Components).forEach(name => {
-    Vue.component(name, Components[name]);
-  });
-  
-  export default Components;
-  
\ No newline at end of file
+export {
+  SideBar
+};
+
+
+
diff --git a/src/components/scaffold-meta-map.js b/src/components/scaffold-meta-map.js
new file mode 100644
index 00000000..7cbe001f
--- /dev/null
+++ b/src/components/scaffold-meta-map.js
@@ -0,0 +1,5 @@
+export default {
+    77: {version:2,meta_file:'integrated_metadata.json'},
+    76: {version:2,meta_file:'mouseColon_metadata.json'},
+    32: {version:3,meta_file:'mouse-heart-071020_metadata.json'},
+}
diff --git a/vue.config.js b/vue.config.js
index fe205894..40ed2703 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1 +1,11 @@
-const webpack = require('webpack')
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = {
+  configureWebpack: config => {
+    if(process.env.NODE_ENV === 'production') {
+      //By including element-ui and all abi projects, the problem with element-ui
+      //stylesheet can be avoided.
+      config.externals =  [ nodeExternals() ];
+    }
+  },
+}