diff --git a/README.md b/README.md
index 79749e6c9..9211a0c58 100644
--- a/README.md
+++ b/README.md
@@ -23,15 +23,14 @@ Open data is more likely to be used if data consumers can:
 - access the data in an open machine-readable format
 - know how the data is licensed and how it can be reused
 
-## Planned features
+## Features
 
 Using Data Curator open data producers can:
 
-- create new tabular data from scratch or from a template
+- create and edit tabular data from scratch or from a template
 - open data from a CSV or Microsoft Excel file
 - open multiple related data tables from a [Data Package](http://frictionlessdata.io/data-packages/)
 - automatically correct common problems found in CSV and Excel files
-- edit data
 
 Using data from any of these sources, you can:
 
@@ -43,7 +42,7 @@ Using data from any of these sources, you can:
 The schema enables you to:
 
 - validate the whole table at once
-- validate a column at a time
+- validate a column at a time (planned)
 
 Once the data is described and validated, you can share the data and its description by exporting a [Data Package](http://frictionlessdata.io/data-packages/) to:
 
@@ -194,7 +193,8 @@ To automate deployment, we are using:
 - [Appveyor](https://www.appveyor.com) for Windows deployment
 - [Travis](https://travis-ci.org) for macOS and Linux
 
-`instructions to build and release on the master branch will go here`
+To trigger the automated build and draft release, create and push a git tag, following the versioning pattern used in current releases.
+Ensure that any changes in this tag are also released back to develop and master branches.
 
 Changes are recorded in the [Change Log][changelog].
 
diff --git a/package.json b/package.json
index 57bfdc463..922df5920 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "DataCurator",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": " <matt@redboxresearchdata.com.au>",
   "description": "Data Curator is a simple desktop CSV editor to help describe, validate and share usable open data",
   "license": "MIT",
@@ -83,7 +83,6 @@
     "escape-regexp": "^0.0.1",
     "etl": "^0.5.8",
     "exports-loader": "^0.6.4",
-    "font-awesome": "^4.7.0",
     "handsontable": "^0.34.5",
     "imports-loader": "^0.7.1",
     "jquery": "^3.2.1",
diff --git a/src/main/file.js b/src/main/file.js
index 9ba89c198..b3019a50b 100644
--- a/src/main/file.js
+++ b/src/main/file.js
@@ -142,7 +142,7 @@ function readFile(filename, format) {
 
 // TODO: consider toggle global var and use with debounce to check when last dialog triggered so don't get too many dialogs for multiple file opens
 function showAlreadyOpenedFileDialog() {
-  console.log('showing dialog...')
+  // console.log('showing dialog...')
   Dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
     type: 'warning',
     // title is not displayed on screen on macOS
diff --git a/src/main/utils.js b/src/main/utils.js
index cb0b07f73..b09943902 100644
--- a/src/main/utils.js
+++ b/src/main/utils.js
@@ -37,7 +37,9 @@ export function createWindow() {
 
 function closeWindowNoPrompt(result) {
   let browserWindow = BrowserWindow.getAllWindows()[0]
-  browserWindow.destroy()
+  if (browserWindow) {
+    browserWindow.destroy()
+  }
 }
 
 export function createWindowTab() {
diff --git a/src/renderer/components/Home.vue b/src/renderer/components/Home.vue
index c82d8cc97..1441d6d8a 100644
--- a/src/renderer/components/Home.vue
+++ b/src/renderer/components/Home.vue
@@ -56,7 +56,7 @@
     </nav>
     <div id="main-panel" class="panel panel-default" :class="sideNavPropertiesForMain">
       <!-- <div id="main-top-panel" class="panel panel-heading"></div> -->
-      <div id="main-middle-panel" class="panel panel-body">
+      <div id="main-middle-panel" class="panel panel-body" :class="messageStatus">
         <div id='csvEditor'>
           <ul class="nav nav-tabs">
             <li>
@@ -83,7 +83,7 @@
           </div>
         </div>
       </div>
-      <div id="main-bottom-panel" class="panel-footer">
+      <div id="main-bottom-panel" class="panel-footer" :class="mainBottomPanelStatus">
         <div id="message-panel" class="panel-default">
           <!-- tidy up messages view with components -->
           <div v-show="messages">
@@ -97,7 +97,9 @@
               <h3>{{messagesTitle}}</h3>
               <template  v-if="messagesType === 'error'">
                 <div v-for="errorMessage in messages">
-                  <span v-show="errorMessage.rowNumber">row no.{{errorMessage.rowNumber}}: </span><span>{{errorMessage.message}}</span>
+                  <span v-show="errorMessage.rowNumber">(row:{{errorMessage.rowNumber}})</span>
+                  <span v-show="errorMessage.columnNumber">(column:{{errorMessage.columnNumber}})</span>
+                  <span>{{errorMessage.message}}</span>
                 </div>
               </template>
               <div v-else>
@@ -163,7 +165,7 @@ import 'bootstrap/dist/js/bootstrap.min.js'
 import 'lodash/lodash.min.js'
 import '../menu.js'
 import {unzipFile} from '@/importPackage.js'
-import {toggleHeaderOff, toggleHeaderOn} from '@/headerRow.js'
+import {toggleHeaderWithFeedback} from '@/headerRow.js'
 import {onNextHotIdFromTabRx, hotIdFromTab$} from '@/rxSubject.js'
 import {getHotIdFromTabIdFunction} from '@/store/modules/hots.js'
 export default {
@@ -254,7 +256,12 @@ export default {
       {
         label: 'encoding',
         value: 'utf-8'
-      }]
+      }],
+      defaultPackageProperties: [{
+        label: 'profile',
+        value: 'tabular-data-package'
+      }],
+      reportSiblingClasses: ['main-bottom-panel', 'main-middle-panel']
     }
   },
   computed: {
@@ -275,6 +282,12 @@ export default {
     },
     maxColAllowed() {
       return getColumnCount() - 1
+    },
+    messageStatus() {
+      return this.messages ? 'messages-opened' : 'messages-closed'
+    },
+    mainBottomPanelStatus() {
+      return `${this.messageStatus} ${this.sideNavPropertiesForMain}`
     }
   },
   methods: {
@@ -295,41 +308,27 @@ export default {
       'resetTablePropertiesToObject',
       'resetColumnPropertiesToObject',
       'pushAllColumnsProperty',
-      'pushTableProperty'
+      'pushTableProperty',
+      'pushPackageProperty'
     ]),
-    closeMessages: function() {
-      for (let el of ['main-bottom-panel', 'main-middle-panel']) {
-        document.getElementById(el).classList.remove('opened')
-      }
-      this.messages = false
-      this.messagesType = ''
-      this.messageTitle = ''
-    },
     selectionListener: function() {
       this.updateActiveColumn()
       this.resetSideNavArrows()
     },
     inferColumnProperties: async function() {
       try {
-        let feedback = await guessColumnProperties()
-        this.messages = feedback
+        this.messages = await guessColumnProperties()
         this.messagesType = 'feedback'
         this.messagesTitle = 'Guess column properties'
-        this.reportFeedback()
       } catch (err) {
         console.log(err)
       }
     },
     // TODO: tidy up error view handling and consistency in dependent usages
-    openMessagesOnIds: function(ids) {
-      for (let el of ids) {
-        document.getElementById(el).classList += ' opened'
-      }
-    },
-    closeMessagesOnIds: function(ids) {
-      for (let el of ids) {
-        document.getElementById(el).classList.remove('opened')
-      }
+    closeMessages: function() {
+      this.messages = false
+      this.messagesType = ''
+      this.messageTitle = ''
     },
     // TODO: tidy up message objects
     reportValidationRowErrors: function(errorCollection) {
@@ -342,14 +341,6 @@ export default {
         this.messages = 'No validation errors reported.'
         this.messagesType = 'feedback'
       }
-      this.reportFeedback()
-    },
-    reportFeedback: function() {
-      // console.log('updating feedback...')
-      let ids = ['main-bottom-panel', 'main-middle-panel']
-      let cssUpdateFunction = this.messages
-        ? this.openMessagesOnIds(ids)
-        : this.closeMessagesOnIds(ids)
     },
     validateTable: async function() {
       try {
@@ -369,19 +360,16 @@ export default {
       this.messagesTitle = message ? 'Import Data Package Error' : 'Import Data Package Success'
       this.messages = message || 'All Properties have been imported.'
       this.messagesType = 'feedback'
-      this.reportFeedback()
     },
     exportPackageFeedback: function() {
       this.messagesTitle = 'Export package success'
       this.messages = 'Data package created.'
       this.messagesType = 'feedback'
-      this.reportFeedback()
     },
     exportPackageErrors: function(errorMessages) {
       this.messagesTitle = 'Export package error'
       this.messages = errorMessages
       this.messagesType = 'error'
-      this.reportFeedback()
     },
     createPackage: async function() {
       try {
@@ -475,6 +463,11 @@ export default {
         this.pushTableProperty({hotId: hotId, key: x.label, value: x.value})
       })
     },
+    pushDefaultPackageProperties: function() {
+      this.defaultPackageProperties.forEach(x => {
+        this.pushPackageProperty({key: x.label, value: x.value})
+      })
+    },
     closeTab: async function(event) {
       // do not allow single tab to be closed
       if (this.tabs.length > 1) {
@@ -498,6 +491,7 @@ export default {
     closeSideNav: function() {
       this.enableTransition = false
       this.sideNavStatus = 'closed'
+      this.sideNavView = ''
     },
     openSideNav: function() {
       this.sideNavStatus = 'open'
@@ -575,7 +569,7 @@ export default {
     },
     updateToolbarMenuForButton: function(index) {
       this.toolbarIndex = index
-      this.closeSideNav()
+      // this.closeSideNav()
       switch (this.toolbarMenus[index].name) {
         case 'Validate':
           this.validateTable()
@@ -628,7 +622,7 @@ export default {
       this.sideNavView = properties.sideNavView
       this.sideNavViewTitle = properties.name || properties.sideNavView
       this.enableTransition = properties.enableTransition || false
-      this.sideNavStatus = 'open'
+      this.openSideNav()
     },
     triggerMenuButton: function(menuName) {
       let index = _.findIndex(this.toolbarMenus, function(o) {
@@ -649,14 +643,9 @@ export default {
         form.style.height = this.sideNavFormHeight
       }
     },
-    toggleHeaderWithFeedback: function(hot) {
-      this.messages = false
-      if (hot.hasColHeaders()) {
-        toggleHeaderOff(hot)
-      } else {
-        toggleHeaderOn(hot, this.toggleHeaderErrorMessage)
-      }
-      this.reportFeedback()
+    toggleHeader: function() {
+      let hot = HotRegister.getActiveInstance()
+      toggleHeaderWithFeedback(hot, this.toggleHeaderErrorMessage, this.closeMessages)
     },
     toggleHeaderErrorMessage: function() {
       this.messagesTitle = 'Header Error'
@@ -688,10 +677,9 @@ export default {
     ipc.on('triggerMenuButton', function(event, arg) {
       vueTriggerMenuButton(arg)
     })
-    const vueToggleHeader = this.toggleHeaderWithFeedback
+    const vueToggleHeader = this.toggleHeader
     ipc.on('toggleActiveHeaderRow', function() {
-      let hot = HotRegister.getActiveInstance()
-      vueToggleHeader(hot)
+      vueToggleHeader()
     })
     const vueAddTabWithData = this.addTabWithData
     ipc.on('addTabWithData', function(e, data) {
@@ -747,6 +735,7 @@ export default {
     onNextHotIdFromTabRx(getHotIdFromTabIdFunction())
   },
   created: function() {
+    console.log('home vue created.')
     const vueGuessProperties = this.inferColumnProperties
     ipc.on('guessColumnProperties', function(event, arg) {
       vueGuessProperties()
@@ -759,6 +748,7 @@ export default {
     ipc.on('validateTable', function(event, arg) {
       vueValidateTable()
     })
+    this.pushDefaultPackageProperties()
   },
   updated: function() {
     if (this.loadingDataMessage && this.loadingDataMessage.length > 0) {
diff --git a/src/renderer/components/KeyboardHelp.vue b/src/renderer/components/KeyboardHelp.vue
index de161236e..a992a0bdf 100644
--- a/src/renderer/components/KeyboardHelp.vue
+++ b/src/renderer/components/KeyboardHelp.vue
@@ -281,9 +281,9 @@
         <td><kbd>Command &#8984;</kbd> <kbd>Z</kbd></td>
       </tr>
       <tr>
-        <td><b>Redo</b> - repeat the last data entry or edit command</td>
+        <td><b>Redo</b> - Undo the last Undo command</td>
         <td><kbd>Ctrl</kbd> <kbd>Y</kbd></td>
-        <td><kbd>Command &#8984;</kbd> <kbd>Y</kbd></td>
+        <td><kbd>Shift &#8679;</kbd> <kbd>Command &#8984;</kbd> <kbd>Z</kbd></td>
       </tr>
       <tr>
         <td><b>Cut</b> - move the selected data to the clipboard</td>
diff --git a/src/renderer/data-actions.js b/src/renderer/data-actions.js
index deba21bd9..b096b0635 100644
--- a/src/renderer/data-actions.js
+++ b/src/renderer/data-actions.js
@@ -2,7 +2,7 @@ import tabStore from '../renderer/store/modules/tabs.js'
 import fs from 'fs'
 import {fixRaggedRows} from '@/ragged-rows.js'
 import {includeHeadersInData} from '@/frictionlessUtilities.js'
-import {toggleHeaderOn} from '@/headerRow.js'
+import {toggleHeaderNoFeedback} from '@/headerRow.js'
 // import parse from 'csv-parse/lib/sync'
 // import stringify from 'csv-stringify'
 const $ = global.jQuery = require('jquery/dist/jquery.js')
@@ -20,7 +20,7 @@ export function loadDataIntoHot(hot, data, format) {
   hot.loadData(arrays)
   hot.render()
   // frictionless csv header default = true
-  toggleHeaderOn(hot)
+  toggleHeaderNoFeedback(hot)
 }
 
 export function saveDataToFile(hot, format, filename, callback) {
diff --git a/src/renderer/frictionless.js b/src/renderer/frictionless.js
index 2fcee64d9..99b9a878e 100644
--- a/src/renderer/frictionless.js
+++ b/src/renderer/frictionless.js
@@ -51,12 +51,14 @@ function checkRow(rowNumber, row, schema, errorCollector) {
       for (const error of err.errors) {
         // console.log('got next error')
         console.log(error)
-        errorCollector.push({rowNumber: rowNumber, message: error.message, name: error.name})
+        let columnNumber = error.columnNumber || 'N/A'
+        errorCollector.push({columnNumber: columnNumber, rowNumber: rowNumber, message: error.message, name: error.name})
       }
     } else {
       // console.log('got next error')
       console.log(err)
-      errorCollector.push({rowNumber: rowNumber, message: err.message, name: err.name})
+      let columnNumber = err.columnNumber || 'N/A'
+      errorCollector.push({columnNumber: columnNumber, rowNumber: rowNumber, message: err.message, name: err.name})
     }
   }
 }
diff --git a/src/renderer/frictionlessDataPackage.js b/src/renderer/frictionlessDataPackage.js
index 70ef8f524..4a3d331cc 100644
--- a/src/renderer/frictionlessDataPackage.js
+++ b/src/renderer/frictionlessDataPackage.js
@@ -7,7 +7,7 @@ import {createZipFile} from '@/exportPackage.js'
 import {hasAllColumnNames} from '@/frictionlessUtilities.js'
 
 export async function createDataPackage() {
-  let errorMessages = []
+  const errorMessages = []
   if (!haveAllTabsGotFilenames()) {
     errorMessages.push('All tabs must be saved before exporting.')
   }
@@ -57,8 +57,14 @@ function hasAllPackageRequirements(requiredMessages) {
   if (!hotStore.state.provenanceProperties || !hotStore.state.provenanceProperties.markdown) {
     requiredMessages.push(`Provenance properties must be set.`)
   }
-  if (!hotStore.state.packageProperties || _.isEmpty(hotStore.state.packageProperties)) {
+  let packageProperties = hotStore.state.packageProperties
+  if (!packageProperties || _.isEmpty(packageProperties)) {
     requiredMessages.push(`Package properties must be set.`)
+  } else {
+    let name = packageProperties.name
+    if (!name || name.trim() === '') {
+      requiredMessages.push(`Package property, 'name' must be set.`)
+    }
   }
   return requiredMessages.length === 0
 }
@@ -75,7 +81,7 @@ function addPackageProperties(dataPackage) {
 }
 
 async function buildAllResourcesForDataPackage(dataPackage, errorMessages) {
-  let resourcePaths = []
+  const resourcePaths = []
   for (let hotId in hotStore.state.hotTabs) {
     try {
       let resource = await createValidResource(hotId, errorMessages)
@@ -132,7 +138,6 @@ function hasAllResourceRequirements(hot, requiredMessages) {
       requiredMessages.push(`All column property 'name's must not be empty.`)
     }
   }
-
   return requiredMessages.length === 0
 }
 
diff --git a/src/renderer/headerRow.js b/src/renderer/headerRow.js
index 35f28e028..47574d147 100644
--- a/src/renderer/headerRow.js
+++ b/src/renderer/headerRow.js
@@ -1,8 +1,33 @@
 import {ipcRenderer as ipc} from 'electron'
-import {activeHotAllColumnNames$} from '@/rxSubject.js'
+import {allTablesAllColumnNames$} from '@/rxSubject.js'
 import store from '@/store/modules/hots.js'
 import {HotRegister} from '@/hot.js'
 
+export function toggleHeaderWithFeedback(hot, errorFunction, successFunction) {
+  if (hot.hasColHeaders()) {
+    toggleHeaderOff(hot)
+    successFunction()
+    // ensure at least 2 rows before setting header
+  } else if (hot.getData().length < 2) {
+    ipc.send('hasHeaderRow', false)
+    errorFunction()
+  } else {
+    toggleHeaderOn(hot)
+    successFunction()
+  }
+}
+
+export function toggleHeaderNoFeedback(hot) {
+  if (hot.hasColHeaders()) {
+    toggleHeaderOff(hot)
+    // ensure at least 2 rows before setting header
+  } else if (hot.getData().length < 2) {
+    ipc.send('hasHeaderRow', false)
+  } else {
+    toggleHeaderOn(hot)
+  }
+}
+
 export function toggleHeaderOff(hot) {
   let header = hot.getColHeader()
   let data = _.concat([header], hot.getData())
@@ -13,21 +38,13 @@ export function toggleHeaderOff(hot) {
   ipc.send('hasHeaderRow', false)
 }
 
-export function toggleHeaderOn(hot, cb) {
-  // ensure at least 2 rows before setting header
-  if (hot.getData().length < 2) {
-    ipc.send('hasHeaderRow', false)
-    if (cb) {
-      cb()
-    }
-  } else {
-    let data = hot.getData()
-    let header = data[0]
-    data = _.drop(data)
-    updateHot(hot, data, header)
-    updateAllColumnsName(hot.getColHeader())
-    ipc.send('hasHeaderRow', true)
-  }
+export function toggleHeaderOn(hot) {
+  let data = hot.getData()
+  let header = data[0]
+  data = _.drop(data)
+  updateHot(hot, data, header)
+  updateAllColumnsName(hot.getColHeader())
+  ipc.send('hasHeaderRow', true)
 }
 
 function updateHot(hot, data, header) {
@@ -44,5 +61,5 @@ function updateAllColumnsName(values) {
     values: values
   })
   // do not allow getter to cache as does not seem to pick up change
-  activeHotAllColumnNames$.next(store.getters.getAllHotTablesColumnNames(store.state, store.getters)())
+  allTablesAllColumnNames$.next(store.getters.getAllHotTablesColumnNames(store.state, store.getters)())
 }
diff --git a/src/renderer/hot.js b/src/renderer/hot.js
index 088ddf427..30d4f9e19 100644
--- a/src/renderer/hot.js
+++ b/src/renderer/hot.js
@@ -2,8 +2,9 @@ import Handsontable from 'handsontable/dist/handsontable.full.js'
 import {remote} from 'electron'
 const Dialog = remote.dialog
 
-let HotRegister = {
-  hots: {},
+const _hots = {}
+
+const HotRegister = {
   register(container, listeners={}) {
     let hot = new Handsontable(container, {
       // do not allow headers on initialisation - no default headers unless toggled
@@ -72,12 +73,12 @@ let HotRegister = {
         }
       }
     })
-    _.set(this.hots, hot.guid, hot)
+    _.set(_hots, hot.guid, hot)
     return hot.guid
   },
   getInstance(id) {
-    let hot = _.get(this.hots, id)
-    return _.get(this.hots, id)
+    let hot = _.get(_hots, id)
+    return _.get(_hots, id)
   },
   // TODO: consider cache (vue computed) of method, and moving to Home.vue to use with props, as used a lot
   getActiveInstance() {
@@ -92,19 +93,19 @@ let HotRegister = {
     return {'id': activeHot.guid, 'data': activeHot.getData()}
   },
   destroyAllHots() {
-    _.forIn(this.hots, (hot, id) => {
+    console.log('destroying all hots...')
+    _.forIn(_hots, (hot, id) => {
       hot.destroy()
-      _.unset(this.hots, id)
+      _.unset(_hots, id)
     })
-    // just a safeguard
-    this.hots = {}
+    console.log(_hots)
   },
   destroyHot(id) {
     let hot = this.getInstance(id)
     if (hot) {
       hot.destroy()
     }
-    _.unset(this.hots, id)
+    _.unset(_hots, id)
   }
 }
 
diff --git a/src/renderer/main.js b/src/renderer/main.js
index b57483716..73f950898 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -3,8 +3,6 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
-import VeeValidate from 'vee-validate'
-Vue.use(VeeValidate)
 
 Vue.config.productionTip = false
 
diff --git a/src/renderer/mixins/RelationKeys.vue b/src/renderer/mixins/RelationKeys.vue
index c39cc6168..5dda8ffcd 100644
--- a/src/renderer/mixins/RelationKeys.vue
+++ b/src/renderer/mixins/RelationKeys.vue
@@ -6,7 +6,7 @@ import {
 import { Subscription } from 'rxjs/Subscription'
 import VueRx from 'vue-rx'
 import Vue from 'vue'
-import {activeHotAllColumnNames$} from '@/rxSubject.js'
+import {allTablesAllColumnNames$, activeTab$} from '@/rxSubject.js'
 import {
   HotRegister
 } from '@/hot.js'
@@ -17,28 +17,30 @@ export default {
   name: 'relationkeys',
   watch: {
     getActiveTab: function() {
+      console.log('got active tab in relation keys')
       this.initTableHeaderKeys()
     }
   },
   computed: {
-    ...mapGetters(['getActiveTab', 'getAllHotColumnNamesFromHotId', 'getAllHotTablesColumnNames'])
+    ...mapGetters(['getActiveTab', 'getAllHotTablesColumnNames', 'getAllTabTitles', 'getTabObjects', 'getHotIdFromTabId', 'getTabId'])
   },
   methods: {
     ...mapMutations(['pushAllColumnsProperty']),
+    // ...mapGetters(['getAllTabTitles']),
     initTableHeaderKeys: function() {
-      activeHotAllColumnNames$.next(this.getAllHotTablesColumnNames())
+      allTablesAllColumnNames$.next(this.getAllHotTablesColumnNames())
+    },
+    getHotIdHeaderNames: function(allTablesAllNames, hotId) {
+      return _.without(allTablesAllNames[hotId], '', null, undefined)
     }
   },
-  mounted: function() {
-    let vueCurrentHotId = this.currentHotId
+  mounted: async function() {
+    // let vueCurrentHotId = this.currentHotId
     let vueUpdateSubscriptions = this.updateSubscriptions
     // TODO: need to manage subscription here...
-    this.$subscribeTo(activeHotAllColumnNames$, async function(allNames) {
-      let id = await vueCurrentHotId()
-      console.log('subscription id is:')
-      console.log(id)
-      let names = allNames[id]
-      vueUpdateSubscriptions(names, id)
+    this.$subscribeTo(allTablesAllColumnNames$, async function(allTablesAllColumnNames) {
+      console.log('subscribed to all tables all columns...')
+      await vueUpdateSubscriptions(allTablesAllColumnNames)
     })
     this.initTableHeaderKeys()
   }
diff --git a/src/renderer/mixins/ValidationRules.vue b/src/renderer/mixins/ValidationRules.vue
new file mode 100644
index 000000000..67d03c83a
--- /dev/null
+++ b/src/renderer/mixins/ValidationRules.vue
@@ -0,0 +1,56 @@
+<script>
+import Vue from 'vue'
+import VeeValidate from 'vee-validate'
+Vue.use(VeeValidate)
+export default {
+  methods: {
+    validationRules: function(validator) {
+      switch (validator) {
+        case 'version':
+          return {
+            rules: {
+              regex: /[\d]+\.[\d+]+\.[\d]/
+            }
+          }
+        case 'name':
+          return {
+            required: true,
+            regex: /^([-a-z0-9._/])+$/,
+            unique_name: true
+          }
+        case 'integer':
+          return 'numeric'
+        case 'number':
+          return 'decimal'
+        // case 'date':
+        //   return 'date_format:YYYY-MM-DD'
+        // case 'time':
+        //   return 'date_format:HH:mm:ss'
+        // case 'datetime':
+        //   return 'date_format:YYYY-MM-DD HH:mm:ssZ'
+        // case 'year':
+        //   return 'date_format:YYYY'
+        // case 'yearmonth':
+        //   return 'date_format:YYYY-MM'
+        default:
+          return ''
+      }
+    }
+  },
+  mounted: function() {
+    const dict = {
+      en: {
+        custom: {
+          version: {
+            regex: 'The version field must comply with semantic versioning e.g. 1.0.0'
+          },
+          name: {
+            regex: 'The name field format is invalid. It must consist only of lowercase alphanumeric characters plus ".", "-" and "_".'
+          }
+        }
+      }
+    }
+    this.$validator.updateDictionary(dict)
+  }
+}
+</script>
diff --git a/src/renderer/partials/ColumnProperties.vue b/src/renderer/partials/ColumnProperties.vue
index 4f5cd102c..19cf0271b 100644
--- a/src/renderer/partials/ColumnProperties.vue
+++ b/src/renderer/partials/ColumnProperties.vue
@@ -22,7 +22,7 @@
           <div class="input-group row" v-for="option in constraintValues" :key="option">
             <input type="checkbox" :id="option" :checked="getConstraintCheck(option)" @click="setConstraintCheck(option, $event.target)"></input>
             <label :for="option" class="form-control-static">{{option}}</label>
-            <template v-if="!isBooleanConstraint(option)">
+            <template v-if="!isBooleanConstraint(option) && getConstraintCheck(option)">
               <input type="text" :class="{ 'form-group-sm constraint-text': true,'validate-danger': errors.has(option) }" :value="getConstraintValue(option)" @input="setConstraintValue(option, $event.target.value)" v-validate="constraintValidationRules(option)" :name="option"/>
             </template>
             <div v-show="errors.has(option) && removeConstraint(option)" class="row help validate-danger">
@@ -50,12 +50,13 @@ import {
   Subscription
 } from 'rxjs/Subscription'
 import {
-  activeHotAllColumnNames$
+  allTablesAllColumnNames$
 } from '@/rxSubject.js'
 import {
   HotRegister
 } from '@/hot.js'
 import ColumnTooltip from '../mixins/ColumnTooltip'
+import ValidationRules from '../mixins/ValidationRules'
 Vue.use(VueRx, {
   Subscription
 })
@@ -63,7 +64,7 @@ Vue.use(AsyncComputed)
 export default {
   extends: SideNav,
   name: 'column',
-  mixins: [ColumnTooltip],
+  mixins: [ValidationRules, ColumnTooltip],
   props: ['cIndex'],
   data() {
     return {
@@ -152,16 +153,7 @@ export default {
         'geojson': ['required', 'unique', 'minLength', 'maxLength', 'enum'],
         'any': ['required', 'unique', 'enum']
       },
-      constraintBooleanBindings: ['required', 'unique'],
-      validationRulesByType: {
-        'integer': 'numeric',
-        'number': 'decimal',
-        'date': 'date_format',
-        'time': 'date_format',
-        'datetime': 'date_format',
-        'year': 'date_format',
-        'yearmonth': 'date_format'
-      }
+      constraintBooleanBindings: ['required', 'unique']
     }
   },
   asyncComputed: {
@@ -235,19 +227,23 @@ export default {
       return object
     },
     getConstraintCheck: function(key) {
-      // console.log(`checking constraint: ${key}`)
+      console.log(`checking constraint: ${key}`)
       return _.has(this.constraintInputKeyValues, key)
     },
-    toggleTextNode: function(checkedInput) {
-      let textNode = checkedInput.parentNode.querySelector('.constraint-text')
-      if (textNode) {
-        textNode.style.display = checkedInput.checked ? 'inline-block' : 'none'
-      }
-    },
+    // constraintText(option) {
+    //   console.log(`constraint text option is: ${option}`)
+    //   console.log(option)
+    //   return _.has(this.constraintInputKeyValues, option)
+    // },
+    // toggleTextNode: function(checkedInput) {
+    //   let textNode = checkedInput.parentNode.querySelector('.constraint-text')
+    //   if (textNode) {
+    //     textNode.style.display = checkedInput.checked ? 'inline-block' : 'none'
+    //   }
+    // },
     setConstraintCheck: function(key, target) {
       let isChecked = target.checked
       console.log(`is target checked: ${target.checked}`)
-      this.toggleTextNode(target)
       if (!isChecked) {
         _.unset(this.constraintInputKeyValues, key)
       } else if (this.constraintBooleanBindings.indexOf(key) > -1) {
@@ -258,7 +254,7 @@ export default {
         this.constraintInputKeyValues[key] = currentValue
       }
       this.pushConstraintInputKeyValues()
-      // this.$forceUpdate()
+      this.$forceUpdate()
     },
     getConstraintValue: function(key) {
       let property = this.constraintInputKeyValues[key]
@@ -281,18 +277,11 @@ export default {
       if (_.indexOf(['minLength', 'maxLength'], option) > -1) {
         return 'numeric'
       } else if (_.indexOf(['minimum', 'maximum'], option) > -1) {
-        let type = this.typeProperty
-        if (type === 'integer') {
-          return 'numeric'
-        } else if (type === 'number') {
-          return 'decimal'
-        } else {
-          // console.log('No validation rules to apply this type for constraints: min/max')
-        }
+        return this.validationRules(this.typeProperty)
       } else {
         // console.log('No validation rules to apply this constraint')
+        return ''
       }
-      return ''
     },
     updateConstraintInputKeyValues: function() {
       // console.log('update constraint checked....')
@@ -355,11 +344,11 @@ export default {
   },
   mounted: function() {
     let vueUpdateAllTablesAllColumnsNames = this.updateAllTablesAllColumnsNames
-    this.$subscribeTo(activeHotAllColumnNames$, function(result) {
+    this.$subscribeTo(allTablesAllColumnNames$, function(result) {
       console.log(`names in subscription`)
       vueUpdateAllTablesAllColumnsNames(result)
     })
-    activeHotAllColumnNames$.next(this.getAllHotTablesColumnNames())
+    allTablesAllColumnNames$.next(this.getAllHotTablesColumnNames())
   },
   destroyed: function() {
     // console.log('panel destroyed')
diff --git a/src/renderer/partials/ForeignKeys.vue b/src/renderer/partials/ForeignKeys.vue
index ea17cd64d..e02626896 100644
--- a/src/renderer/partials/ForeignKeys.vue
+++ b/src/renderer/partials/ForeignKeys.vue
@@ -1,14 +1,46 @@
 <template>
-  <div id="foreignKeyFields">
-    <component v-show="enableLocalHeaders" is="tableheaderkeys" :activeNames="activeLocalNames" :selectedKeys="selectedLocalKeys"/>
-    <component v-show="enableForeignTable" is="tablekeys" :activeTableNames="activeTableNames" :selectedTableKeys="selectedTableKeys"/>
-    <component v-show="enableForeignHeaders" is="tableheaderkeys" :activeNames="activeForeignNames" :selectedKeys="selectedForeignKeys"/>
+<div id="foreignKeyFields">
+  <div v-for="(foreignKey,index) in hotIdAllForeignKeys" class="foreign col-sm-12">
+    <div class="inputs-container">
+      <component is="tableheaderkeys" :activeNames="localHeaderNames" :getSelectedKeys="foreignKey.fields" :pushSelectedKeys="pushSelectedLocalKeys(index)" />
+      <component v-show="enableComponent(foreignKey.fields)" is="tablekeys" :allTableNames="allTableNames" :getSelectedTable="foreignKey.reference.resource" :pushSelectedTable="pushSelectedForeignTable(index)" />
+      <component v-show="enableComponent(foreignKey.reference.resource)" is="tableheaderkeys" :activeNames="getForeignHeaderNames(foreignKey.reference.resource)" :getSelectedKeys="foreignKey.reference.fields" :pushSelectedKeys="pushSelectedForeignKeys(index)"/>
+    </div>
+    <button v-show="hotIdAllForeignKeys.length > 1" type="button" class="btn btn-danger btn-sm" @click="removeForeignKey(index)">
+      <span class="glyphicon glyphicon-minus"/>
+    </button>
   </div>
+  <div class="button-container">
+    <button type="button" class="add-foreign btn btn-primary btn-sm" @click="addForeignKey()">
+      <span class="glyphicon glyphicon-plus"/>Add Foreign Key
+    </button>
+  </div>
+</div>
 </template>
 <script>
 import tablekeys from '../partials/TableKeys'
 import tableheaderkeys from '../partials/TableHeaderKeys'
 import RelationKeys from '../mixins/RelationKeys'
+import {
+  pushAllTabTitlesSubscription
+} from '@/store/modules/tabs.js'
+import {
+  mapMutations,
+  mapGetters
+} from 'vuex'
+import {
+  Subscription
+} from 'rxjs/Subscription'
+import {
+  allTabsTitles$,
+  selectedForeignTable$,
+  allTablesAllColumnNames$
+} from '@/rxSubject.js'
+import VueRx from 'vue-rx'
+import Vue from 'vue'
+Vue.use(VueRx, {
+  Subscription
+})
 export default {
   components: {
     tablekeys,
@@ -16,53 +48,165 @@ export default {
   },
   mixins: [RelationKeys],
   name: 'foreignkeys',
-  props: ['setProperty', 'getPropertyGivenHotId', 'propertyName'],
+  props: ['setProperty', 'getPropertyGivenHotId', 'propertyName', 'currentHotId'],
   data() {
     return {
-      enableLocalHeaders: true,
-      enableForeignTable: true,
-      enableForeignHeaders: true,
-      selectedLocalKeys: [],
-      activeLocalNames: [],
-      selectedTableKeys: [],
-      activeTableNames: [],
+      localHeaderNames: [],
+      foreignHeaderNames: [],
+      hotIdAllForeignKeys: [],
+      // enableForeignTable: true,
+      allTableNames: [],
+      // enableForeignHeaders: true,
       selectedForeignKeys: [],
-      activeForeignNames: []
+      allTabTableNames: []
+      // debounceUpdateTableSelections: _.debounce(this.updateTableSelections, 100, {
+      //   'leading': false,
+      //   'trailing': true
+      // })
     }
   },
-  watch: {
-    selectedLocalKeys: function(values) {
-      this.enableForeignTable = (values && values.length > 0)
-      // this.setProperty(this.propertyName, values)
+  computed: {
+    emptyForeignKey() {
+      return {
+        fields: [],
+        reference: {
+          resource: '',
+          fields: []
+        }
+      }
+    }
+  },
+  subscriptions() {
+    return {
+      allTablesAllColumnNames: allTablesAllColumnNames$
     }
   },
   methods: {
-    updateSubscriptions: function(names, hotId) {
-      this.updateActiveLocalNames(names)
-      // this.updateSelectedLocalKeys(hotId)
-      // this.updateActiveTableNames(names)
-      // this.updateSelectedTableKeys(hotId)
-      // this.updateActiveForeignNames(names)
-      // this.updateSelectedForeignKeys(hotId)
+    removeForeignKey: function(index) {
+      this.hotIdAllForeignKeys.splice(index, 1)
+      this.setProperty(this.propertyName, this.hotIdAllForeignKeys)
+      console.log(this.hotIdAllForeignKeys)
+      this.$forceUpdate()
+    },
+    addForeignKey: function() {
+      this.hotIdAllForeignKeys.push(this.emptyForeignKey)
+      this.setProperty(this.propertyName, this.hotIdAllForeignKeys)
+      console.log(this.hotIdAllForeignKeys)
+      this.$forceUpdate()
+    },
+    allForeignKeyValues: function(localHotId) {
+      console.log('before checking foreign key values...')
+      console.log(localHotId)
+      let foreignKeys = this.getPropertyGivenHotId(this.propertyName, localHotId)
+      if (!foreignKeys) {
+        console.log('have to reset foreign keys...')
+        foreignKeys = [{
+          fields: [],
+          reference: {
+            resource: '',
+            fields: []
+          }
+        }]
+        this.setProperty(this.propertyName, foreignKeys)
+      }
+      console.log('now all foreign key values...')
+      console.log(foreignKeys)
+      return foreignKeys
+    },
+    getHotIdFromTabTitle: function(tableName) {
+      let tabId = _.findKey(this.allTabTableNames, function(o) {
+        return o === tableName
+      })
+      console.log(`tab id found is ${tabId}`)
+      let hotId = this.getTabId(tabId)
+      console.log(`hot id found is ${hotId}`)
+      return hotId
     },
-    updateActiveLocalNames: function(names) {
-      this.activeLocalNames = _.without(names, '')
+    getForeignHeaderNames: function(value) {
+      let hotId = this.getHotIdFromTabTitle(value)
+      let foreignHeaderNames = this.getHotIdHeaderNames(this.allTablesAllColumnNames, hotId)
+      console.log(foreignHeaderNames)
+      return foreignHeaderNames
     },
-    updateSelectedTableKeys: function(hotId) {
-      this.selectedKeys = this.getPropertyGivenHotId(this.propertyName, hotId) || []
+    updateForeignHeaderNames: function(value) {
+      let hotId = this.getHotIdFromTabTitle(value)
+      this.foreignHeaderNames.length = 0
+      this.foreignHeaderNames.push(...this.getHotIdHeaderNames(this.allTablesAllColumnNames, hotId))
     },
-    updateActiveTableNames: function(names) {
-      this.activeNames = _.without(names, '')
+    updateSubscriptions: async function(allTablesAllColumnNames) {
+      console.log('updated subscriptions in foreign keys...')
+      try {
+        let localHotId = await this.currentHotId()
+        this.localHeaderNames.length = 0
+        this.localHeaderNames.push(...this.getHotIdHeaderNames(allTablesAllColumnNames, localHotId))
+        this.hotIdAllForeignKeys.length = 0
+        let allForeignKeyValues = this.allForeignKeyValues(localHotId)
+        this.hotIdAllForeignKeys.push(...allForeignKeyValues)
+      } catch (err) {
+        console.log('Problem with updating subscriptions', err)
+      }
     },
-    updateSelectedLocalKeys: function(hotId) {
-      this.selectedKeys = this.getPropertyGivenHotId(this.propertyName, hotId) || []
+    getTabsTableNames: function(allTabsTableNames) {
+      let tableNames = []
+      _.forEach(allTabsTableNames, function(name, tabId) {
+        tableNames.push(name)
+      })
+      return _.pull(tableNames, '', null, undefined)
     },
-    updateActiveForeignlNames: function(names) {
-      this.activeNames = _.without(names, '')
+    updateTableSubscriptions: function(allTabsTitles) {
+      console.log('received foreign tables subscription...')
+      this.allTableNames = this.getTabsTableNames(allTabsTitles)
+      this.allTabTableNames = allTabsTitles
     },
-    updateSelectedForeignKeys: function(hotId) {
-      this.selectedKeys = this.getPropertyGivenHotId(this.propertyName, hotId) || []
+    enableComponent: function(value) {
+      let hasValue = false
+      if (value) {
+        if (typeof value === 'string') {
+          hasValue = value.trim() !== ''
+        } else {
+          hasValue = !_.isEmpty(value)
+        }
+      }
+      return hasValue
+    },
+    pushSelectedLocalKeys: function(index) {
+      let vueSetProperty = this.setProperty
+      let vuePropertyName = this.propertyName
+      return function(values) {
+        vueSetProperty(`${vuePropertyName}[${index}].fields`, values)
+      }
+    },
+    pushSelectedForeignKeys: function(index) {
+      let vueSetProperty = this.setProperty
+      let vuePropertyName = this.propertyName
+      return function(values) {
+        vueSetProperty(`${vuePropertyName}[${index}].reference.fields`, values)
+      }
+    },
+    pushSelectedForeignTable: function(index) {
+      let vueSetProperty = this.setProperty
+      let vuePropertyName = this.propertyName
+      return function(value) {
+        vueSetProperty(`${vuePropertyName}[${index}].reference.resource`, value)
+      }
+    }
+  },
+  created: function() {
+    let vueUpdateTableSubscriptions = this.updateTableSubscriptions
+    this.$subscribeTo(allTabsTitles$, async function(allTabsTitles) {
+      console.log('received next tab subscription...')
+      console.log(allTabsTitles)
+      vueUpdateTableSubscriptions(allTabsTitles)
+    })
+  },
+  watch: {
+    getActiveTab: async function() {
+      console.log('got active tab in foreign relation keys')
     }
+  },
+  mounted: function() {
+    console.log('firing mount...')
+    pushAllTabTitlesSubscription()
   }
 }
 </script>
diff --git a/src/renderer/partials/PackageProperties.vue b/src/renderer/partials/PackageProperties.vue
index 2cd9549bb..4c5030891 100644
--- a/src/renderer/partials/PackageProperties.vue
+++ b/src/renderer/partials/PackageProperties.vue
@@ -2,12 +2,10 @@
 <form class="navbar-form form-horizontal" id="packageProperties">
   <div class="form-group-sm row container-fluid">
     <div class="propertyrow" v-for="(formprop, index) in formprops" :key="index">
-      <template v-if="formprop.type !== 'hidden'">
-        <label class="control-label col-sm-3" :for="formprop.label">{{formprop.label}}{{formprop.isMandatory ? '*' : ''}}:</label>
-        <component v-if="isSharedComponent(formprop.label)" :getProperty="getProperty" :getPropertyGivenHotId="getPropertyGivenHotId" :setProperty="setProperty" :waitForHotIdFromTabId="waitForHotIdFromTabId" :is="formprop.label"/>
-        <!-- <input v-else type="text" class="form-control input-sm col-sm-9" :id="formprop.label" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)"/> -->
-        <input v-else type="text" class="{ 'form-control input-sm col-sm-9': true, 'validate-danger': errors.has(formprop.label) }" :id="formprop.label" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)" v-validate="validationRules(formprop.label)" :name="formprop.label"/>
-      </template>
+      <label class="control-label col-sm-3" :for="formprop.label">{{formprop.label}}{{formprop.isMandatory ? '*' : ''}}:</label>
+      <component v-if="isSharedComponent(formprop.label)" :getProperty="getProperty" :getPropertyGivenHotId="getPropertyGivenHotId" :setProperty="setProperty" :waitForHotIdFromTabId="waitForHotIdFromTabId" :is="formprop.label"/>
+      <!-- <input v-else type="text" class="form-control input-sm col-sm-9" :id="formprop.label" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)"/> -->
+      <input v-else type="text" class="{ 'form-control input-sm col-sm-9': true, 'validate-danger': errors.has(formprop.label) }" :id="formprop.label" :value="getProperty(formprop.label)" @input="setProperty(formprop.label, $event.target.value)" v-validate="validationRules(formprop.label)" :name="formprop.label"/>
       <div v-show="errors.has(formprop.label) && removeProperty(formprop.label)" class="row help validate-danger">
         {{ errors.first(formprop.label)}}
       </div>
@@ -19,6 +17,8 @@
 import SideNav from './SideNav'
 import licenses from '../partials/Licenses'
 import sources from '../partials/Sources'
+import PackageTooltip from '../mixins/PackageTooltip'
+import ValidationRules from '../mixins/ValidationRules'
 import {
   mapMutations,
   mapState,
@@ -27,6 +27,7 @@ import {
 export default {
   extends: SideNav,
   name: 'packager',
+  mixins: [ValidationRules, PackageTooltip],
   components: {
     licenses,
     sources
@@ -36,36 +37,45 @@ export default {
       formprops: [{
         label: 'name',
         type: 'input',
-        isMandatory: true
+        isMandatory: true,
+        tooltipId: 'tooltip-package-name',
+        tooltipView: 'tooltipPackageName'
       },
       {
         label: 'id',
-        type: 'input'
-      },
-      {
-        label: 'profile',
-        type: 'hidden',
-        value: 'tabular-data-package'
+        type: 'input',
+        tooltipId: 'tooltip-package-id',
+        tooltipView: 'tooltipPackageId'
       },
       {
         label: 'title',
-        type: 'input'
+        type: 'input',
+        tooltipId: 'tooltip-package-title',
+        tooltipView: 'tooltipPackageTitle'
       },
       {
         label: 'description',
-        type: 'markdown'
+        type: 'markdown',
+        tooltipId: 'tooltip-package-description',
+        tooltipView: 'tooltipPackageDescription'
       },
         // lead user through with http://frictionlessdata.io/specs/patterns/#data-package-version
       {
         label: 'version',
-        type: 'input'
+        type: 'input',
+        tooltipId: 'tooltip-package-version',
+        tooltipView: 'tooltipPackageVersion'
       },
       {
         label: 'sources',
-        type: 'dropdown'
+        type: 'dropdown',
+        tooltipId: 'tooltip-package-sources',
+        tooltipView: 'tooltipPackageSources'
       },
       {
-        label: 'licenses'
+        label: 'licenses',
+        tooltipId: 'tooltip-package-licenses',
+        tooltipView: 'tooltipPackageLicenses'
       }
       ]
     }
@@ -87,6 +97,8 @@ export default {
       return this.getProperty(key)
     },
     setProperty: function(key, value) {
+      console.log(`setting property for package...`)
+      console.log(`key ${key} , value: ${value}`)
       this.pushPackageProperty({
         key: key,
         value: value
@@ -96,40 +108,7 @@ export default {
       let value = ''
       this.setProperty(key, value)
       return true
-    },
-    validationRules: function(name) {
-      if (name === 'version') {
-        return {
-          rules: {
-            regex: /[\d]+\.[\d+]+\.[\d]/
-          }
-        }
-      }
-      return ''
-    }
-  },
-  beforeCreate: function() {
-    this.$nextTick(function() {
-      // set hidden inputs
-      let found = this.formprops.forEach(x => {
-        if (x.type === 'hidden') {
-          this.setProperty(x.label, x.value)
-        }
-      })
-    })
-  },
-  watch: {},
-  mounted: function() {
-    const dict = {
-      en: {
-        custom: {
-          version: {
-            regex: 'The version field must comply with semantic versioning.'
-          }
-        }
-      }
     }
-    this.$validator.updateDictionary(dict)
   }
 }
 </script>
diff --git a/src/renderer/partials/PrimaryKeys.vue b/src/renderer/partials/PrimaryKeys.vue
index ad917735c..1931de81e 100644
--- a/src/renderer/partials/PrimaryKeys.vue
+++ b/src/renderer/partials/PrimaryKeys.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="primaryKeys">
-    <component is="tableheaderkeys" :activeNames="activeNames" :getSelectedKeys="getSelectedKeys" :pushSelectedKeys="pushSelectedKeys"/>
+    <component is="tableheaderkeys" :activeNames="localHeaderNames" :getSelectedKeys="getSelectedKeys" :pushSelectedKeys="pushSelectedKeys"/>
   </div>
 </template>
 <script>
@@ -12,33 +12,28 @@ export default {
   },
   mixins: [RelationKeys],
   name: 'primarykeys',
-  props: ['setProperty', 'getPropertyGivenHotId', 'propertyName', 'currentHotId'],
   data() {
     return {
-      activeNames: [],
-      hotId: false
+      localHeaderNames: [],
+      selectedLocalKeys: []
+    }
+  },
+  props: ['setProperty', 'getPropertyGivenHotId', 'propertyName', 'currentHotId'],
+  computed: {
+    getSelectedKeys() {
+      return this.selectedLocalKeys
     }
   },
   methods: {
-    updateSubscriptions: function(names, hotId) {
-      console.log('updated primary key subscriptions')
-      this.updateActiveNames(names)
-      this.hotId = hotId
-      let values = this.getPropertyGivenHotId(this.propertyName, hotId)
-      this.pushSelectedKeys(values)
-    },
-    updateActiveNames: function(names) {
-      this.activeNames = _.without(names, '')
-    },
-    getSelectedKeys: function() {
-      console.log('before in primary keys')
-      console.log(`hot id is ${this.hotId}`)
-      if (this.hotId) {
-        return this.getPropertyGivenHotId(this.propertyName, this.hotId) || []
-      } else {
-        return []
-      }
+    updateSubscriptions: async function(allTablesAllColumns) {
+      let localHotId = await this.currentHotId()
+      this.localHeaderNames.length = 0
+      this.localHeaderNames.push(...this.getHotIdHeaderNames(allTablesAllColumns, localHotId))
+      this.selectedLocalKeys.length = 0
+      let values = this.getPropertyGivenHotId(this.propertyName, localHotId) || []
+      this.selectedLocalKeys.push(...values)
     },
+
     pushSelectedKeys: function(values) {
       console.log(`property name before push is ${this.propertyName}`)
       console.log(values)
diff --git a/src/renderer/partials/Sources.vue b/src/renderer/partials/Sources.vue
index b2b2547b4..5704d57ab 100644
--- a/src/renderer/partials/Sources.vue
+++ b/src/renderer/partials/Sources.vue
@@ -7,9 +7,9 @@
           <input class="form-control input-sm" :value="source[prop]" @input="setSourceProp(index, prop, $event.target.value)" type="text" />
         </div>
       </div>
-        <button v-show="getSources.length > 1" type="button" class="btn btn-danger btn-sm" @click="removeSource(index)">
-          <span class="glyphicon glyphicon-minus"/>
-        </button>
+      <button v-show="getSources.length > 1" type="button" class="btn btn-danger btn-sm" @click="removeSource(index)">
+        <span class="glyphicon glyphicon-minus"/>
+      </button>
     </div>
     <div class="button-container">
       <button type="button" class="add-source btn btn-primary btn-sm" @click="addSource()">
diff --git a/src/renderer/partials/TableHeaderKeys.vue b/src/renderer/partials/TableHeaderKeys.vue
index e60eb3a3c..e1f769122 100644
--- a/src/renderer/partials/TableHeaderKeys.vue
+++ b/src/renderer/partials/TableHeaderKeys.vue
@@ -10,10 +10,12 @@ export default {
   computed: {
     selectedKeys: {
       get: function() {
-        return this.getSelectedKeys()
+        return this.getSelectedKeys || []
       },
-      set: function(values) {
-        this.pushSelectedKeys(values)
+      set: function(value) {
+        if (value !== '') {
+          this.pushSelectedKeys(value)
+        }
       }
     }
   }
diff --git a/src/renderer/partials/TableKeys.vue b/src/renderer/partials/TableKeys.vue
index 9475041b6..8e1d24661 100644
--- a/src/renderer/partials/TableKeys.vue
+++ b/src/renderer/partials/TableKeys.vue
@@ -1,11 +1,23 @@
 <template>
-  <select v-model="selectedTableKeys" class="form-control input-sm col-sm-9">
-    <option v-for="tableName in activeTableNames" :value="tableName">{{tableName}}</option>
+  <select class="form-control input-sm col-sm-9" :value="getSelectedTable" @input="pushSelectedTable($event.target.value)">
+    <option v-for="tableName in allTables" :key="tableName" :id="tableName" :value="tableName">{{tableName}}</option>
   </select>
 </template>
 <script>
+import { Subscription } from 'rxjs/Subscription'
+import {selectedForeignTable$} from '@/rxSubject.js'
+import VueRx from 'vue-rx'
+import Vue from 'vue'
+Vue.use(VueRx, {
+  Subscription
+})
 export default {
   name: 'tablekeys',
-  props: ['activeTableNames', 'selectedTableKeys']
+  props: ['allTableNames', 'pushSelectedTable', 'getSelectedTable'],
+  computed: {
+    allTables() {
+      return this.allTableNames || []
+    }
+  }
 }
 </script>
diff --git a/src/renderer/partials/TableProperties.vue b/src/renderer/partials/TableProperties.vue
index d8d3b295f..00c80c743 100644
--- a/src/renderer/partials/TableProperties.vue
+++ b/src/renderer/partials/TableProperties.vue
@@ -31,14 +31,15 @@ import {
   HotRegister
 } from '../hot.js'
 import TableTooltip from '../mixins/TableTooltip'
-import {
-  Validator
-} from 'vee-validate'
+import ValidationRules from '../mixins/ValidationRules'
+// import {
+//   Validator
+// } from 'vee-validate'
 Vue.use(AsyncComputed)
 export default {
   extends: SideNav,
   name: 'tabular',
-  mixins: [TableTooltip],
+  mixins: [ValidationRules, TableTooltip],
   components: {
     licenses,
     sources,
@@ -64,12 +65,11 @@ export default {
         tooltipId: 'tooltip-table-primary-keys',
         tooltipView: 'tooltipTablePrimaryKeys'
       },
-        // {
-        //   label: 'foreign key(s)',
-        //   // type: 'tableKeys',
-        //   key: 'foreignKeys'
-        // },
-
+      {
+        label: 'foreign key(s)',
+        // type: 'tableKeys',
+        key: 'foreignKeys'
+      },
       {
         label: 'description',
         tooltipId: 'tooltip-table-description',
@@ -111,16 +111,6 @@ export default {
     ...mapMutations([
       'pushTableSchemaDescriptorProperty', 'pushTableProperty'
     ]),
-    validationRules: function(label) {
-      if (label === 'name') {
-        return {
-          required: true,
-          regex: /^([-a-z0-9._/])+$/,
-          unique_name: true
-        }
-      }
-      return ''
-    },
     getArrayValues: async function(key) {
       let tabId = this.getActiveTab
       let values = await this.getArrayValuesFromTabId(key, tabId)
@@ -176,18 +166,8 @@ export default {
       return true
     }
   },
-  created: function() {
-    const dictionary = {
-      en: {
-        custom: {
-          name: {
-            regex: () => 'The name field format is invalid. It must consist only of lowercase alphanumeric characters plus ".", "-" and "_".'
-          }
-        }
-      }
-    }
-    Validator.updateDictionary(dictionary)
-    Validator.extend('unique_name', {
+  mounted: function() {
+    this.$validator.extend('unique_name', {
       getMessage: field => `There is already another tab with this ${field}.`,
       validate: value => new Promise((resolve) => {
         let currentNames = _.values(_.mapValues(this.getHotTabs, function(hotTab) {
diff --git a/src/renderer/rxSubject.js b/src/renderer/rxSubject.js
index 33cd48002..3ddc15808 100644
--- a/src/renderer/rxSubject.js
+++ b/src/renderer/rxSubject.js
@@ -4,9 +4,12 @@ import { Subscription } from 'rxjs/Subscription'
 import 'rxjs/add/observable/fromPromise'
 // import Rx from 'rxjs/Rx'
 
-let activeHotAllColumnNames$ = new Subject()
+let allTablesAllColumnNames$ = new Subject()
 let activeTab$ = new Subject()
 let hotIdFromTab$ = new Subject()
+let allTabsTitles$ = new Subject()
+let selectedForeignTable$ = new Subject()
+// let getSelectedLocalKeys$ = new Subject()
 
 export function onNextHotIdFromTabRx(asyncFunction) {
   let subject = hotIdFromTab$
@@ -33,5 +36,8 @@ export function onNextSubjectFromPromise(subject, promise) {
 export {
   hotIdFromTab$,
   activeTab$,
-  activeHotAllColumnNames$
+  allTablesAllColumnNames$,
+  allTabsTitles$,
+  selectedForeignTable$
+  // getSelectedLocalKeys$
 }
diff --git a/src/renderer/store/modules/hots.js b/src/renderer/store/modules/hots.js
index cf6d8f542..273b38cd0 100644
--- a/src/renderer/store/modules/hots.js
+++ b/src/renderer/store/modules/hots.js
@@ -83,6 +83,10 @@ const getters = {
       }
     })
   },
+  getTabId: (state, getters) => (tabId) => {
+    let hotId = _.findKey(state.hotTabs, {tabId: tabId})
+    return hotId
+  },
   getProvenance: state => {
     return state.provenanceProperties
   },
@@ -96,6 +100,11 @@ const getters = {
     return hotColumnProperties[property.key]
   },
   getTableProperty: (state, getters) => (property) => {
+    // console.log('incoming table property for table property get...')
+    // console.log(property)
+    // console.log('attempting to fetch table properties...')
+    // console.log(property)
+    // console.log(state.hotTabs[property.hotId])
     let tableProperties = state.hotTabs[property.hotId].tableProperties || {}
     return tableProperties[property.key]
   },
@@ -142,11 +151,14 @@ const mutations = {
     // console.log(`incoming property is...`)
     // console.log(property)
     _.set(state.hotTabs, `${property.hotId}.columnProperties[${property.columnIndex}].${property.key}`, property.value)
-    console.log('pushed column property complete')
-    console.log(state.hotTabs)
+    // console.log('pushed column property complete')
+    // console.log(state.hotTabs)
   },
   pushTableProperty(state, property) {
     _.set(state.hotTabs, `${property.hotId}.tableProperties.${property.key}`, property.value)
+    // console.log(`table property:`)
+    // console.log(property)
+    console.log('pushed...')
     console.log(state.hotTabs)
   },
   // TODO : schema fields has simply been incorporated into overwriting column properties - remove legacy methods
@@ -159,7 +171,8 @@ const mutations = {
   },
   pushPackageProperty(state, property) {
     _.set(state.packageProperties, property.key, property.value)
-    console.log(state.packageProperties)
+    console.log('package properties pushed...')
+    console.log(state)
   },
   pushMissingValues(state, hotMissingValues) {
     let hotId = hotMissingValues.hotId
@@ -190,7 +203,11 @@ const mutations = {
     _.unset(state.hotTabs, hotId)
   },
   resetAllColumnPropertiesForHotId(state, hotId) {
-    state.hotTabs[hotId].columnProperties = []
+    if (state.hotTabs[hotId].columnProperties) {
+      state.hotTabs[hotId].columnProperties.length = 0
+    } else {
+      state.hotTabs[hotId].columnProperties = []
+    }
   },
   resetColumnPropertiesForHotId(state, property) {
     state.hotTabs[property.hotId].columnProperties[property.columnIndex] = {}
diff --git a/src/renderer/store/modules/tabs.js b/src/renderer/store/modules/tabs.js
index 0ce628867..51b559f61 100644
--- a/src/renderer/store/modules/tabs.js
+++ b/src/renderer/store/modules/tabs.js
@@ -1,6 +1,10 @@
 import {ipcRenderer as ipc} from 'electron'
 import {setActiveGlobal, extractNameFromFile, resetGlobalFilenames} from '@/store/tabStoreUtilities'
-import {activeTab$} from '@/rxSubject.js'
+import {activeTab$, allTabsTitles$} from '@/rxSubject.js'
+
+export function pushAllTabTitlesSubscription() {
+  allTabsTitles$.next(getters.getAllTabTitles(state))
+}
 
 const state = {
   tabs: [],
@@ -37,6 +41,17 @@ const getters = {
       if (value.filename) { filtered.push(value.filename) }
     })
     return filtered
+  },
+  getAllTabTitles: state => {
+    let allTabTitles = {}
+    console.log('tab titles are before...')
+    console.log(state.tabObjects)
+    _.forEach(state.tabObjects, function(object, tabId) {
+      allTabTitles[tabId] = object.title
+    })
+    console.log(`tab titles are:`)
+    console.log(allTabTitles)
+    return allTabTitles
   }
 }
 
@@ -52,8 +67,11 @@ const mutations = {
       title = `Untitled${tab.index}`
     }
     _.set(state.tabObjects, `${tab.id}.title`, title)
+    // allTabsTitles$.next(getters.getAllTabTitles(state))
+    pushAllTabTitlesSubscription()
   },
   pushTabObject(state, tab) {
+    console.log('pushing tab object...')
     if (tab.filename) {
       _.set(state.tabObjects, `${tab.id}.filename`, tab.filename)
       let title = extractNameFromFile(tab.filename)
@@ -62,6 +80,8 @@ const mutations = {
       setActiveGlobal(tab.filename, title)
       resetGlobalFilenames(getters.getTabFilenames(state))
       ipc.send('toggleSaveMenu')
+      // allTabsTitles$.next(getters.getAllTabTitles(state))
+      pushAllTabTitlesSubscription()
     }
   },
   removeTab (state, tabId) {
@@ -81,9 +101,14 @@ const mutations = {
     resetGlobalFilenames(getters.getTabFilenames(state))
     ipc.send('toggleSaveMenu')
     activeTab$.next(tabId)
+    console.log(state.tabs)
+    console.log(state.tabObjects)
   },
   setTabsOrder (state, tabIdOrder) {
-    state.tabs = tabIdOrder
+    console.log('resetting tabs...')
+    state.tabs.length = 0
+    state.tabs.push(...tabIdOrder)
+    console.log(state.tabs)
   },
   incrementTabIndex(state) {
     state.tabIndex++
@@ -91,6 +116,8 @@ const mutations = {
   destroyTabObject(state, tabId) {
     _.unset(state.tabObjects, tabId)
     resetGlobalFilenames(getters.getTabFilenames(state))
+    pushAllTabTitlesSubscription()
+    // allTabsTitles$.next(getters.getAllTabTitles(state))
   }
 }
 
diff --git a/src/renderer/store/tabStoreUtilities.js b/src/renderer/store/tabStoreUtilities.js
index 8011577f5..24925c6c5 100644
--- a/src/renderer/store/tabStoreUtilities.js
+++ b/src/renderer/store/tabStoreUtilities.js
@@ -9,7 +9,8 @@ export function setActiveGlobal(filename, title) {
 export function resetGlobalFilenames(filenames) {
   // console.log('have current tab filenames...')
   // console.log(filenames)
-  remote.getGlobal('tab').filenames = filenames
+  remote.getGlobal('tab').filenames.length = 0
+  remote.getGlobal('tab').filenames.push(...filenames)
   // console.log('remote global is...')
   // console.log(remote.getGlobal('tab'))
 }
diff --git a/static/css/foreignkeys.styl b/static/css/foreignkeys.styl
index b844ce03f..3c0706d67 100644
--- a/static/css/foreignkeys.styl
+++ b/static/css/foreignkeys.styl
@@ -3,8 +3,30 @@
   width 100% !important
   // float right
   overflow auto
-  select
-    // width 100%
+  .foreign
+    margin-right 0
+    padding-right 0
+    padding-left 0
+    margin-bottom 5px
+    display block
+    .inputs-container
+      display inline-block
+      width 90%
+      float left
+      select
+        width 100%
+        float right
+        overflow-x auto
+        margin-bottom 10px
+button
+  height 100% !important
+  min-height 100% !important
+  margin 30px 0px 30px 5px
+  padding 5px 8px 5px 8px
+.button-container
+  width 100%
+  overflow hidden
+  display block
+  button.add-foreign
+    display block
     float right
-    overflow-x auto
-    margin-bottom 10px
diff --git a/static/css/panel.styl b/static/css/panel.styl
index 2b37da5dd..80665d5f4 100644
--- a/static/css/panel.styl
+++ b/static/css/panel.styl
@@ -58,7 +58,9 @@ sideNavColor = #337ab7
   height 85% !important
   width 100%
   margin-bottom 0
-  &.opened
+  &.messages-closed
+    margin-bottom 0
+  &.messages-opened
     margin-bottom 150px !important
 #csvEditor
   height 90%
@@ -75,7 +77,7 @@ sideNavColor = #337ab7
   height 100%
   width 100%
   .editor
-    overflow: scroll
+    overflow: hidden
     height: 100%
     width 100%
 
@@ -209,9 +211,20 @@ sideNavFooterHeight = 70px
   left 0
   z-index 200 !important
   transition: 0.5s
-  &.opened
+  &.messages-closed
+    height 0
+  &.messages-opened
     height 150px !important
     overflow-y scroll
+  &.closed
+    margin-left 0
+    padding-right 5px
+  &.left
+    margin-left sideNavMargin
+    padding-right sideNavMargin
+  &.right
+    padding-right sideNavMargin
+    margin-left 0
 
 #sidenav-footer
   z-index 100
diff --git a/test/features/.nav b/test/features/.nav
index 04aa3bc58..0a2774645 100644
--- a/test/features/.nav
+++ b/test/features/.nav
@@ -28,6 +28,7 @@
   - delete-columns.feature
   - data-entry.feature
 - tools:
+  - freeze-header-row.feature
   - guess-column-properties.feature
   - set-column-properties.feature
   - set-table-properties.feature
diff --git a/test/features/drafts/header-row.feature b/test/features/drafts/header-row.feature
deleted file mode 100644
index d8277a928..000000000
--- a/test/features/drafts/header-row.feature
+++ /dev/null
@@ -1,33 +0,0 @@
-Feature: Header Row
-  As a Data Packager
-  I want specify if my table has a header row
-  So that it is not included in "Sort Column" commands and is Frozen at the top of the table when scrolling
-
-  Notes:
-  - see https://handsontable.com/examples.html?headers&sorting
-  - see https://electron.atom.io/docs/api/menu-item/#menuitemchecked
-
-  Header Row can be toggled on/off by a checkbox menu item
-  The default setting for Header Row is "on" (checked)
-
-  In future releases:
-  - Header row value may be set by the CSV Dialect for the Table
-  - Header row default value may be set in Preferences
-
-  Scenario: Header Row On
-    Given I have opened Data Curator
-    And I have 1 data tab open
-    When I set "Header Row" to "on"
-    Then freeze the first Row
-    And prevent the header row from being edited
-    And use each header row value to invoke "Sort Column"
-    And check the Header Row menu item
-
-  Scenario: Header Row Off
-    Given I have opened Data Curator
-    And I have 1 data tab open
-    And "Header Row" is on
-    When I set "Header Row" to "off"
-    Then unfreeze the first Row
-    And use generic column labels to invoke "Sort Column"
-    And uncheck the Header Row menu item
diff --git a/test/features/help/edit-keyboard-shortcuts.feature b/test/features/other/edit-keyboard-shortcuts.feature
similarity index 100%
rename from test/features/help/edit-keyboard-shortcuts.feature
rename to test/features/other/edit-keyboard-shortcuts.feature
diff --git a/test/features/other/freeze-header-row.feature b/test/features/tools/freeze-header-row.feature
similarity index 100%
rename from test/features/other/freeze-header-row.feature
rename to test/features/tools/freeze-header-row.feature
diff --git a/test/features/version_2/import-column-properties.feature b/test/features/version_2/import-column-properties.feature
index c6df14ae8..997bd44cd 100644
--- a/test/features/version_2/import-column-properties.feature
+++ b/test/features/version_2/import-column-properties.feature
@@ -1,6 +1,6 @@
 Feature: Import Column Properties
   As a Data Packager
-  I want access a library of pre-defined column properties
+  I want access a [library of pre-defined column properties](https://github.com/Stephen-Gates/table-schema-snippets/blob/master/mobile-phone-number-au.json)
   So that I can quickly and consistently apply column properties to similar data
 
   Scenario: Import Column Properties
diff --git a/test/features/version_2/set-preferences-configuration-file.feature b/test/features/version_2/set-preferences-configuration-file.feature
index d4b15e602..0051e953b 100644
--- a/test/features/version_2/set-preferences-configuration-file.feature
+++ b/test/features/version_2/set-preferences-configuration-file.feature
@@ -6,12 +6,14 @@ Feature: Set Preferences using Configuration File
   The configuration file may have a default value for each preference setting.
   The configuration file will be json.
   Sample json will be provided
-  Customer to edit edit and place in required location for Data Curator to read on launch
+  Customer to edit and place in required location for Data Curator to read on launch
 
   Customer determines if json import is correct by launching Data Curator
 
   If a default value in the configuration file is invalid or missing, it is ignored
 
+  Preferences to be retained across application updated
+
 Scenario: Set Preferences using Configuration File
   Given I have defined a Configuration file
   When I open Data Curator
diff --git a/yarn.lock b/yarn.lock
index 914f8d075..c034351fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4076,10 +4076,6 @@ follow-redirects@^1.2.3:
   dependencies:
     debug "^3.1.0"
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"