diff --git a/app/Http/Controllers/API/ConceptController.php b/app/Http/Controllers/API/ConceptController.php
index dde0fb4..b53f170 100644
--- a/app/Http/Controllers/API/ConceptController.php
+++ b/app/Http/Controllers/API/ConceptController.php
@@ -8,6 +8,7 @@
 use App\Models\Concept;
 use App\Models\Term;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response;
 use Illuminate\Support\Facades\DB;
 
 class ConceptController extends Controller
@@ -130,9 +131,25 @@ public function show($id)
      * @param  int  $id
      * @return \Illuminate\Http\Response
      */
-    public function update(Request $request, $id)
+    public function update(Request $request, int $id)
     {
-        //
+        $concept = Concept::findOrFail($id);
+        $attributes = $request->all();
+
+        // Sync concept categories
+        if (array_key_exists('conceptCategories', $attributes)) {
+            $category_ids = array_map(function ($category) {
+                return $category['id'];
+            }, $attributes['conceptCategories']);
+
+            $concept->conceptCategories()->sync($category_ids);
+
+            unset($attributes['conceptCategories']);
+        }
+
+        $concept->update($attributes);
+
+        return new Response($concept);
     }
 
     /**
diff --git a/resources/js/api/ConceptService.js b/resources/js/api/ConceptService.js
index 0203d2c..94beea5 100644
--- a/resources/js/api/ConceptService.js
+++ b/resources/js/api/ConceptService.js
@@ -39,6 +39,15 @@ export default {
     }
   },
 
+  async updateConcept(conceptId, conceptData) {
+    try {
+      const { data } = await apiClient.patch(`/${conceptId}`, conceptData);
+      return [null, data];
+    } catch (error) {
+      return [error];
+    }
+  },
+
   async deleteConcept(conceptId) {
     try {
       const { data } = await apiClient.delete(`/${conceptId}`);
diff --git a/resources/js/api/ConceptSourceService.js b/resources/js/api/ConceptSourceService.js
index 648a12a..bf1ec2c 100644
--- a/resources/js/api/ConceptSourceService.js
+++ b/resources/js/api/ConceptSourceService.js
@@ -41,7 +41,7 @@ export default {
 
   async updateConceptSource(conceptSourceId, conceptSourceData) {
     try {
-      const { data } = await apiClient.post(
+      const { data } = await apiClient.patch(
         `/${conceptSourceId}`,
         conceptSourceData,
       );
diff --git a/resources/js/app.js b/resources/js/app.js
index 55ce275..b1bd412 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -35,7 +35,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
 Vue.component('concept', require('./components/Concept.vue').default);
 Vue.component('concept-list', require('./components/Concept/List.vue').default);
 Vue.component('concept', require('./components/Concept/Default.vue').default);
-Vue.component('concept-edit', require('./components/Concept/Edit.vue').default);
+Vue.component('concept-edit', require('./components/Concept/LegacyEdit.vue').default);
 Vue.component(
   'concept-category',
   require('./components/ConceptCategory.vue').default,
@@ -44,23 +44,11 @@ Vue.component(
   'concept-create',
   require('./components/Concept/Create.vue').default,
 );
-Vue.component(
-  'concept-source',
-  require('./components/Source/Default.vue').default,
-);
-Vue.component(
-  'concept-source-edit',
-  require('./components/Source/Edit.vue').default,
-);
 Vue.component(
   'concept-search',
   require('./components/ConceptSearch.vue').default,
 );
 Vue.component('term-list', require('./components/Term/List.vue').default);
-Vue.component(
-  'category-list',
-  require('./components/Category/List.vue').default,
-);
 Vue.component('term-item', require('./components/TermItem.vue').default);
 Vue.component('cpf-form', require('./components/CPFForm.vue').default);
 Vue.component('b-table', BTable);
diff --git a/resources/js/components/CPFForm.vue b/resources/js/components/CPFForm.vue
index 081d4ef..c2be593 100644
--- a/resources/js/components/CPFForm.vue
+++ b/resources/js/components/CPFForm.vue
@@ -626,7 +626,7 @@
 </template>
 
 <script>
-import { categories } from '../config/catgegories';
+import { categories } from '../config/categories';
 
 export default {
   props: {
@@ -654,7 +654,7 @@ export default {
       relationType: '',
       propertyEditMode: true,
       categories,
-      isVocabularyEditor: this.canEditVocabulary === true,
+      isVocabularyEditor: this.canEditVocabulary === 'true',
       baseURL: '',
     };
   },
diff --git a/resources/js/components/Category/Editable.vue b/resources/js/components/Category/Editable.vue
index fccdc48..7b7c10e 100644
--- a/resources/js/components/Category/Editable.vue
+++ b/resources/js/components/Category/Editable.vue
@@ -1,63 +1,102 @@
 <template>
-  <BInputGroup>
-    <BFormSelect
-      v-model="originalId"
-      @input="updateCategory"
-      :options="getCategories"
-      :class="{ 'alert-info': isDirty }"
-    ></BFormSelect>
+  <div>
+    <BInputGroup>
+      <div
+        v-if="originalId"
+        class="category-item custom-select"
+        :class="{ 'font-weight-bold': isPrimary }"
+      >
+        {{ selectedValue }}
+      </div>
+      <BFormSelect
+        v-else
+        v-model="selectedId"
+        @change="trackChanges"
+        :options="getCategories"
+        :class="{ 'alert-info': isDirty() }"
+        aria-placeholder="Select a category"
+        placeholder="Select a category"
+      ></BFormSelect>
 
-    <BInputGroupAppend>
-      <BButton
-        @click="emitSaveCategory"
-        class="btn btn-info"
-        title="Save"
-        v-show="isDirty"
-      ><i class="fa fa-floppy-o"></i
-      ></BButton>
-      <BButton
-        @click="emitMakeCategoryPrimary"
-        v-if="!isPrimary"
-        class="btn btn-primary"
-        title="Make Primary"
-      ><i class="fa fa-check-square-o"></i
-      ></BButton>
-      <BButton
-        @click="emitDeleteCategory"
-        v-if="!isPrimary"
-        class="btn btn-danger"
-        title="Delete"
-      ><i class="fa fa-trash"></i
-      ></BButton>
-    </BInputGroupAppend>
-  </BInputGroup>
+      <BInputGroupAppend>
+        <BButton
+          @click="emitSaveCategory"
+          class="btn btn-info"
+          title="Save"
+          v-show="!originalId && isDirty()"
+          ><i class="fa fa-floppy-o"></i
+        ></BButton>
+        <BButton @click="showDeleteModal" class="btn btn-danger" title="Delete"
+          ><i class="fa fa-trash"></i
+        ></BButton>
+      </BInputGroupAppend>
+    </BInputGroup>
+
+    <BModal
+      id="delete-confirmation-modal"
+      ref="deleteModal"
+      title="Confirm Deletion"
+      @hide="resetCategory"
+      @shown="focusConfirmDeleteButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to delete this category?</p>
+        <BButton variant="danger" ref="confirmDeleteButton" @click="confirmDelete">Yes, delete</BButton>
+        <BButton variant="secondary" @click="hideDeleteModal">Cancel</BButton>
+      </div>
+    </BModal>
+  </div>
 </template>
 
 <script>
 import {
   BButton,
+  BFormInput,
   BFormSelect,
   BInputGroup,
   BInputGroupAppend,
+  BModal,
 } from 'bootstrap-vue';
+import { categories } from '../../config/categories';
 
 export default {
   data() {
     return {
-      originalId: this.category.id,
-      originalValue: this.category.value,
-      selectedId: this.category.id,
+      selectedId: this.categoryId,
+      originalId: this.categoryId,
+      selectedValue: this.categoryValue,
+      previous: null,
+      categories,
     };
   },
   model: {
-    prop: 'category',
     event: 'input',
   },
   props: {
-    category: Object,
-    isPrimary: Boolean,
+    categoryId: {
+      type: Number,
+      default: null,
+    },
+    isPrimary: {
+      type: Boolean,
+      default: false,
+    },
+    categoryValue: {
+      type: String,
+      default: null,
+    },
+    categoryIndex: {
+      type: Number,
+      default: null,
+    },
+    selectedCategories: {
+      type: Array,
+      default: () => [],
+    },
   },
   components: {
+    BFormInput,
     BInputGroup,
     BInputGroupAppend,
     BFormSelect,
@@ -65,39 +104,71 @@ export default {
   },
   computed: {
     getCategories() {
-      return this.$parent.getCategories(this.getCategory.id);
-    },
-    isDirty() {
-      if(!this.category.value) {
-        return !!this.category.id;
+      const filtered = this.categories.filter((cat) => {
+        return (
+          this.selectedCategories.filter((currentCat) => {
+            return currentCat === parseInt(cat.value);
+          }).length === 0 || this.categoryId === parseInt(cat.value)
+        );
+      });
+
+      if (!this.selectedId && filtered.length) {
+        filtered.unshift({
+          value: null,
+          text: 'Select a category',
+          disabled: true,
+        });
       }
-      return parseInt(this.originalId) !== this.category.id;
-    },
-    getCategory() {
-      return this.category;
-    },
-    resetCategory() {
-      this.originalId = this.getCategory.id;
-      this.originalValue = this.getCategory.value;
+
+      return filtered;
     },
   },
   methods: {
-    updateCategory(categoryId) {
-      this.selectedId = parseInt(categoryId);
-      this.$emit('change', { ...this.getCategory, category: this.selectedId, dirty: this.isDirty });
+    trackChanges() {
+      const selectedId = parseInt(this.selectedId);
+
+      this.$emit('change', {
+        id: selectedId,
+        dirty: this.isDirty(),
+        previous: this.previous,
+      });
+      this.previous = selectedId;
     },
     emitSaveCategory() {
-      console.log('newId',categoryId);
-      console.log('oldId',this.category.id);
-
-      this.$emit('save-category', this.selectedId, this.category.id);
+      const selectedId = parseInt(this.selectedId);
+      this.$emit('save-category', selectedId, this.categoryIndex);
+      this.originalId = selectedId;
+      this.selectedValue = this.categories.find(
+        (cat) => parseInt(cat.value) === this.originalId,
+      ).text;
+    },
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    focusConfirmDeleteButton() {
+      this.$refs.confirmDeleteButton.focus();
     },
-    emitMakeCategoryPrimary() {
-      this.$emit('make-category-primary', this.getCategory);
+    hideDeleteModal() {
+      this.$refs.deleteModal.hide();
     },
-    emitDeleteCategory() {
-      this.$emit('delete-category', this.getCategory);
+    confirmDelete() {
+      this.$emit('delete-category', this.categoryId, this.categoryIndex);
+      this.hideDeleteModal();
+    },
+    isDirty() {
+      if (!this.selectedId) {
+        return !!this.categoryId;
+      }
+      return this.originalId !== parseInt(this.selectedId);
+    },
+    resetCategory() {
+      this.selectedId = this.categoryId;
     },
   },
 };
 </script>
+<style>
+.category-item.custom-select {
+  background-image: none;
+}
+</style>
diff --git a/resources/js/components/Category/List.vue b/resources/js/components/Category/List.vue
deleted file mode 100644
index 9683993..0000000
--- a/resources/js/components/Category/List.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div class="category-list">
-    <div v-for="(cat, index) in cats" v-bind:key="cat.id">
-      <p class="mb-2">
-        <span
-          v-if="!conceptEditMode()"
-          :class="{ 'font-weight-bold': index === 0 }"
-        >
-          {{ cat.value }}
-        </span>
-        <Editable
-          v-else
-          :category="cat"
-          :is-primary="0 === index"
-          @save-category="saveCategory"
-          @change="flagDirty"
-        ></Editable>
-      </p>
-    </div>
-    <b-button
-      class="mt-2"
-      variant="success"
-      @click="addCategory()"
-      v-if="isVocabularyEditor"
-      v-show="conceptEditMode()"
-      ><i class="fa fa-plus"></i> Add Category</b-button
-    >
-  </div>
-</template>
-
-<script>
-import Editable from './Editable.vue';
-import state from '../../states/concept';
-import { categories } from '../../config/catgegories';
-
-export default {
-  data() {
-    return {
-      isVocabularyEditor: this.canEditVocabulary !== 'false',
-      state: state,
-      categories,
-    };
-  },
-  props: {
-    editing: Boolean,
-    conceptId: Number,
-    cats: {
-      type: Array,
-    },
-    canEditVocabulary: false,
-  },
-  methods: {
-    conceptEditMode: function () {
-      return this.state.editMode;
-    },
-    saveCategory: function (newCat, oldCat) {
-      this.$parent.saveCategory(newCat, oldCat);
-    },
-    addCategory: function () {
-      this.$parent.addCategory();
-    },
-    flagDirty: function (args) {
-      this.$parent.flagDirty(args);
-    },
-    getCategories: function (selected) {
-      return this.categories.filter((cat) => {
-        return (
-          this.cats.filter((currentCat) => {
-            return currentCat.id === parseInt(cat.value);
-          }).length === 0 || selected === parseInt(cat.value)
-        );
-      });
-    },
-  },
-  components: {
-    Editable,
-  },
-};
-</script>
-<style></style>
diff --git a/resources/js/components/Concept.vue b/resources/js/components/Concept.vue
index aa12a60..3ed0367 100644
--- a/resources/js/components/Concept.vue
+++ b/resources/js/components/Concept.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Vue from 'vue/dist/vue'
+import Vue from 'vue/dist/vue';
 window.Vue = Vue
 Vue.component('term', require('./Term.vue').default);
 export default {
diff --git a/resources/js/components/Concept/Create.vue b/resources/js/components/Concept/Create.vue
index 1840afd..a6b7754 100644
--- a/resources/js/components/Concept/Create.vue
+++ b/resources/js/components/Concept/Create.vue
@@ -86,7 +86,7 @@ import {
   BInputGroupAppend,
   BFormInvalidFeedback,
 } from 'bootstrap-vue';
-import { categories } from '../../config/catgegories';
+import { categories } from '../../config/categories';
 import ConceptService from '../../api/ConceptService';
 
 export default {
diff --git a/resources/js/components/Concept/Default.js b/resources/js/components/Concept/Default.js
new file mode 100644
index 0000000..4fbb04b
--- /dev/null
+++ b/resources/js/components/Concept/Default.js
@@ -0,0 +1,53 @@
+import { BButton, BInputGroup, BInputGroupAppend, BModal } from 'bootstrap-vue';
+import EditableTerm from '../Term/Editable.vue';
+import EditableSource from '../Source/Editable.vue';
+import EditableCategory from '../Category/Editable.vue';
+import MixinCategory from './mixins/Category';
+import MixinDirty from './mixins/Dirty';
+import MixinEditMode from './mixins/EditMode';
+import MixinSource from './mixins/Source';
+import MixinTerm from './mixins/Term';
+
+export default {
+  mixins: [MixinCategory, MixinDirty, MixinEditMode, MixinSource, MixinTerm],
+  components: {
+    BModal,
+    BButton,
+    BInputGroup,
+    BInputGroupAppend,
+    EditableTerm,
+    EditableSource,
+    EditableCategory,
+  },
+  props: {
+    conceptProps: {
+      type: Object,
+    },
+    termProps: {
+      type: Array,
+    },
+    categoriesProps: {
+      type: Array,
+    },
+    sourcesProps: {
+      type: Array,
+    },
+    canEditVocabulary: false,
+  },
+  data() {
+    return {
+      deprecated: this.conceptProps.deprecated,
+      conceptId: this.conceptProps.id,
+      isVocabularyEditor: this.canEditVocabulary === 'true',
+    };
+  },
+  methods: {
+    flashSuccessAlert() {
+      const alert = document.querySelector('.alert-success');
+      alert.classList.remove('hidden');
+      setTimeout(function () {
+        alert.classList.add('hidden');
+      }, 3000);
+    },
+  },
+};
diff --git a/resources/js/components/Concept/Default.vue b/resources/js/components/Concept/Default.vue
index 28a3a51..8705dd8 100644
--- a/resources/js/components/Concept/Default.vue
+++ b/resources/js/components/Concept/Default.vue
@@ -3,40 +3,68 @@
     <div class="alert alert-success hidden" role="alert">
       Your changes have been saved.
     </div>
-    <div class="mb-3 float-right" v-if="isVocabularyEditor">
-      <b-button
-        variant="primary"
-        @click="toggleEditMode()"
-        v-show="!getEditMode()"
-        ><i class="fa fa-edit"></i> Edit</b-button
-      >
-      <b-button
-        variant="secondary"
-        @click="toggleEditMode()"
-        v-show="getEditMode()"
-        >Done Editing</b-button
-      >
-    </div>
 
-    <h2>
-      {{ preferredTerm.text }}
-      <span v-if="deprecated">(deprecated)</span>
-    </h2>
+    <header class="sticky-top bg-white">
+      <div class="mb-3 float-right" v-if="isVocabularyEditor">
+        <BButton
+          variant="primary"
+          @click="toggleEditMode()"
+          v-show="!getEditMode()"
+        >
+          <i class="fa fa-edit"></i> Edit
+        </BButton>
+        <BButton
+          variant="secondary"
+          @click="leaveEditMode()"
+          v-show="getEditMode()"
+        >
+          Done Editing
+        </BButton>
+
+        <BModal
+          id="exit-confirmation-modal"
+          ref="exitModal"
+          title="Confirm Exit"
+          @shown="focusConfirmExitButton"
+          hide-footer
+        >
+          <div class="d-block text-center">
+            <p>You have unsaved changes. Are you sure you want to exit Edit Mode?</p>
+            <BButton ref="confirmExitButton" variant="danger" @click="confirmExit">Yes, exit</BButton>
+            <BButton variant="secondary" @click="hideExitModal">No</BButton>
+          </div>
+        </BModal>
+      </div>
+
+      <h2>
+        {{ preferredTerm.text }}
+        <span v-if="deprecated">(deprecated)</span>
+      </h2>
 
-    <hr />
+      <hr />
+    </header>
 
     <div id="concept-table">
       <div class="form-group">
         <div class="col-xs-8">
           <h4>Preferred Term</h4>
-          <p v-if="!getEditMode()">{{ preferredTerm.text }}</p>
-          <Editable
-            v-else
-            :term="preferredTerm"
+          <EditableTerm
+            v-if="getEditMode() || preferredTerm.inEdit"
+            :key="preferredTerm.id"
+            :term-id="preferredTerm.id"
+            :term-text="preferredTerm.text"
+            :term-index="preferredTerm.index"
+            :concept-id="preferredTerm.concept_id"
+            :in-edit="preferredTerm.inEdit"
             is-preferred="is-preferred"
             @save-term="saveTerm"
+            @cancel-inline-edit="cancelInlineEdit"
             @input="flagDirty"
-          ></Editable>
+          ></EditableTerm>
+          <p
+            v-else
+            @dblclick="enableInlineEdit(preferredTerm, preferredTerm.index)"
+          >{{ preferredTerm.text }}</p>
 
           <h4 class="mt-3" v-show="alternateTerms.length || getEditMode()">
             Alternate Terms
@@ -45,317 +73,102 @@
           <term-list
             :terms="alternateTerms"
             :canEditVocabulary="isVocabularyEditor"
+            :has-empty-term="hasEmptyTerm"
+            @save-term="saveTerm"
+            @delete-term="deleteTerm"
+            @add-term="addTerm"
+            @make-term-preferred="makeTermPreferred"
+            @enable-inline-edit="enableInlineEdit"
+            @cancel-inline-edit="cancelInlineEdit"
+            @flat-dirty="flagDirty"
           ></term-list>
         </div>
       </div>
 
       <div class="my-3" v-if="sources.length || getEditMode()">
         <h4>Concept Sources</h4>
-        <div class="mt-1" :key="source.id" v-for="(source, index) in sources">
-          <concept-source
-            :canEditVocabulary="isVocabularyEditor"
+        <div
+          v-for="(source, index) in sources"
+          v-bind:key="source.id"
+          v-bind:citation="source.citation"
+          v-bind:url="source.url"
+          v-bind:found_data="source.found_data"
+          v-bind:note="source.note"
+        >
+          <EditableSource
             :concept-id="source.concept_id"
             :concept-source-id="source.id"
             :source-index="index"
-          ></concept-source>
+            :canEditVocabulary="isVocabularyEditor"
+            :in-edit="source.inEdit"
+            @save-source="saveSource"
+            @delete-source="deleteSource"
+            @input="flagDirty"
+          ></EditableSource>
         </div>
+
+        <BButton
+          class="mt-2"
+          :class="{ disabled: hasEmptySource }"
+          :disabled="hasEmptySource"
+          variant="success"
+          @click="addSource"
+          v-if="isVocabularyEditor"
+          v-show="getEditMode()"
+          ><i class="fa fa-plus"></i> Add Source</BButton
+        >
       </div>
 
       <div class="my-3" v-if="cats.length || getEditMode()">
         <h4>Categories</h4>
 
-        <category-list
-          :cats="cats"
-          :canEditVocabulary="isVocabularyEditor"
-        ></category-list>
+        <div class="category-list">
+          <div
+            v-for="(cat, index) in cats"
+            v-bind:key="cat.id"
+            v-bind:index="index"
+          >
+            <p class="mb-2">
+              <span
+                v-if="!getEditMode() || !canEditVocabulary"
+                :class="{ 'font-weight-bold': index === 0 }"
+              >
+                {{ cat.value }}
+              </span>
+              <EditableCategory
+                v-else
+                :category-id="cat.id"
+                :category-value="cat.value"
+                :category-index="index"
+                :is-primary="0 === index"
+                :selected-categories="selectedCategories"
+                @save-category="saveCategory"
+                @delete-category="deleteCategory"
+                @change="flagDirty"
+              ></EditableCategory>
+            </p>
+          </div>
+          <BButton
+            class="mt-2"
+            :class="{ 'disabled': hasEmptyCategory }"
+            :disabled="hasEmptyCategory"
+            variant="success"
+            @click="addCategory"
+            v-if="isVocabularyEditor"
+            v-show="getEditMode() && selectedCategories.length !== categories.length"
+            ><i class="fa fa-plus"></i> Add Category</BButton
+          >
+        </div>
       </div>
     </div>
-
-    <!--    <concept-edit-->
-    <!--      id="conceptEdit"-->
-    <!--      v-if="isVocabularyEditor"-->
-    <!--      v-show="getEditMode()"-->
-    <!--      :concept-props="conceptProps"-->
-    <!--      :term-props="terms"-->
-    <!--      :sources-props="sources"-->
-    <!--      :canEditVocabulary="isVocabularyEditor"-->
-    <!--    >-->
-    <!--    </concept-edit>-->
   </div>
 </template>
 
 <script>
-// import TermItem from './TermItem.vue';
-import state from '../../states/concept';
-import Editable from '../Term/Editable.vue';
-import { categories } from '../../config/catgegories';
+import Component from './Default.js';
 
-export default {
-  components: { Editable },
-  props: {
-    conceptProps: {
-      type: Object,
-    },
-    termProps: {
-      type: Array,
-    },
-    sourcesProps: {
-      type: Array,
-    },
-    canEditVocabulary: false,
-  },
-  data() {
-    return {
-      deprecated: this.conceptProps.deprecated,
-      // Do we need to make a copy of termProps with slice() or [...this.termProps]?
-      terms: this.termProps.map(
-        // populating terms with our custom temporary variables
-        (term) => {
-          term.inEdit = false;
-          return term;
-        },
-      ),
-      sources: this.sourcesProps.map(
-        // populating terms with our custom temporary variables
-        (source) => {
-          source.inEdit = false;
-          return source;
-        },
-      ),
-      // concept: this.termProps.slice()
-      conceptId: this.conceptProps.id,
-      termSearch: [],
-      allTermsSearch: false,
-      selected_concept: '',
-      relationType: '',
-      state: state,
-      categories,
-      cats: this.conceptProps.concept_categories,
-      isVocabularyEditor: this.canEditVocabulary !== 'false',
-      baseURL: '',
-      devFeatures: process.env.MIX_INCLUDE_DEVELOPMENT_FEATURES == 'true',
-    };
-  },
-  computed: {
-    alternateTerms() {
-      return this.terms
-        .map((term) => {
-          term.inEdit = false;
-          return term;
-        })
-        .filter((term) => !term.preferred)
-        .sort();
-    },
-    preferredTerm() {
-      return this.terms.find((term) => term.preferred);
-    },
-  },
-  methods: {
-    fetchConcept: function () {
-      fetch(`${this.baseURL}/api/concepts/` + this.terms[0].concept_id)
-        .then((data) => data.json())
-        .then((data) => {
-          console.log('here you are: ', data);
-          this.terms = data.terms.map(
-            // populating terms with our custom temporary variables
-            (term) => {
-              term.inEdit = false;
-              return term;
-            },
-          );
-        });
-    },
-    addTerm: function () {
-      if (!this.terms[this.terms.length - 1].text) {
-        return;
-      }
-
-      const conceptID = this.terms[0].concept_id;
-      const newTerm = {
-        concept_id: conceptID,
-        id: null,
-        language_id: null,
-        preferred: false,
-        text: null,
-        // TODO: Find out how to add new terms without resetting the terms state.
-        inEdit: true,
-      };
-      this.terms.push(newTerm);
-    },
-    saveTerm: function (term) {
-      const vm = this;
-      if (!term.id) {
-        vm.postTerm(term);
-        vm.cleanDirty(term);
-      } else {
-        axios
-          .patch(`${this.baseURL}/api/terms/${term.id}`, term)
-          .then(function (response) {
-            term.inEdit = false;
-            vm.cleanDirty(term);
-            vm.flashSuccessAlert();
-            // vm.fetchConcept();    // Do we want to reload full concept after each save? Maybe not, if that would reset other unsaved fields...
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      }
-    },
-    postTerm: function (term) {
-      axios
-        .post(`${this.baseURL}/concepts/${term.concept_id}/add_term`, term) // TODO: Move to an api call
-        .then(function (response) {
-          term.inEdit = false;
-          // this.fetchConcept();
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
-    },
-    makeTermPreferred: function (term) {
-      if (
-        !confirm(
-          `Are you sure you want to make '${term.text}' the preferred term for this concept?`,
-        )
-      ) {
-        return;
-      }
-
-      const oldPreferred = this.preferredTerm;
-      oldPreferred.preferred = false;
-      term.preferred = true;
-
-      this.saveTerm(oldPreferred);
-      this.saveTerm(term);
-    },
-    deleteTerm: function (term) {
-      if (!confirm('Are you sure you want to delete this term?')) {
-        return;
-      }
-
-      let index = this.terms.findIndex((t) => t.id === term.id);
-      if (index === -1) {
-        index = this.terms.findIndex((t) => t.text === term.text);
-      }
-      this.terms.splice(index, 1);
-
-      this.cleanDirty(term);
-
-      if (term.id) {
-        axios
-          .delete(`${this.baseURL}/api/terms/${term.id}/destroy`)
-          .then(function (response) {
-            term.inEdit = false;
-            // vm.fetchConcept();    // Do we want to reload full concept after each save? Maybe not, if that would reset other unsaved fields...
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      }
-    },
-    addCategory: function () {
-      if (
-        !this.conceptProps.concept_categories[
-          this.conceptProps.concept_categories.length - 1
-        ].id
-      ) {
-        return;
-      }
-
-      const conceptID = this.conceptProps.concept_categories[0].concept_id;
-      const newCategory = {
-        pivot: {
-          concept_id: conceptID,
-          category_id: null,
-        },
-        id: null,
-        entity_group: null,
-        type: 'concept_category',
-        uri: null,
-        value: null,
-      };
-      this.conceptProps.concept_categories.push(newCategory);
-    },
-    saveCategory: function (newCat, oldCat) {
-      console.log('categories', this.conceptProps.concept_categories);
-    },
-    toggleEditMode: function () {
-      if (this.getEditMode() && this.isDirty()) {
-        if (
-          !confirm(
-            'You have unsaved changes. Are you sure you want to exit Edit Mode?',
-          )
-        ) {
-          return;
-        }
-      }
-
-      this.state.editMode = !this.state.editMode;
-    },
-    getEditMode: function () {
-      return this.state.editMode;
-    },
-    flashSuccessAlert: function () {
-      const alert = document.querySelector('.alert-success');
-      alert.classList.remove('hidden');
-      setTimeout(function () {
-        alert.classList.add('hidden');
-      }, 3000);
-    },
-    isDirty: function () {
-      return this.state.isDirty.length > 0;
-    },
-    flagDirty: function (obj) {
-      if (obj.dirty) {
-        this.markDirty(obj);
-      } else {
-        this.cleanDirty(obj);
-      }
-    },
-    markDirty: function (obj) {
-      if (obj.id) {
-        for (let i = 0; i < this.state.isDirty.length; i++) {
-          if (this.state.isDirty[i].id === obj.id) {
-            return;
-          }
-        }
-      } else {
-        for (let i = 0; i < this.state.isDirty.length; i++) {
-          if (this.state.isDirty[i].text === obj.previous) {
-            this.state.isDirty[i].text = obj.text;
-            return;
-          }
-        }
-      }
-      this.state.isDirty[this.state.isDirty.length] = obj;
-    },
-    cleanDirty: function (obj) {
-      for (let i = 0; i < this.state.isDirty.length; i++) {
-        if (this.state.isDirty[i].id && this.state.isDirty[i].id === obj.id) {
-          this.state.isDirty.splice(i, 1);
-          return;
-        } else if (
-          this.state.isDirty[i].text &&
-          this.state.isDirty[i].text === obj.text
-        ) {
-          this.state.isDirty.splice(i, 1);
-          return;
-        } else if (
-          this.state.isDirty[i].value &&
-          this.state.isDirty[i].value === obj.value
-        ) {
-          this.state.isDirty.splice(i, 1);
-          return;
-        }
-      }
-    },
-    resetDirty: function () {
-      this.state.isDirty = [];
-    },
-  },
-};
+export default Component;
 </script>
-
 <style scoped>
 b-input-group {
   min-width: 500px;
@@ -372,7 +185,7 @@ b-input-group {
   top: 100px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1000;
+  z-index: 1200;
   opacity: 1;
 }
 .alert.hidden {
@@ -381,4 +194,9 @@ b-input-group {
   visibility: hidden;
   z-index: -1000;
 }
+
+header.sticky-top {
+  top: 56px; /* offset for top navigation */
+  padding-top: 0.5rem;
+}
 </style>
