diff --git a/Gemfile b/Gemfile
index 2b3a5d1a5..724cf68ba 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,7 +5,7 @@ gem 'rails', '5.2.0'
 gem 'webpacker', '~> 4.0.2'
 
 #gem 'wcmc-components', path: "../web-components/gems/wcmc_components"
-gem 'wcmc-components', '~>0.0.3'
+gem 'wcmc-components', '~>0.0.4'
 
 
 gem 'bourbon'
diff --git a/Gemfile.lock b/Gemfile.lock
index 28698c94e..1010793be 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1365,7 +1365,7 @@ DEPENDENCIES
   turnout (~> 2.5.0)
   uglifier (~> 4.1.17)
   vuejs-rails (~> 2.3.2)
-  wcmc-components (~> 0.0.3)
+  wcmc-components (~> 0.0.4)
   webmock (~> 1.22.0)
   webpacker (~> 4.0.2)
   whenever
diff --git a/app/controllers/pame_controller.rb b/app/controllers/pame_controller.rb
index edadd5347..4dbe261a0 100644
--- a/app/controllers/pame_controller.rb
+++ b/app/controllers/pame_controller.rb
@@ -1,4 +1,32 @@
 class PameController < ApplicationController
+  DEFAULT_PARAMS =
+  {
+    requested_page: 1,
+    filters: []
+  }.to_json
+
+  # Format for this date is: Month and Year (4 digits)
+  UPDATED_AT = "July 2019".freeze
+
   def index
+    @table_attributes = PameEvaluation::TABLE_ATTRIBUTES.to_json
+    @filters = PameEvaluation.filters_to_json
+    @sources = PameEvaluation.sources_to_json
+    @json = PameEvaluation.paginate_evaluations(DEFAULT_PARAMS).to_json
+    @updated_at = UPDATED_AT
   end
-end
\ No newline at end of file
+
+  def list
+    @evaluations = PameEvaluation.paginate_evaluations(params.to_json)
+
+    render json: @evaluations
+  end
+
+  def download
+    send_data PameEvaluation.to_csv(params.to_json), {
+                type: "text/csv; charset=utf-8; header=present",
+                disposition: "attachment",
+                filename: "protectedplanet-pame.csv" }
+  end
+end
+
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 40642f7b8..162bb6f9e 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,3 +1,4 @@
+# coding: utf-8
 module ApplicationHelper
   include BemHelper
 
