diff --git a/src/lib/js/components/columns/column.js b/src/lib/js/components/columns/column.js
index 8c54b0eb..e602fcf7 100644
--- a/src/lib/js/components/columns/column.js
+++ b/src/lib/js/components/columns/column.js
@@ -108,7 +108,9 @@ export default class Column extends Component {
 
   // loops through children and refresh their edit panels
   refreshFieldPanels = () => {
-    this.children.forEach(field => field.panels.nav.refresh())
+    for (const field of this.children) {
+      field.panels.nav.refresh()
+    }
   }
 
   /**
diff --git a/src/lib/js/components/fields/edit-panel.js b/src/lib/js/components/fields/edit-panel.js
index e5327326..0c6a9bd4 100644
--- a/src/lib/js/components/fields/edit-panel.js
+++ b/src/lib/js/components/fields/edit-panel.js
@@ -161,18 +161,23 @@ export default class EditPanel {
     const metaId = this.field.data.meta.id
     const fieldOptionData = this.field.get('options')
     const type = metaId === 'select' ? 'option' : metaId
-    const newOptionLabel = i18n.get(`newOptionLabel`, { type }) || 'New Option'
+    const newOptionLabel = i18n.get('newOptionLabel', { type }) || 'New Option'
     const itemKey = `options.${this.data.length}`
-
-    const optionTemplate = fieldOptionData.length ? cleanObj(fieldOptionData[fieldOptionData.length - 1]) : {}
-    const itemData = { ...optionTemplate, label: newOptionLabel, value: slugify(newOptionLabel) }
+    
+    const lastOptionData = fieldOptionData[fieldOptionData.length - 1]
+    const optionTemplate = fieldOptionData.length ? lastOptionData : {}
+    const itemData = { ...optionTemplate, label: newOptionLabel }
+    if (metaId !== 'button') {
+      itemData.value = slugify(newOptionLabel)
+    }
     const newOption = new EditPanelItem({
       key: itemKey,
       data: itemData,
       field: this.field,
       index: this.props.children.length,
     })
-
+    
+    // debugger
     this.editPanelItems.push(newOption)
     this.props.appendChild(newOption.dom)
     this.field.set(itemKey, itemData)
diff --git a/src/lib/js/components/panels.js b/src/lib/js/components/panels.js
index 2763d289..5269d48e 100644
--- a/src/lib/js/components/panels.js
+++ b/src/lib/js/components/panels.js
@@ -142,11 +142,8 @@ export default class Panels {
       action: {
         click: evt => {
           const index = indexOfNode(evt.target, evt.target.parentElement)
-          this.currentPanel = this.panels[index]
-          const labels = evt.target.parentElement.childNodes
-          this.nav.refresh(index)
-          dom.removeClasses(labels, 'active-tab')
-          evt.target.classList.add('active-tab')
+          this.nav.setTranslateX(index, false)
+          this.nav.groupChange(index)
         },
       },
       content: panel.config.label,
@@ -227,19 +224,21 @@ export default class Panels {
     const action = {}
     const groupParent = this.currentPanel.parentElement
     const labelWrap = this.labels.firstChild
+    const panelTabs = labelWrap.children
     const siblingGroups = this.currentPanel.parentElement.childNodes
     this.activePanelIndex = indexOfNode(this.currentPanel, groupParent)
     let offset = { nav: 0, panel: 0 }
     let lastOffset = { ...offset }
 
     action.groupChange = newIndex => {
-      const labels = labelWrap.children
-      dom.removeClasses(siblingGroups, 'active-panel')
-      dom.removeClasses(labels, 'active-tab')
+      this.activePanelIndex = newIndex
       this.currentPanel = siblingGroups[newIndex]
-      this.currentPanel.classList.add('active-panel')
 
-      labels[newIndex].classList.add('active-tab')
+      dom.removeClasses(siblingGroups, 'active-panel')
+      dom.removeClasses(panelTabs, 'active-tab')
+
+      this.currentPanel.classList.add('active-panel')
+      panelTabs[newIndex].classList.add('active-tab')
 
       return this.currentPanel
     }
@@ -278,6 +277,7 @@ export default class Panels {
           lastOffset = offset
         }
       }
+
       panelTransition.addEventListener('finish', handleFinish)
     }
 
@@ -288,10 +288,9 @@ export default class Panels {
 
     action.refresh = (newIndex = this.activePanelIndex) => {
       if (this.activePanelIndex !== newIndex) {
-        this.activePanelIndex = newIndex
         action.groupChange(newIndex)
       }
-      action.setTranslateX(this.activePanelIndex)
+      action.setTranslateX(this.activePanelIndex, false)
       this.resizePanels()
     }
 
@@ -302,13 +301,13 @@ export default class Panels {
     action.nextGroup = () => {
       const newIndex = this.activePanelIndex + 1
       if (newIndex !== siblingGroups.length) {
-        const curPanel = action.groupChange(newIndex)
+        const nextPanel = siblingGroups[newIndex]
         offset = {
           nav: -labelWrap.offsetWidth * newIndex,
-          panel: -curPanel.offsetLeft,
+          panel: -nextPanel.offsetLeft,
         }
         translateX({ offset })
-        this.activePanelIndex++
+        action.groupChange(newIndex)
       } else {
         offset = {
           nav: lastOffset.nav - 8,
@@ -323,13 +322,13 @@ export default class Panels {
     action.prevGroup = () => {
       if (this.activePanelIndex !== 0) {
         const newIndex = this.activePanelIndex - 1
-        const curPanel = action.groupChange(newIndex)
+        const prevPanel = siblingGroups[newIndex]
         offset = {
           nav: -labelWrap.offsetWidth * newIndex,
-          panel: -curPanel.offsetLeft,
+          panel: -prevPanel.offsetLeft,
         }
         translateX({ offset })
-        this.activePanelIndex--
+        action.groupChange(newIndex)
       } else {
         offset = {
           nav: 8,