diff --git a/resources/js/components/Concept/Edit.vue b/resources/js/components/Concept/LegacyEdit.vue
similarity index 98%
rename from resources/js/components/Concept/Edit.vue
rename to resources/js/components/Concept/LegacyEdit.vue
index 883eae6..964b066 100644
--- a/resources/js/components/Concept/Edit.vue
+++ b/resources/js/components/Concept/LegacyEdit.vue
@@ -239,7 +239,7 @@
 
 <script>
 // import TermItem from './TermItem.vue';
-import { categories } from '../../config/catgegories';
+import { categories } from '../../config/categories';
 
 export default {
   props: {
@@ -284,7 +284,7 @@ export default {
       categories,
       cats: this.conceptProps.concept_categories,
       selectedCategory: this.conceptProps.concept_categories[0].id,
-      isVocabularyEditor: this.canEditVocabulary !== 'false',
+      isVocabularyEditor: this.canEditVocabulary === 'true',
       baseURL: '',
       devFeatures: process.env.MIX_INCLUDE_DEVELOPMENT_FEATURES == 'true',
     };
@@ -442,9 +442,6 @@ export default {
         });
       this.selected_concept = '';
     },
-    deleteConceptSource: function (conceptSourceIndex) {
-      this.$delete(this.sources, conceptSourceIndex);
-    },
     addSource: function () {
       this.sources.push({ concept_id: this.conceptId, editMode: true });
     },