diff --git a/app/javascript/components/FilteredTable.vue b/app/javascript/components/FilteredTable.vue
new file mode 100644
index 000000000..3dadb321e
--- /dev/null
+++ b/app/javascript/components/FilteredTable.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="filtered-table relative">
+    <filters :filters="filters" :total-items="totalItems"></filters>
+
+    <table class="table table--head">
+      <pame-table-head :filters="attributes">
+      </pame-table-head>
+    </table>
+
+    <table class="table table--body">
+      <tbody>
+        <row v-for="item, key in items"
+          :key="key"
+          :item="item">
+        </row>
+      </tbody>
+    </table>
+
+    <pame-pagination :current-page="currentPage" :items-per-page="itemsPerPage" :total-items="totalItems" :total-pages="totalPages"></pame-pagination>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  import { eventHub } from '../vue.js'
+  import Filters from './pame-filters/Filters.vue'
+  import PameTableHead from './table/PameTableHead.vue'
+  import Row from './table/Row.vue'
+  import PamePagination from './pagination/PamePagination.vue'
+
+  export default {
+    name: 'filtered-table',
+
+    components: { Filters, PameTableHead, Row, PamePagination },
+
+    props: {
+      filters: { type: Array },
+      attributes: { type: Array },
+      json: { type: Object }
+    },
+
+    data () {
+      return {
+        currentPage: 1,
+        itemsPerPage: 0,
+        totalItems: 0,
+        totalPages: 0,
+        items: [],
+        sortDirection: 1
+      }
+    },
+
+    created () {
+      this.updateProperties(this.json)
+    },
+
+    mounted () {
+      eventHub.$on('getNewItems', this.getNewItems)
+    },
+
+    methods: {
+      updateProperties (data) {
+        this.currentPage = data.current_page
+        this.itemsPerPage = data.per_page
+        this.totalItems = data.total_entries
+        this.totalPages = data.total_pages
+        this.items = data.items
+      },
+
+      getNewItems () {
+        let data = {
+          requested_page: this.$store.state.requestedPage,
+          filters: this.$store.state.selectedFilterOptions
+        }
+
+        const csrf = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content')
+        axios.defaults.headers.common['X-CSRF-Token'] = csrf
+        axios.defaults.headers.common['Accept'] = 'application/json'
+
+        axios.post('/list', data)
+        .then(response => {
+          this.updateProperties(response.data)
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/forms/DownloadCsv.vue b/app/javascript/components/forms/DownloadCsv.vue
new file mode 100644
index 000000000..deb2a6061
--- /dev/null
+++ b/app/javascript/components/forms/DownloadCsv.vue
@@ -0,0 +1,99 @@
+<template>
+  <button
+    @click="download"
+    title="Download CSV file of filtered protected area management effectiveness evaluations"
+    class="button button--download button--green"
+    :class="{ 'button--disabled' : noResults }"
+    v-bind="{ 'disabled' : noResults }">
+    CSV
+  </button>
+</template>
+
+<script>
+  import axios from 'axios'
+
+  export default {
+    name: 'download-csv',
+
+    props: {
+      totalItems: {
+        required: true,
+        type: Number
+      }
+    },
+
+    computed: {
+      noResults () {
+        return this.totalItems == 0
+      }
+    },
+
+    methods: {
+      download () {
+        console.log('download')
+        const csrf = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content'),
+          data = this.$store.state.selectedFilterOptions,
+          config = {
+            headers: {
+              'X-CSRF-Token': csrf,
+              'Accept': 'text/csv',
+              'responseType': 'blob'
+            }
+          }
+
+        axios.post('/download', data, config)
+          .then((response) => {
+            console.log('post successful')
+            const date = new Date().toJSON().slice(0,10),
+              filename = `protectedplanet-pame-${date}.csv`
+
+            this.createBlob(filename, response.data)
+          })
+          .catch(function (error) {
+            console.log(error)
+          })
+      },
+
+      createBlob (filename, data) {
+        let blob = new Blob([data])
+        console.log('blob')
+
+        if (typeof window.navigator.msSaveBlob !== 'undefined') {
+          // IE workaround for "HTML7007: One or more blob URLs were 
+          // revoked by closing the blob for which they were created. 
+          // These URLs will no longer resolve as the data backing 
+          // the URL has been freed."
+          window.navigator.msSaveBlob(blob, filename)
+
+        } else {
+          const blobURL = window.URL.createObjectURL(blob),
+            tempLink = document.createElement('a')
+
+          // Safari thinks _blank anchor are pop ups. We only want to set _blank
+          // target if the browser does not support the HTML5 download attribute.
+          // This allows you to download files in desktop safari if pop up blocking 
+          // is enabled.
+          if (typeof tempLink.download === 'undefined') {
+              tempLink.setAttribute('target', '_blank')
+          }
+          
+          tempLink.href = blobURL
+          tempLink.setAttribute('download', filename)
+          this.simulateClick(tempLink)
+          window.URL.revokeObjectURL(blobURL)
+        }
+      },
+
+      simulateClick (element) {
+        // created because standard .click() doesn't work in Firefox
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        })
+        // If cancelled, don't dispatch our event
+        var canceled = !element.dispatchEvent(event)
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/pagination/PamePagination.vue b/app/javascript/components/pagination/PamePagination.vue
new file mode 100644
index 000000000..bd7a0bd80
--- /dev/null
+++ b/app/javascript/components/pagination/PamePagination.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="right">
+    <div v-if="haveResults">
+      <span class="bold">{{ firstItem }} - {{ lastItem }} of {{ totalItems }}</span>
+
+      <button
+        v-bind="{ 'disabled' : !previousIsActive }"
+        @click="changePage(previousIsActive, 'previous')"
+        class="button button--previous"
+        :class="{ 'button--disabled' : !previousIsActive }">
+      </button>
+
+      <button
+        v-bind="{ 'disabled' : !nextIsActive }"
+        @click="changePage(nextIsActive, 'next')"
+        class="button button--next"
+        :class="{ 'button--disabled' : !nextIsActive }">
+      </button>
+    </div>
+
+    <div v-else class="left">
+      <p>There are no evaluations matching the selected filters options.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+
+  export default {
+    name: "pame-pagination",
+
+    props: {
+      currentPage: {
+        required: true,
+        type: Number
+      },
+      itemsPerPage: {
+        required: true,
+        type: Number
+      },
+      totalItems: {
+        required: true,
+        type: Number
+      },
+      totalPages: {
+        required: true,
+        type: Number
+      }
+    },
+
+    computed: {
+      nextIsActive () {
+        return  this.currentPage < this.totalPages
+      },
+
+      previousIsActive () {
+        return this.currentPage > 1
+      },
+
+      firstItem () {
+        let first
+
+        if(this.totalItems == 0) {
+          first = 0
+
+        } else if (this.totalItems < this.itemsPerPage) {
+          first = 1
+
+        } else {
+          first = this.itemsPerPage * (this.currentPage - 1) + 1
+        }
+
+        return first
+      },
+
+      lastItem () {
+        let lastItem = this.itemsPerPage * this.currentPage
+
+        if (lastItem > this.totalItems) {
+          lastItem = this.totalItems
+        }
+
+        return lastItem
+      },
+
+      haveResults () {
+        return this.totalItems > 0
+      }
+
+
+    },
+
+    methods: {
+      changePage (isActive, direction) {
+        // only change the page if the button is active
+        if (isActive) {
+          const newPage = direction == 'next' ? this.currentPage + 1 : this.currentPage - 1
+
+          this.$store.commit('updateRequestedPage', newPage)
+          eventHub.$emit('getNewItems')
+        }
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/pame-filters/DataFilter.vue b/app/javascript/components/pame-filters/DataFilter.vue
new file mode 100644
index 000000000..96acb2013
--- /dev/null
+++ b/app/javascript/components/pame-filters/DataFilter.vue
@@ -0,0 +1,139 @@
+<template>
+  <div v-if="hasOptions" class="filter">
+    <p
+      @click="openSelect()" 
+      class="filter__button button" 
+      :class="{ 'filter__button--active' : isOpen , 'filter__button--has-selected' : hasSelected }">
+
+      {{ title }} <span v-show="hasSelected" class="filter__button-total">{{ totalSelectedOptions }}</span>
+    </p>
+    
+    <div class="filter__options" :class="{ 'filter__options--active' : isOpen }">
+      <ul class="ul-unstyled filter__options-list" :class="filterClass">
+        <data-filter-option v-for="option in options" 
+          :option="option"
+          :selected="false">
+        </data-filter-option>
+      </ul>
+
+      <div class="filter__buttons">
+        <button @click="clear()" class="button--link bold float-left">Clear</button>
+        <button @click="cancel()" class="button--link">Cancel</button>
+        <button @click="apply()" class="button--link button--link--green bold">Apply</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+  import DataFilterOption from './DataFilterOption.vue'
+
+  export default {
+    name: 'data-filter',
+
+    components: { DataFilterOption },
+
+    props: {
+      name: {
+        type: String
+      },
+      title: {
+        required: true, 
+        type: String
+      },
+      options: {
+        type: Array
+      },
+      type: {
+        type: String
+      }
+    },
+
+    data () {
+      return {
+        children: this.$children,
+        isOpen: false,
+        activeOptions: []
+      }
+    },
+
+    computed: {
+      // only show the select if the filter is a real filter and not just a table title
+      hasOptions () {
+        return this.options != undefined || this.name != undefined
+      },
+
+      selectedOptions () {
+        let selectedArray = []
+
+        this.children.forEach(child => {
+          if(child.isSelected){ 
+            selectedArray.push(child.option) 
+          }
+        })
+
+        return selectedArray
+      },
+
+      hasSelected () {
+        return this.totalSelectedOptions > 0
+      },
+
+      totalSelectedOptions () {
+        return this.selectedOptions.length
+      },
+
+      filterClass () {
+        return 'filter__options--' + this.name.replace('_| |(|)', '-').toLowerCase()
+      }
+    },
+
+    methods: {
+      openSelect () {
+        // if the filter is open is close it, else open it and close the others
+        if(this.isOpen){
+          this.isOpen = false
+        } else {
+          eventHub.$emit('clickDropdown', this.name)  
+        }
+      },
+
+      closeSelect () {
+        this.isOpen = false
+      },
+
+      cancel() {
+        this.closeSelect()
+        
+        // reset each option to the correct state
+        this.children.forEach(child => {
+          child.isSelected = this.activeOptions.includes(child.option) ? true : false
+        })
+      },
+
+      clear () {
+        // set the isSelected property on all options to false
+        this.children.forEach(child => {
+          child.isSelected = false
+        })
+      },
+
+      apply () {
+        this.closeSelect()
+
+        //update the active filters array
+        this.activeOptions = this.selectedOptions
+
+        const newFilterOptions = {
+          filter: this.name,
+          options: this.activeOptions
+        }
+
+        this.$store.commit('updateFilterOptions', newFilterOptions)
+
+        eventHub.$emit('filtersChanged')
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/pame-filters/DataFilterOption.vue b/app/javascript/components/pame-filters/DataFilterOption.vue
new file mode 100644
index 000000000..c8faf7c99
--- /dev/null
+++ b/app/javascript/components/pame-filters/DataFilterOption.vue
@@ -0,0 +1,38 @@
+<template>
+  <li class="filter__option">
+    <input type="checkbox" :id="optionId" v-model="isSelected" class="filter__checkbox" :class="{ 'filter__checkbox--active' : isSelected }">
+    <label :for="optionId" class="filter__checkbox-label">{{ option }}</label>
+  </li>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+
+  export default {
+    name: 'data-filter-option',
+
+    props: {
+      option: {
+        required: true
+      }
+    },
+
+    data () {
+      return {
+        isSelected: false
+      }
+    },
+
+    computed : {
+      optionId () {
+        return this.option.replace(' |(|)|_', '-').toLowerCase()
+      }
+    },
+
+    methods: {
+      selectOption (option) {
+        this.isSelected = true
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/pame-filters/Filters.vue b/app/javascript/components/pame-filters/Filters.vue
new file mode 100644
index 000000000..062451359
--- /dev/null
+++ b/app/javascript/components/pame-filters/Filters.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <span class="filter__title bold">Filters:</span>
+
+    <data-filter v-for="filter in filters"
+      :name="filter.name"
+      :title="filter.title" 
+      :options="filter.options"
+      :type="filter.type">
+    </data-filter>
+
+    <download-csv class="inline-block"  :total-items="totalItems"></download-csv>
+  </div>
+</template>
+
+<script>
+  import { eventHub } from "../../vue.js"
+  import DataFilter from './DataFilter.vue'
+  import DownloadCsv from '../forms/DownloadCsv.vue'
+
+  export default {
+    name: "filters",
+
+    components: { DataFilter, DownloadCsv },
+
+    props: {
+      filters: {
+        required: true,
+        type: Array
+      },
+      totalItems: {
+        required: true,
+        type: Number
+      }
+    },
+
+    data () {
+      return  {
+        children: this.$children
+      }
+    },
+
+    mounted () {
+      this.createSelectedFilterOptions()
+      
+      eventHub.$on('clickDropdown', this.updateDropdowns)
+    },
+
+    methods: {
+      updateDropdowns (name) {
+        this.children.forEach(filter => {
+          filter.isOpen = filter.name == name
+        })
+      },
+
+      createSelectedFilterOptions () {
+        let array = []
+
+        // create an empty array for each filter
+        this.filters.forEach(filter => {
+          if (filter.name !== undefined && filter.options.length > 0) {
+            let obj = {}
+
+            obj.name = filter.name
+            obj.options = []
+            obj.type = filter.type
+
+            array.push(obj)
+          }
+        })
+
+        this.$store.commit('setFilterOptions', array)
+      },
+    }
+  }
+</script>
diff --git a/app/javascript/components/pame-filters/SelectedFilter.vue b/app/javascript/components/pame-filters/SelectedFilter.vue
new file mode 100644
index 000000000..6fb94481e
--- /dev/null
+++ b/app/javascript/components/pame-filters/SelectedFilter.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="selected__option">
+    
+    <p class="selected__text">{{ option }}</p>
+
+    <button @click="deselectOption()" class="selected__close fa fa-times"></button>
+  </div>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+
+  export default {
+    name: 'selected-filter',
+
+    props: {
+      name: {
+        required: true,
+        type: String
+      },
+      option: {
+        required: true,
+        type: String
+      }
+    },
+
+    methods: {
+      deselectOption () {
+        // remove this option from the active filter list and update results
+        this.$store.commit('removeFilterOption', { name: this.name, option: this.option })
+        eventHub.$emit('deselectOption', { name: this.name, option: this.option })
+        eventHub.$emit('filtersChanged')
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/table/PameTableHead.vue b/app/javascript/components/table/PameTableHead.vue
new file mode 100644
index 000000000..bb6b92ff2
--- /dev/null
+++ b/app/javascript/components/table/PameTableHead.vue
@@ -0,0 +1,54 @@
+<template>
+  <thead id="sticky" :class="{ 'table__head--stuck' : isSticky }">
+    <tr>
+      <table-header v-for="filter, index in filters" :filter="filter" :key="index"></table-header>
+    </tr>
+  </thead>
+</template>
+
+<script>
+  import TableHeader from './TableHeader.vue'
+
+  export default {
+    name: 'pame-table-head',
+
+    components: { TableHeader },
+
+    props: {
+      filters: {
+        required: true,
+        type: Array
+      }
+    },
+
+    data() {
+      return {
+        stickyTrigger: 0,
+        isSticky: false
+      }
+    },
+
+    mounted () {
+      this.setStickyTrigger()
+      this.scrollHandler()
+    },
+
+    methods: {
+      setStickyTrigger () {
+        const stickyElement = document.getElementById('sticky')
+        const stickyElementHeight = stickyElement.clientHeight
+        const stickyYOffset = stickyElement.getBoundingClientRect().top + window.pageYOffset
+
+        this.stickyTrigger = stickyElementHeight + stickyYOffset
+      },
+
+      scrollHandler () {
+        setInterval( () => {
+          let scrollY = window.pageYOffset
+
+          this.isSticky = scrollY > this.stickyTrigger ? true : false
+        }, 100)
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/table/Row.vue b/app/javascript/components/table/Row.vue
new file mode 100644
index 000000000..9eb0c3dfb
--- /dev/null
+++ b/app/javascript/components/table/Row.vue
@@ -0,0 +1,79 @@
+<template>
+<tr>
+    <td>{{ item.name }}</td>
+    <td>{{ item.designation }}</td>
+    <td>
+      <template v-if="item.restricted">{{ item.wdpa_id }}</template>
+      <a v-else :href="wdpaUrl(item.wdpa_id)" title="View protected area on Protected Planet" target="_blank">{{ item.wdpa_id }}</a>
+    </td>
+    <td>{{ item.id }}</td>
+    <td>{{ checkForMultiples('iso3') }}</td>
+    <td>{{ item.methodology }}</td>
+    <td>{{ item.year }}</td>
+    <td v-html="assessmentUrl(item.url)"></td>
+    <td @click="openModal()" class="modal__trigger">{{ item.metadata_id }}</td>
+  </tr>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+
+  export default {
+    name: "row",
+    props: {
+      item: {
+        required: true,
+        type: Object,
+      }
+    },
+
+    computed: {
+      projectTitle () {
+        return this.trim(this.item.title)
+      }
+    },
+
+    methods: {
+      wdpaUrl (wdpaId) {
+        return `https://protectedplanet.net/${wdpaId}`
+      },
+
+      assessmentUrl (url) {
+        return url.includes('http') ? `<a href="${url}" title="View assessment" target="_blank">Link</a>` :  url
+      },
+
+      openModal () {
+        this.$store.commit('updateModalContent', this.item)
+
+        eventHub.$emit('openModal')
+      },
+
+      checkForMultiples (field) {
+        // set output to the first item in the array
+        // if the array has more than 1 value then set output to 'multiple'
+        let output = this.item[field][0]
+
+        if(this.item[field].length > 1) {
+          output = 'Multiple'
+        } else {
+          output = this.trim(output)
+        }
+
+        return output
+      },
+
+      trim (phrase) {
+        const length = phrase.length
+        let output
+
+        if (length <= 30) {
+          output = phrase
+        } else {
+          output = phrase.substring(0,27) + '...'
+        }
+
+        return output
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/components/table/TableHeader.vue b/app/javascript/components/table/TableHeader.vue
new file mode 100644
index 000000000..bc48df2d5
--- /dev/null
+++ b/app/javascript/components/table/TableHeader.vue
@@ -0,0 +1,48 @@
+<template>
+  <th>
+    <div class="flex flex-h-center">
+      <span class="table__header">{{ filter.title }}</span>
+
+      <tooltip v-if="hasTooltip" :text="filter.tooltip"></tooltip>
+
+      <div v-if="hasOptions" class="table__sorting" @click="sort()">
+        <span alt="Sort results" class="table__sort table__sort--ascending"></span>
+        <span alt="Sort results" class="table__sort table__sort--descending"></span>
+      </div>
+    </div>
+  </th>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+  import Tooltip from '../tooltip/Tooltip'
+
+  export default {
+    name: 'table-header',
+
+    components: { Tooltip },
+
+    props: {
+      filter: {
+        required: true,
+        type: Object
+      }
+    },
+
+    computed: {
+      // only show the sort buttons if the title has a filter
+      hasOptions () {
+        return this.filter.options != undefined || this.filter.name != undefined
+      },
+      hasTooltip () {
+        return 'tooltip' in this.filter
+      }
+    },
+
+    methods: {
+      sort () {
+        eventHub.$emit('sort', this.filter.name)
+      }
+    }
+  }
+</script>
diff --git a/app/javascript/store/store.js b/app/javascript/store/store.js
index de34a5b5e..54db8293c 100644
--- a/app/javascript/store/store.js
+++ b/app/javascript/store/store.js
@@ -14,5 +14,10 @@ import { storeTable } from './_store-table.js'
 export default new Vuex.Store({
   modules: {
     table: storeTable
-  }
+  },
+    mutations: {
+	setFilterOptions (state, options) {
+	    this.state.selectedFilterOptions = options
+	},
+    }
 })
diff --git a/app/javascript/vue.js b/app/javascript/vue.js
index 0264f2e74..87bc78ece 100644
--- a/app/javascript/vue.js
+++ b/app/javascript/vue.js
@@ -31,6 +31,7 @@ import ChartRowPa from './components/charts/chart-row-pa/ChartRowPa'
 import ChartRowTarget from './components/charts/chart-row-target/ChartRowTarget'
 import ChartSunburst from './components/charts/chart-sunburst/ChartSunburst'
 import Download from './components/download/Download'
+import FilteredTable from './components/FilteredTable'
 import MapInteractive from './components/map/MapInteractive'
 import NavBurger from './components/nav/NavBurger'
 import SearchAreas from './components/search/SearchAreas'
@@ -48,6 +49,8 @@ import Tooltip from './components/tooltip/Tooltip'
 import VSelectSearchable from './components/select/VSelectSearchable'
 import VTable from './components/table/VTable'
 
+export const eventHub = new Vue()
+
 document.addEventListener('DOMContentLoaded', () => {
   if(document.getElementById('v-app')) {
 
@@ -80,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => {
         ChartRowTarget,
         ChartSunburst,
         Download,
+	FilteredTable,
         MapInteractive,
         NavBurger,
         SearchAreas,
diff --git a/app/models/pame_evaluation.rb b/app/models/pame_evaluation.rb
index ce206a3c7..55ed2d1a0 100644
--- a/app/models/pame_evaluation.rb
+++ b/app/models/pame_evaluation.rb
@@ -8,9 +8,14 @@ class PameEvaluation < ApplicationRecord
   belongs_to :pame_source
   has_and_belongs_to_many :countries
 
+  validates :methodology, :year, :metadata_id, presence: true
+
+  # config for loadable mixin
   ignore_column :designation
+
   import_by protected_area: :wdpa_id
-  validates :methodology, :year, :metadata_id, presence: true
+  import_by country: :iso_3
+  
 
   TABLE_ATTRIBUTES = [
     {
diff --git a/app/views/pame/index.html.erb b/app/views/pame/index.html.erb
index 33178dc16..71f50e26b 100644
--- a/app/views/pame/index.html.erb
+++ b/app/views/pame/index.html.erb
@@ -1,3 +1,10 @@
-<%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
 
-<%= render "partials/ctas/live-report" %>
\ No newline at end of file
+
+
+<div class="container page-padding">
+
+  <filtered-table :filters="<%= @filters %>" :json="<%= @json %>" :attributes="<%= @table_attributes %>">
+  </filtered-table>
+
+</div>
+
diff --git a/config/routes.rb b/config/routes.rb
index bddfdc8fe..42c014166 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -41,7 +41,7 @@
         get '/search/by_point', to: 'search#by_point'
       end
     end
-
+    
     # resources :projects, only: [:create, :index, :update, :destroy]
 
     get '/marine/download_designations', to: 'marine#download_designations'
@@ -69,6 +69,11 @@
 
 
     # routes worked on so far as part of the refresh
+
+    get '/pame', to: 'pame#index'
+    post '/pame/download', to: 'pame#download'
+    post '/pame/list', to: 'pame#list'
+
     get '/resources', to: 'resources#index'
     get '/search', to: 'search#index'
 
diff --git a/lib/data/seeds/pame_data-2019-08-30.csv b/lib/data/seeds/pame_data-2019-08-30.csv
index 33bc33ebb..49088071d 100644
--- a/lib/data/seeds/pame_data-2019-08-30.csv
+++ b/lib/data/seeds/pame_data-2019-08-30.csv
@@ -1,4 +1,4 @@
-evaluation_id,wdpa_id,ISO3,methodology,year,url,metadata_id,name,designation,source_data_title,source_resp_party,source_year,source_language,restricted,assessment_is_public
+id,wdpa_id,countries,methodology,year,url,metadata_id,name,designation,pame_source_data_title,pame_source_resp_party,pame_source_year,pame_source_language,restricted,assessment_is_public
 1,555622076,ARE,METT,2016,Not Reported,1,Al Aqqa,Protected Area,UAE Management Effectiveness Evaluation,Ministry of Climate Change and Environment,2018,Arabic,FALSE,FALSE
 2,555622075,ARE,METT,2016,Not Reported,1,Al Bidiya,Protected Area,UAE Management Effectiveness Evaluation,Ministry of Climate Change and Environment,2018,Arabic,FALSE,FALSE
 3,555622070,ARE,METT,2016,Not Reported,1,Al Ghaf of Nazwa,Protected Area,UAE Management Effectiveness Evaluation,Ministry of Climate Change and Environment,2018,Arabic,FALSE,FALSE