diff --git a/resources/js/components/Concept/mixins/Category.js b/resources/js/components/Concept/mixins/Category.js
new file mode 100644
index 0000000..822a598
--- /dev/null
+++ b/resources/js/components/Concept/mixins/Category.js
@@ -0,0 +1,72 @@
+import { categories } from '../../../config/categories';
+import conceptApi from '../../../api/ConceptService';
+
+export default {
+  data() {
+    return {
+      cats: this.categoriesProps,
+      categories,
+    };
+  },
+  computed: {
+    selectedCategories() {
+      return this.cats.map((cat) => cat.id);
+    },
+    hasEmptyCategory() {
+      return !!(
+        this.cats.length &&
+        !this.cats[
+          this.cats.length - 1
+        ].id
+      );
+    },
+  },
+  methods: {
+    getCategories(selectedId) {
+      return this.categories.filter((cat) => {
+        return (
+          this.cats.filter((currentCat) => {
+            return currentCat.id === parseInt(cat.value);
+          }).length === 0 || selectedId === parseInt(cat.value)
+        );
+      });
+    },
+    async updateCategories() {
+      this.conceptProps.concept_categories = this.cats;
+      const [error, response] = await conceptApi.updateConcept(this.conceptId, {
+        conceptCategories: this.cats,
+      });
+      if (!error) {
+        this.flashSuccessAlert();
+      }
+    },
+    addCategory() {
+      if (this.hasEmptyCategory) {
+        return;
+      }
+
+      const newCategory = {
+        pivot: {
+          concept_id: this.conceptId,
+        },
+        type: 'concept_category',
+      };
+      this.cats.push(newCategory);
+    },
+    saveCategory(categoryId, index) {
+      const categoryText = this.categories.find((cat) => parseInt(cat.value) === categoryId).text;
+      const category = { ...this.cats[index], id: categoryId, value: categoryText };
+
+      this.$set(this.cats, index, category);
+
+      this.cleanDirty({ id: categoryId });
+
+      this.updateCategories().then();
+    },
+    deleteCategory(categoryId, index) {
+      this.cats.splice(index, 1);
+
+      this.updateCategories().then();
+    },
+  },
+};
diff --git a/resources/js/components/Concept/mixins/Dirty.js b/resources/js/components/Concept/mixins/Dirty.js
new file mode 100644
index 0000000..ede45d7
--- /dev/null
+++ b/resources/js/components/Concept/mixins/Dirty.js
@@ -0,0 +1,54 @@
+export default {
+  methods: {
+    isDirty() {
+      return this.state.isDirty.length > 0;
+    },
+    flagDirty(obj) {
+      if (obj.dirty) {
+        this.markDirty(obj);
+      } else {
+        this.cleanDirty(obj);
+      }
+    },
+    markDirty(obj) {
+      if (obj.id) {
+        for (let i = 0; i < this.state.isDirty.length; i++) {
+          if (this.state.isDirty[i].id === obj.id) {
+            return;
+          }
+        }
+      } else {
+        let prev = obj.previous;
+        delete obj.previous;
+        delete obj.dirty;
+
+        for (let i = 0; i < this.state.isDirty.length; i++) {
+          if (JSON.stringify(this.state.isDirty[i]) === JSON.stringify(prev)) {
+            this.state.isDirty[i] = obj;
+            return;
+          }
+        }
+      }
+      this.state.isDirty[this.state.isDirty.length] = obj;
+    },
+    cleanDirty(obj) {
+      delete obj.previous;
+      delete obj.dirty;
+
+      for (let i = 0; i < this.state.isDirty.length; i++) {
+        if (this.state.isDirty[i].id && this.state.isDirty[i].id === obj.id) {
+          this.state.isDirty.splice(i, 1);
+          return;
+        } else if (
+          JSON.stringify(this.state.isDirty[i]) === JSON.stringify(obj)
+        ) {
+          this.state.isDirty.splice(i, 1);
+          return;
+        }
+      }
+    },
+    resetDirty() {
+      this.state.isDirty = [];
+    },
+  },
+};
diff --git a/resources/js/components/Concept/mixins/EditMode.js b/resources/js/components/Concept/mixins/EditMode.js
new file mode 100644
index 0000000..06ba4b7
--- /dev/null
+++ b/resources/js/components/Concept/mixins/EditMode.js
@@ -0,0 +1,49 @@
+import state from '../../../states/concept';
+
+export default {
+  data() {
+    return {
+      state: state,
+    };
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleEscapeKey);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleEscapeKey);
+  },
+  methods: {
+    leaveEditMode() {
+      if (this.getEditMode() && this.isDirty()) {
+        this.showExitModal();
+        return;
+      }
+      this.toggleEditMode();
+    },
+    toggleEditMode() {
+      this.state.editMode = !this.state.editMode;
+    },
+    getEditMode() {
+      return this.state.editMode;
+    },
+    handleEscapeKey(event) {
+      if (event.key === 'Escape' && this.getEditMode()) {
+        this.leaveEditMode();
+      }
+    },
+    showExitModal() {
+      this.$refs.exitModal.show();
+    },
+    hideExitModal() {
+      this.$refs.exitModal.hide();
+    },
+    confirmExit() {
+      this.hideExitModal();
+      this.resetDirty();
+      this.toggleEditMode();
+    },
+    focusConfirmExitButton() {
+      this.$refs.confirmExitButton.focus();
+    },
+  },
+};
diff --git a/resources/js/components/Concept/mixins/Source.js b/resources/js/components/Concept/mixins/Source.js
new file mode 100644
index 0000000..6b2273f
--- /dev/null
+++ b/resources/js/components/Concept/mixins/Source.js
@@ -0,0 +1,60 @@
+import sourceApi from '../../../api/ConceptSourceService';
+
+export default {
+  data() {
+    return {
+      sources: this.sourcesProps.map(
+        (source) => {
+          source.inEdit = false;
+          return source;
+        },
+      ),
+    };
+  },
+  computed: {
+    hasEmptySource() {
+      return !!(
+        this.sources.length && !this.sources[this.sources.length - 1].id
+      );
+    },
+  },
+  methods: {
+    addSource() {
+      this.sources.push({ concept_id: this.conceptId, inEdit: true });
+    },
+    updateSources(source, index) {
+      this.sources.splice(index, 1, source);
+    },
+    async saveSource(source, sourceId, index) {
+      if (sourceId) {
+        const [error,response] = await sourceApi.updateConceptSource(sourceId, source);
+        if(!error){
+          this.cleanDirty(response);
+          this.updateSources(response, index);
+          this.flashSuccessAlert();
+        }
+      } else {
+        const [error,response] = await sourceApi.createConceptSource(source);
+        if(!error){
+          this.cleanDirty(source);
+          this.updateSources(response, index);
+          this.flashSuccessAlert();
+        }
+      }
+    },
+    async deleteSource(sourceId, index) {
+      if (!sourceId) {
+        this.cleanDirty(this.sources[index]);
+        this.sources.splice(index, 1);
+        return;
+      }
+
+      const [error,response] = await sourceApi.deleteConceptSource(sourceId);
+      if(!error){
+        this.cleanDirty(this.sources[index]);
+        this.sources.splice(index, 1);
+        this.flashSuccessAlert();
+      }
+    },
+  },
+};
diff --git a/resources/js/components/Concept/mixins/Term.js b/resources/js/components/Concept/mixins/Term.js
new file mode 100644
index 0000000..1ca464a
--- /dev/null
+++ b/resources/js/components/Concept/mixins/Term.js
@@ -0,0 +1,151 @@
+import termApi from '../../../api/TermService';
+
+export default {
+  data() {
+    return {
+      terms: this.termProps.map(
+        (term, index) => {
+          term.index = index;
+          if('undefined' === typeof term.inEdit){
+            term.inEdit = false;
+          }
+          return term;
+        },
+      ),
+      termSearch: [],
+      allTermsSearch: false,
+    };
+  },
+  computed: {
+    alternateTerms() {
+      return this.terms
+        .filter((term) => !term.preferred)
+        .sort();
+    },
+    preferredTerm() {
+      return this.terms.find((term) => term.preferred);
+    },
+    hasEmptyTerm() {
+      return !!(
+        this.terms.length &&
+        !this.terms[
+          this.terms.length - 1
+        ].text
+      );
+    },
+  },
+  methods: {
+    addTerm() {
+      if (this.hasEmptyTerm) {
+        return;
+      }
+
+      const conceptID = this.terms[0].concept_id;
+      const newTerm = {
+        concept_id: conceptID,
+        id: null,
+        preferred: false,
+        text: null,
+        inEdit: false,
+        index: this.terms.length,
+      };
+      this.terms.push(newTerm);
+      this.updateTermIndexes();
+    },
+    async saveTerm(term, termIndex) {
+      const finalize = (term, termIndex) => {
+        if(term.inEdit) {
+          this.cancelInlineEdit(term, termIndex);
+        }
+
+        if (termIndex > -1) {
+          this.terms.splice(termIndex, 1, term);
+        }
+
+        this.cleanDirty(term);
+        this.flashSuccessAlert();
+        this.updateTermIndexes();
+      };
+
+      if (!term.id) {
+        term = await this.createTerm(term);
+        finalize(term, termIndex);
+        return;
+      }
+
+      const [error, response] = await termApi.updateTerm(term.id, term);
+      if (!error) {
+        finalize(term, termIndex);
+      }
+    },
+    async createTerm(term) {
+      const [error, response] = await termApi.createTerm(term);
+      if (!error) {
+        return response;
+      }
+      return term;
+    },
+    makeTermPreferred(term, termIndex) {
+      const currentPreferred = this.preferredTerm;
+
+      if (currentPreferred && currentPreferred.id !== term.id) {
+        currentPreferred.preferred = false;
+        this.saveTerm(currentPreferred).then();
+      }
+
+      term.preferred = true;
+      this.saveTerm(term).then();
+
+      this.$set(this.terms, termIndex, term);
+    },
+    async deleteTerm(termId, termText) {
+      let term = {
+        id: termId,
+        text: termText,
+        concept_id: this.conceptId,
+        preferred: false,
+      };
+
+      let index = this.terms.findIndex((t) => t.id === termId);
+      if (index === -1) {
+        index = this.terms.findIndex((t) => t.text === termText);
+      }
+      if (index > -1) {
+        term = this.terms[index];
+      }
+
+      const finalize = (term, index) => {
+        this.terms.splice(index, 1);
+        this.cleanDirty(term);
+        this.updateTermIndexes();
+      };
+
+      if (!termId) {
+        finalize(term, index);
+        return;
+      }
+
+      const [error, response] = await termApi.deleteTerm(termId);
+      if (!error) {
+        finalize(term, index);
+      }
+    },
+    updateTermIndexes() {
+      this.terms.forEach((term, index) => {
+        term.index = index;
+      });
+    },
+    enableInlineEdit(term, termIndex) {
+      if(!this.isVocabularyEditor){
+        return;
+      }
+
+      term.inEdit = true;
+      this.$set(this.terms, termIndex, term);
+    },
+    cancelInlineEdit(term, termIndex) {
+      term.inEdit = false;
+      this.$set(this.terms, termIndex, term);
+    }
+  },
+};
diff --git a/resources/js/components/ConceptCategory.vue b/resources/js/components/ConceptCategory.vue
index 31a3e70..3465885 100644
--- a/resources/js/components/ConceptCategory.vue
+++ b/resources/js/components/ConceptCategory.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { categories } from '../config/catgegories';
+import { categories } from '../config/categories';
 
 export default {
   props: {
diff --git a/resources/js/components/Source/Default.vue b/resources/js/components/Source/Default.vue
deleted file mode 100644
index 12add2e..0000000
--- a/resources/js/components/Source/Default.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div>
-    <div style="display: flex; gap: 0.5rem; align-items: baseline;">
-      <b-button
-        variant="primary"
-        @click="toggleEditMode()"
-        v-if="isVocabularyEditor"
-        v-show="conceptEditMode()"
-      ><i class="fa fa-edit"></i> Edit Source</b-button>
-
-      <div v-show="!editMode">
-        <p class="mb-0" v-if="citation">{{ citation }}</p>
-        <a :href="url" v-if="url">{{ url }}</a>
-        <p class="mb-0" v-if="foundData">{{ foundData }}</p>
-        <p class="mb-0" v-if="note">{{ note }}</p>
-      </div>
-    </div>
-
-    <concept-source-edit
-      v-if="isVocabularyEditor"
-      v-show="editMode"
-      :canEditVocabulary="isVocabularyEditor"
-      :concept-id="conceptId"
-      :concept-source-id="conceptSourceId"
-      :source-index="index"
-    ></concept-source-edit>
-  </div>
-</template>
-
-<script>
-import state from '../../states/concept';
-
-export default {
-  props: {
-    conceptId: {
-      type: Number,
-    },
-    conceptSourceId: {
-      type: Number,
-    },
-    canEditVocabulary: false,
-    sourceIndex: null,
-  },
-  mounted() {
-    this.getConceptSource();
-  },
-  data() {
-    return {
-      citation: null,
-      url: null,
-      foundData: null,
-      note: null,
-      editMode: false,
-      isVocabularyEditor: this.canEditVocabulary === true,
-      index: this.sourceIndex,
-      baseURL: '',
-      state: state,
-    };
-  },
-  methods: {
-    getConceptSource: function () {
-      if (!this.conceptSourceId) {
-        return;
-      }
-
-      fetch(`${this.baseURL}/api/concept_sources/` + this.conceptSourceId)
-        .then((data) => data.json())
-        .then((data) => {
-          this.citation = data.citation;
-          this.url = data.url;
-          this.foundData = data.found_data;
-          this.note = data.note;
-        });
-    },
-    toggleEditMode: function () {
-      this.editMode = !this.editMode;
-    },
-    conceptEditMode: function () {
-      return this.state.editMode;
-    }
-  },
-};
-</script>
-
-<style scoped></style>
diff --git a/resources/js/components/Source/Edit.vue b/resources/js/components/Source/Edit.vue
deleted file mode 100644
index f8bf3b2..0000000
--- a/resources/js/components/Source/Edit.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <div v-show="editMode" class="mt-3">
-    <b-row class="my-1">
-      <b-input-group class="mt-2">
-        <b-col sm="2">
-          <label for="citation">Citation:</label>
-        </b-col>
-        <b-col sm="10">
-          <b-form-input
-            v-model="citation"
-            :citation="citation"
-            type="text"
-          ></b-form-input>
-        </b-col>
-      </b-input-group>
-    </b-row>
-
-    <b-row class="my-1">
-      <b-input-group class="mt-2">
-        <b-col sm="2">
-          <label for="url">URL:</label>
-        </b-col>
-        <b-col sm="10">
-          <b-form-input v-model="url" :url="url" type="text"></b-form-input>
-        </b-col>
-      </b-input-group>
-    </b-row>
-
-    <b-row class="my-1">
-      <b-input-group class="mt-2">
-        <b-col sm="2">
-          <label for="found_data">Found Data:</label>
-        </b-col>
-        <b-col sm="10">
-          <b-form-input
-            v-model="foundData"
-            :foundData="foundData"
-            type="text"
-          ></b-form-input>
-        </b-col>
-      </b-input-group>
-    </b-row>
-
-    <b-row class="my-1">
-      <b-input-group class="mt-2">
-        <b-col sm="2">
-          <label for="note">Note:</label>
-        </b-col>
-        <b-col sm="10">
-          <b-form-input v-model="note" :note="note" type="text"></b-form-input>
-        </b-col>
-      </b-input-group>
-    </b-row>
-
-    <b-button @click="deleteSource()" variant="danger" class="float-right"
-      ><i class="fa fa-trash"></i> Delete</b-button
-    >
-    <b-button variant="primary" @click="saveConceptSource()"
-      ><i class="fa fa-save"></i> Save</b-button
-    >
-    <b-button @click="toggleEditMode">Cancel</b-button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    conceptId: {
-      type: Number,
-    },
-    conceptSourceId: {
-      type: Number,
-    },
-    canEditVocabulary: false,
-    sourceIndex: null,
-  },
-  mounted() {
-    this.getConceptSource();
-  },
-  data() {
-    return {
-      citation: null,
-      url: null,
-      foundData: null,
-      editMode: false,
-      note: null,
-      isVocabularyEditor: this.canEditVocabulary === true,
-      index: this.sourceIndex,
-      baseURL: '',
-    };
-  },
-  methods: {
-    getConceptSource: function () {
-      if (!this.conceptSourceId) {
-        return;
-      }
-
-      fetch(`${this.baseURL}/api/concept_sources/` + this.conceptSourceId)
-        .then((data) => data.json())
-        .then((data) => {
-          this.citation = data.citation;
-          this.url = data.url;
-          this.foundData = data.found_data;
-          this.note = data.note;
-        });
-    },
-    saveConceptSource: function () {
-      console.log(
-        `Saving ${this.conceptSourceId} ConceptId: ${this.conceptId}, Index: ${this.index}`,
-      );
-      let vm = this;
-      // Check this with Joseph
-      let currentSource = {
-        concept_id: this.conceptId,
-        citation: this.citation,
-        url: this.url,
-        found_data: this.foundData,
-        note: this.note,
-      };
-      if (this.conceptSourceId) {
-        axios
-          .patch(
-            `${this.baseURL}/api/concept_sources/${this.conceptSourceId}`,
-            currentSource,
-          )
-          .then(function (response) {
-            vm.editMode = false;
-            vm.$emit('saved-source', response.data, vm.index);
-            console.log(response);
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      } else {
-        axios
-          .post(`${this.baseURL}/api/concept_sources`, currentSource)
-          .then(function (response) {
-            vm.editMode = false;
-            vm.$emit('saved-source', response.data, vm.index);
-            console.log(response);
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      }
-    },
-    deleteSource: function () {
-      console.log(`Deleting Source with id ${this.conceptSourceId}`);
-      var vm = this;
-
-      if (!this.conceptSourceId) {
-        vm.$emit('delete-source');
-        return;
-      }
-
-      axios
-        .delete(`${this.baseURL}/api/concept_sources/${this.conceptSourceId}`)
-        .then(function (response) {
-          console.log('Deleted! ', response);
-          vm.$emit('delete-source');
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
-    },
-    toggleEditMode() {
-      this.$parent.toggleEditMode();
-    }
-  },
-};
-</script>
-
-<style scoped></style>
diff --git a/resources/js/components/Source/Editable.vue b/resources/js/components/Source/Editable.vue
new file mode 100644
index 0000000..aea327d
--- /dev/null
+++ b/resources/js/components/Source/Editable.vue
@@ -0,0 +1,312 @@
+<template>
+  <div
+    style="padding: 0.5rem"
+    :class="{ stripe: 1 === sourceIndex % 2, 'alert-info': isDirty() }"
+  >
+    <div v-if="!editMode || !conceptEditMode()">
+      <div style="display: flex; gap: 0.5rem; align-items: baseline">
+        <div style="flex-basis: calc(100% - 0.5rem - 42px)">
+          <p class="mb-0" v-if="citation">{{ citation }}</p>
+          <p class="mb-0" v-if="url">
+            <a :href="url">{{ url }}</a>
+          </p>
+          <p class="mb-0" v-if="foundData">{{ foundData }}</p>
+          <p class="mb-0" v-if="note">{{ note }}</p>
+        </div>
+
+        <BButtonGroup
+          v-if="isVocabularyEditor"
+          v-show="conceptEditMode() && !editMode"
+        >
+          <BButton size="sm" variant="primary" @click="toggleEditMode()"
+            ><i class="fa fa-edit"></i
+          ></BButton>
+          <BButton size="sm" variant="danger" @click="showDeleteModal"
+            ><i class="fa fa-trash"></i>
+          </BButton>
+        </BButtonGroup>
+      </div>
+    </div>
+
+    <div v-else>
+      <BInputGroup>
+        <BCol sm="2" class="mb-2">
+          <label for="citation">Citation:</label>
+        </BCol>
+        <BCol sm="10" class="mb-2">
+          <BFormInput
+            type="text"
+            v-model="citation"
+            @input="trackChanges"
+          ></BFormInput>
+        </BCol>
+
+        <BCol sm="2" class="mb-2">
+          <label for="url">URL:</label>
+        </BCol>
+        <BCol sm="10" class="mb-2">
+          <BFormInput
+            type="url"
+            placeholder="https://"
+            v-model="url"
+            @input="trackChanges"
+          ></BFormInput>
+        </BCol>
+
+        <BCol sm="2" class="mb-2">
+          <label for="found_data">Found Data:</label>
+        </BCol>
+        <BCol sm="10" class="mb-2">
+          <BFormInput
+            type="text"
+            v-model="foundData"
+            @input="trackChanges"
+          ></BFormInput>
+        </BCol>
+
+        <BCol sm="2">
+          <label for="note">Note:</label>
+        </BCol>
+        <BCol sm="10">
+          <BFormInput
+            type="text"
+            v-model="note"
+            @input="trackChanges"
+          ></BFormInput>
+        </BCol>
+      </BInputGroup>
+
+      <div class="mt-2">
+        <BButton
+          variant="danger"
+          class="float-right"
+          @click="showDeleteModal"
+          v-if="conceptSourceId"
+        ><i class="fa fa-trash"></i> Delete</BButton
+        >
+        <BButton variant="primary" @click="emitSaveSource"
+        ><i class="fa fa-save"></i> Save</BButton
+        >
+        <BButton
+          @click="showCancelModal"
+        >Cancel</BButton
+        >
+      </div>
+    </div>
+
+    <BModal
+      id="delete-confirmation-modal"
+      ref="deleteModal"
+      title="Confirm Deletion"
+      @shown="focusConfirmDeleteButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to delete this source?</p>
+        <BButton ref="confirmDeleteButton" variant="danger" @click="confirmDelete">Yes, delete</BButton>
+        <BButton variant="secondary" @click="hideDeleteModal">Cancel</BButton>
+      </div>
+    </BModal>
+
+    <BModal
+      id="cancel-confirmation-modal"
+      ref="cancelModal"
+      title="Confirm Cancel"
+      @shown="focusConfirmCancelButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Cancelling will cause you to lose your changes. Are you sure you want to cancel?</p>
+        <BButton ref="confirmCancelButton" variant="danger" @click="confirmCancel">Yes, cancel</BButton>
+        <BButton variant="secondary" @click="hideCancelModal">No</BButton>
+      </div>
+    </BModal>
+  </div>
+</template>
+
+<script>
+import { BButton, BFormInput, BInputGroup, BModal } from 'bootstrap-vue';
+import conceptSourceApi from '../../api/ConceptSourceService';
+import state from '../../states/concept';
+
+export default {
+  components: {
+    BInputGroup,
+    BFormInput,
+    BButton,
+    BModal,
+  },
+  data() {
+    return {
+      isVocabularyEditor: this.canEditVocabulary,
+      originalSource: {},
+      previousSource: {},
+      state,
+      editMode: this.inEdit,
+      citation: null,
+      url: null,
+      foundData: null,
+      note: null,
+    };
+  },
+  model: {
+    event: 'input',
+  },
+  props: {
+    conceptId: {
+      type: Number,
+      default: null,
+    },
+    conceptSourceId: {
+      type: Number,
+      default: null,
+    },
+    sourceIndex: {
+      type: Number,
+      default: null,
+    },
+    inEdit: {
+      type: Boolean,
+      default: false,
+    },
+    canEditVocabulary: false,
+  },
+  mounted() {
+    this.getConceptSource();
+  },
+  methods: {
+    async getConceptSource() {
+      if (!this.conceptSourceId) {
+        this.resetSource();
+        return;
+      }
+
+      const [error,source] = await conceptSourceApi.getConceptSource(this.conceptSourceId);
+      if (!error) {
+        this.citation = source.citation;
+        this.url = source.url;
+        this.foundData = source.found_data;
+        this.note = source.note;
+        this.conceptId = source.concept_id;
+
+        this.resetSource();
+      }
+    },
+    conceptEditMode: function () {
+      return this.state.editMode;
+    },
+    trackChanges() {
+      this.$emit('input', {
+        ...this.getSource(),
+        dirty: this.isDirty(),
+        previous: this.previousSource,
+      });
+      this.previousSource = this.getSource();
+    },
+    emitSaveSource() {
+      this.$emit(
+        'save-source',
+        this.getSource(),
+        this.conceptSourceId,
+        this.sourceIndex,
+      );
+      this.resetSource();
+      this.toggleEditMode();
+    },
+    resetSource(to) {
+      if (!to) {
+        to = this.getSource();
+      }
+
+      this.citation = to.citation;
+      this.url = to.url;
+      this.foundData = to.foundData || to.found_data;
+      this.note = to.note;
+
+      this.originalSource = to;
+      this.previousSource = to;
+    },
+    isDirty() {
+      if (!this.conceptEditMode()) {
+        return false;
+      }
+      return !this.compare(this.getSource(), this.originalSource);
+    },
+    getSource() {
+      const source = {
+        concept_id: this.conceptId,
+        citation: this.citation,
+        url: this.url,
+        found_data: this.foundData,
+        note: this.note,
+      };
+
+      if ( this.conceptSourceId ) {
+        source.id = this.conceptSourceId;
+      }
+
+      return source;
+    },
+    compare(primaryObj, secondaryObj) {
+      const keys = Object.keys(primaryObj);
+
+      for (let key of keys) {
+        const val1 = primaryObj[key];
+        const val2 = secondaryObj[key];
+
+        if (val1 === val2 || (!val1 && !val2)) {
+          continue;
+        }
+        return false;
+      }
+
+      return true;
+    },
+    toggleEditMode() {
+      this.editMode = !this.editMode;
+    },
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    hideDeleteModal() {
+      this.$refs.deleteModal.hide();
+    },
+    confirmDelete() {
+      this.$emit('delete-source', this.conceptSourceId, this.sourceIndex);
+      this.hideDeleteModal();
+    },
+    focusConfirmDeleteButton() {
+      this.$refs.confirmDeleteButton.focus();
+    },
+    showCancelModal() {
+      this.$refs.cancelModal.show();
+    },
+    hideCancelModal() {
+      this.$refs.cancelModal.hide();
+    },
+    confirmCancel() {
+      this.toggleEditMode();
+      this.hideCancelModal();
+
+      if (this.conceptSourceId) {
+        this.resetSource(this.originalSource);
+        this.trackChanges();
+        return;
+      }
+
+      this.$emit('delete-source', this.conceptSourceId, this.sourceIndex);
+    },
+    focusConfirmCancelButton() {
+      this.$refs.confirmCancelButton.focus();
+    },
+  },
+};
+</script>
+<style>
+.stripe:not(.alert-info) {
+  background-color: #eee;
+}
+.stripe.alert-info {
+  background-color: #bdd9df;
+}
+</style>
diff --git a/resources/js/components/Term/Editable.vue b/resources/js/components/Term/Editable.vue
index 166c60b..9e0cc1a 100644
--- a/resources/js/components/Term/Editable.vue
+++ b/resources/js/components/Term/Editable.vue
@@ -1,37 +1,90 @@
 <template>
-  <BInputGroup>
-    <BFormInput
-      type="text"
-      :required="true"
-      v-model="term.text"
-      @input="updateTerm"
-      :class="{ 'alert-info': isDirty() }"
-    ></BFormInput>
+  <div>
+    <BInputGroup>
+      <BFormInput
+        type="text"
+        ref="termText"
+        :required="true"
+        v-model="text"
+        @input="trackChanges"
+        @keydown.enter="emitSaveTerm"
+        @keydown.esc="cancelInlineEdit"
+        :class="{ 'alert-info': isDirty() }"
+      ></BFormInput>
 
-    <BInputGroupAppend>
-      <BButton
-        @click="emitSaveTerm"
-        class="btn btn-info"
-        title="Save"
-        v-show="isDirty()"
-      ><i class="fa fa-floppy-o"></i
-      ></BButton>
-      <BButton
-        @click="emitMakeTermPreferred"
-        v-if="!isPreferred"
-        class="btn btn-primary"
-        title="Make Preferred"
-      ><i class="fa fa-check-square-o"></i
-      ></BButton>
-      <BButton
-        @click="emitDeleteTerm"
-        v-if="!isPreferred"
-        class="btn btn-danger"
-        title="Delete"
-      ><i class="fa fa-trash"></i
-      ></BButton>
-    </BInputGroupAppend>
-  </BInputGroup>
+      <BInputGroupAppend>
+        <BButton
+          @click="emitSaveTerm"
+          class="btn btn-info"
+          title="Save"
+          v-show="isDirty()"
+        ><i class="fa fa-floppy-o"></i
+        ></BButton>
+        <BButton
+          @click="cancelInlineEdit"
+          v-if="inlineEdit"
+        ><i class="fa fa-ban"></i></BButton>
+        <BButton
+          variant="primary"
+          @click="showPreferredModal"
+          v-if="!isPreferred && termId"
+          class="btn"
+          title="Make Preferred"
+        ><i class="fa fa-check-square-o"></i
+        ></BButton>
+        <BButton
+          @click="showDeleteModal"
+          v-if="!isPreferred"
+          class="btn btn-danger"
+          title="Delete"
+        ><i class="fa fa-trash"></i
+        ></BButton>
+      </BInputGroupAppend>
+    </BInputGroup>
+
+    <BModal
+      id="delete-confirmation-modal"
+      ref="deleteModal"
+      title="Confirm Deletion"
+      @hide="resetTerm"
+      @shown="focusConfirmDeleteButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to delete this term?</p>
+        <BButton ref="confirmDeleteButton" variant="danger" @click="confirmDelete">Yes, delete</BButton>
+        <BButton variant="secondary" @click="hideDeleteModal">Cancel</BButton>
+      </div>
+    </BModal>
+
+    <BModal
+      id="cancel-confirmation-modal"
+      ref="cancelModal"
+      title="Confirm Cancel"
+      @shown="focusConfirmCancelButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Cancelling will cause you to lose your changes. Are you sure you want to cancel?</p>
+        <BButton ref="confirmCancelButton" variant="danger" @click="confirmCancel">Yes, cancel</BButton>
+        <BButton variant="secondary" @click="hideCancelModal">No</BButton>
+      </div>
+    </BModal>
+
+    <BModal
+      id="preferred-confirmation-modal"
+      ref="preferredModal"
+      title="Confirm Preferred Term"
+      @shown="focusConfirmPreferredButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to make this term the preferred term for this concept?</p>
+        <BButton ref="confirmPreferredButton" variant="primary" @click="confirmPreferred">Yes, make preferred</BButton>
+        <BButton variant="secondary" @click="hidePreferredModal">Cancel</BButton>
+      </div>
+    </BModal>
+  </div>
 </template>
 
 <script>
@@ -40,59 +93,112 @@ import {
   BFormInput,
   BInputGroup,
   BInputGroupAppend,
+  BModal,
 } from 'bootstrap-vue';
+import InlineEdit from './mixins/InlineEdit';
+import ConfirmDelete from './mixins/ConfirmDelete';
+import ConfirmPreferred from './mixins/ConfirmPreferred';
+import termApi from '../../api/TermService';
 
 export default {
+  mixins: [InlineEdit, ConfirmDelete, ConfirmPreferred],
+  components: {
+    BButton,
+    BFormInput,
+    BInputGroup,
+    BInputGroupAppend,
+    BModal,
+  },
   data() {
     return {
-      originalId: this.term.id,
-      originalText: this.term.text,
-      previousText: this.term.text,
+      term: null,
+      text: this.termText,
+      originalId: this.termId,
+      originalText: this.termText,
+      previous: this.termText,
     };
   },
   model: {
-    prop: 'term',
     event: 'input',
   },
   props: {
-    term: Object,
-    isPreferred: Boolean,
+    termId: {
+      type: Number,
+      default: null,
+    },
+    termText: {
+      type: String,
+      default: '',
+    },
+    conceptId: {
+      type: Number,
+      default: null,
+    },
+    isPreferred: {
+      type: Boolean,
+      default: false,
+    },
+    termIndex: {
+      type: Number,
+      default: null,
+    },
+    inEdit: {
+      type: Boolean,
+      default: false,
+    },
   },
-  components: {
-    BInputGroup,
-    BInputGroupAppend,
-    BFormInput,
-    BButton,
+  mounted() {
+    this.getConceptTerm();
+    if (this.inlineEdit){
+      this.$refs.termText.$el.focus();
+    }
   },
   methods: {
-    updateTerm(text) {
-      this.$emit('input', { ...this.term, text: text, dirty: this.isDirty(), previous: this.previousText });
-      this.previousText = text;
+    async getConceptTerm () {
+      if (!this.termId) {
+        this.resetTerm();
+        return;
+      }
+
+      const [error, term] = await termApi.getTerm(this.termId);
+      if(term) {
+        this.term = { ...term, inEdit: false };
+        this.text = term.text;
+        this.originalText = term.text;
+        this.previous = term.text;
+      }
+    },
+    trackChanges(text) {
+      this.$emit('input', { ...this.term, text, dirty: this.isDirty(), previous: this.previous });
+      this.previous = text;
     },
     emitSaveTerm() {
-      this.$emit('save-term', this.term);
+      if(!this.isDirty()){
+        return;
+      }
+      const term = {
+        ...this.term,
+        text: this.text,
+        preferred: this.isPreferred,
+        concept_id: this.conceptId,
+      };
+      this.$emit('save-term', term, this.termIndex);
       this.resetTerm();
     },
-    emitMakeTermPreferred() {
-      this.$emit('make-term-preferred', this.term);
-    },
-    emitDeleteTerm() {
-      this.$emit('delete-term', this.term);
-    },
     resetTerm() {
-      this.originalId = this.term.id;
-      this.originalText = this.term.text;
+      this.originalText = this.text;
+      this.originalId = this.termId;
     },
     isDirty() {
-      if(!this.term.id) {
-        return !!this.term.text;
+      if(!this.termId){
+        return !!this.text;
       }
-      if(this.term.id !== this.originalId){
+      if(this.termId !== this.originalId) {
         this.resetTerm();
         return false;
       }
-      return this.term.text !== this.originalText;
-    }
+      return this.text !== this.originalText;
+    },
   },
 };
 </script>
diff --git a/resources/js/components/Term/List.vue b/resources/js/components/Term/List.vue
index 070aa53..e6c8fe3 100644
--- a/resources/js/components/Term/List.vue
+++ b/resources/js/components/Term/List.vue
@@ -1,24 +1,41 @@
 <template>
   <div class="term-list">
-    <div v-for="term in terms" v-bind:key="term.id">
+    <div
+      v-for="term in terms"
+      v-bind:key="term.id"
+      v-bind:text="term.text"
+      v-bind:index="term.index"
+    >
       <p class="mb-2">
-        <span v-if="!conceptEditMode()">
+        <EditableTerm
+          v-if="conceptEditMode() || term.inEdit"
+          ref="EditableTerm"
+          :term-id="term.id"
+          :term-text="term.text"
+          :term-index="term.index"
+          :concept-id="term.concept_id"
+          :in-edit="term.inEdit"
+          @save-term="emitSaveTerm"
+          @delete-term="emitDeleteTerm"
+          @make-term-preferred="emitMakeTermPreferred"
+          @cancel-inline-edit="cancelInlineEdit"
+          @input="emitFlagDirty"
+        ></EditableTerm>
+        <span
+          v-else
+          class="d-block"
+          @dblclick="enableInlineEdit(term, term.index)"
+        >
           {{ term.text }}
         </span>
-        <Editable
-          v-else
-          :term="term"
-          @save-term="saveTerm"
-          @delete-term="deleteTerm"
-          @make-term-preferred="makeTermPreferred"
-          @input="flagDirty"
-        ></Editable>
       </p>
     </div>
     <b-button
       class="mt-2"
+      :class="{ disabled: hasEmptyTerm }"
+      :disabled="hasEmptyTerm"
       variant="success"
-      @click="addTerm()"
+      @click="emitAddTerm()"
       v-if="isVocabularyEditor"
       v-show="conceptEditMode()"
     ><i class="fa fa-plus"></i> Add Term</b-button>
@@ -26,46 +43,64 @@
 </template>
 
 <script>
-import Editable from './Editable.vue';
+import EditableTerm from './Editable.vue';
 import state from '../../states/concept';
 
 export default {
   data() {
     return {
-      isVocabularyEditor: this.canEditVocabulary !== 'false',
+      isVocabularyEditor: this.canEditVocabulary,
       state: state,
     };
   },
   props: {
-    editing: Boolean,
-    conceptId: Number,
+    conceptId: {
+      type: Number,
+      default: null,
+    },
     terms: {
       type: Array,
     },
-    canEditVocabulary: false,
+    canEditVocabulary: {
+      type: Boolean,
+      default: false,
+    },
+    hasEmptyTerm: {
+      type: Boolean,
+      default: false,
+    }
   },
   methods: {
     conceptEditMode: function () {
       return this.state.editMode;
     },
-    saveTerm: function (term) {
-      this.$parent.saveTerm(term);
+    emitSaveTerm: function (term, termIndex) {
+      this.$emit('save-term', term, termIndex);
+    },
+    emitAddTerm: function () {
+      this.$emit('add-term');
+      this.$nextTick(() => {
+        this.$refs.EditableTerm[this.$refs.EditableTerm.length - 1].$refs.termText.$el.focus();
+      });
     },
-    addTerm: function () {
-      this.$parent.addTerm();
+    emitDeleteTerm: function (termId, termIndex) {
+      this.$emit('delete-term', termId, termIndex);
     },
-    deleteTerm: function (term) {
-      this.$parent.deleteTerm(term);
+    emitMakeTermPreferred: function(term, termIndex) {
+      this.$emit('make-term-preferred', term, termIndex);
     },
-    makeTermPreferred: function(term) {
-      this.$parent.makeTermPreferred(term);
+    emitFlagDirty: function(args) {
+      this.$emit('flag-dirty', args);
     },
-    flagDirty: function(args) {
-      this.$parent.flagDirty(args);
+    enableInlineEdit: function(term, termIndex) {
+      this.$emit('enable-inline-edit', term, termIndex);
     },
+    cancelInlineEdit: function(term, termIndex) {
+      this.$emit('cancel-inline-edit', term, termIndex);
+    }
   },
   components: {
-    Editable,
+    EditableTerm,
   },
 };
 </script>
diff --git a/resources/js/components/Term/mixins/ConfirmDelete.js b/resources/js/components/Term/mixins/ConfirmDelete.js
new file mode 100644
index 0000000..b9c53a2
--- /dev/null
+++ b/resources/js/components/Term/mixins/ConfirmDelete.js
@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    hideDeleteModal() {
+      this.$refs.deleteModal.hide();
+    },
+    confirmDelete() {
+      this.$emit('delete-term', this.termId, this.termIndex);
+      this.hideDeleteModal();
+    },
+    focusConfirmDeleteButton() {
+      this.$refs.confirmDeleteButton.focus();
+    },
+  },
+};
diff --git a/resources/js/components/Term/mixins/ConfirmPreferred.js b/resources/js/components/Term/mixins/ConfirmPreferred.js
new file mode 100644
index 0000000..8a5bf2e
--- /dev/null
+++ b/resources/js/components/Term/mixins/ConfirmPreferred.js
@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    showPreferredModal() {
+      this.$refs.preferredModal.show();
+    },
+    hidePreferredModal() {
+      this.$refs.preferredModal.hide();
+    },
+    confirmPreferred() {
+      this.$emit('make-term-preferred', this.term, this.termIndex);
+      this.hidePreferredModal();
+    },
+    focusConfirmPreferredButton() {
+      this.$refs.confirmPreferredButton.focus();
+    },
+  },
+};
diff --git a/resources/js/components/Term/mixins/InlineEdit.js b/resources/js/components/Term/mixins/InlineEdit.js
new file mode 100644
index 0000000..17234b9
--- /dev/null
+++ b/resources/js/components/Term/mixins/InlineEdit.js
@@ -0,0 +1,45 @@
+import state from '../../../states/concept';
+
+export default {
+  data() {
+    return {
+      state,
+    };
+  },
+  computed: {
+    inlineEdit() {
+      return this.inEdit;
+    },
+  },
+  methods: {
+    conceptEditMode: function () {
+      return this.state.editMode;
+    },
+    showCancelModal() {
+      this.$refs.cancelModal.show();
+    },
+    hideCancelModal() {
+      this.$refs.cancelModal.hide();
+    },
+    confirmCancel() {
+      this.$emit('cancel-inline-edit', this.term, this.termIndex);
+      this.text = this.originalText;
+      this.resetTerm();
+      this.hideCancelModal();
+    },
+    focusConfirmCancelButton() {
+      this.$refs.confirmCancelButton.focus();
+    },
+    cancelInlineEdit() {
+      if (!this.inlineEdit || this.conceptEditMode()) {
+        return;
+      }
+      if (this.isDirty()) {
+        this.showCancelModal();
+        return;
+      }
+
+      this.confirmCancel();
+    },
+  },
+};
diff --git a/resources/js/config/catgegories.js b/resources/js/config/categories.js
similarity index 100%
rename from resources/js/config/catgegories.js
rename to resources/js/config/categories.js
diff --git a/resources/views/concepts/show.blade.php b/resources/views/concepts/show.blade.php
index 492782d..bf23163 100644
--- a/resources/views/concepts/show.blade.php
+++ b/resources/views/concepts/show.blade.php
@@ -31,6 +31,7 @@
             id="concept"
             :concept-props="{{ $concept }}"
             :term-props="{{ $concept->terms }}"
+            :categories-props="{{ $concept->conceptCategories }}"
             :sources-props="{{ $concept->sources }}"
             can-edit-vocabulary="{{ json_encode($isVocabularyEditor) }}"
         >
diff --git a/routes/api.php b/routes/api.php
index 3c74c9d..a8b3ec3 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -24,9 +24,7 @@
 
 Route::put('concepts/{id}/relate_concept', 'ConceptController@relateConcepts');
 Route::put('concepts/{id}/deprecate', 'API\ConceptController@deprecate');
-Route::apiResource('concepts', 'API\ConceptController')->except([
-    'update',
-]);
+Route::apiResource('concepts', 'API\ConceptController');
 
 Route::get('concepts_summary', function () {
     // Return only the preferred term