diff --git a/apps/dnet-is-application/src/main/java/eu/dnetlib/is/vocabulary/VocabularyRestController.java b/apps/dnet-is-application/src/main/java/eu/dnetlib/is/vocabulary/VocabularyRestController.java
index 7909c489..1b95a307 100644
--- a/apps/dnet-is-application/src/main/java/eu/dnetlib/is/vocabulary/VocabularyRestController.java
+++ b/apps/dnet-is-application/src/main/java/eu/dnetlib/is/vocabulary/VocabularyRestController.java
@@ -49,7 +49,7 @@ public class VocabularyRestController extends AbstractDnetController {
 	public List<Vocabulary> listVocs() {
 		return vocabularyRepository.findAll()
 			.stream()
-			.sorted((v1, v2) -> StringUtils.compare(v1.getName(), v2.getName()))
+			.sorted((v1, v2) -> StringUtils.compareIgnoreCase(v1.getId(), v2.getId()))
 			.collect(Collectors.toList());
 	}
 
diff --git a/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js b/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
index 13d1f8b0..236b43fc 100644
--- a/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
+++ b/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
@@ -24,14 +24,23 @@ app.controller('vocabulariesController', function($scope, $http) {
 
 	$scope.prepareEditVoc = function(voc) {
 		$scope.mode = 'edit';
-		$scope.tmpVoc = {
-			'id'          : voc.id,
-			'name'        : voc.name,
-			'description' : voc.description
-		};
+		$scope.tmpVoc = angular.copy(voc);
 	}
 					
-	$scope.saveVocabulary = function(voc) {					
+	$scope.saveVocabulary = function(voc) {
+		if ($scope.mode == 'new') {
+			var found = false;
+			
+			angular.forEach($scope.vocabularies, function(v) {
+				if (voc.id == v.id) { found = true; };
+			});
+			
+			if (found) {
+				alert("Insertion failed: vocabulary already exists !");
+				return;
+			}
+		}
+									
 		$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
 		$http.post('./api/vocs/?' + $.now(), voc).then(function successCallback(res) {			
 			$scope.vocabularies = res.data;
diff --git a/apps/dnet-is-application/src/main/resources/static/js/vocabularyEditor.js b/apps/dnet-is-application/src/main/resources/static/js/vocabularyEditor.js
index 9959c3e7..2ca6f0ea 100644
--- a/apps/dnet-is-application/src/main/resources/static/js/vocabularyEditor.js
+++ b/apps/dnet-is-application/src/main/resources/static/js/vocabularyEditor.js
@@ -3,6 +3,10 @@ var app = angular.module('vocabularyApp', []);
 app.controller('vocabularyController', function($scope, $http, $location) {			
 	$scope.terms = [];				
 	$scope.vocId = vocId();
+	$scope.editTermCode = '';
+	$scope.tmpTerm = {};
+	$scope.mode = '';
+	$scope.currTerm = [];
 	
 	$scope.reload = function() {			
 		$http.get('./api/vocs/'+ encodeURIComponent($scope.vocId) + '/terms?' + $.now()).then(function successCallback(res) {			
@@ -11,17 +15,53 @@ app.controller('vocabularyController', function($scope, $http, $location) {
 			alert('ERROR: ' + res.data.message);			
 		});			
 	};
+	
+	$scope.setCurrTerm = function(term) {
+		$scope.currTerm = angular.copy(term);
+	}
+	
+	$scope.prepareNewTerm = function() {
+		$scope.mode = 'new';
+		$scope.editTermCode = '';
+		$scope.tmpTerm = {
+			'code'        : '',
+			'englishName' : '',
+			'nativeName'  : '',
+			'synonyms'    : []
+		};
+	}
+
+	$scope.prepareEditTerm = function(term) {
+		$scope.mode = 'edit';
+		$scope.editTermCode = term.code;
+		$scope.tmpTerm = angular.copy(term);
+	}
+	
 					
-	$scope.newTerm = function(code, englishName, nativeName) {					
+	$scope.saveTerm = function(term) {					
 		$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
+		alert("TO SAVE HERE - " + term.code);
+		
 		//TODO		
+		
+		if ($scope.editTermCode != '' && $scope.editTermCode != $scope.tmpTerm.code) {
+			$scope.callDeleteTerm($scope.editTermCode);
+		}
+				
 	};			
-	 					
+
 	$scope.deleteTerm = function(code) {			
 		if (confirm("Are you sure ?")) {			
-			//TODO			
+			$scope.callDeleteTerm(code);
 		}			
 	};			
 
+	$scope.callDeleteTerm = function(code) {			
+		alert("TO DELETE HERE - " + code);
+		// TODO
+	};			
+	
+
+
 	$scope.reload();			
 });
diff --git a/apps/dnet-is-application/src/main/resources/static/vocabularies.html b/apps/dnet-is-application/src/main/resources/static/vocabularies.html
index ce5af69d..90919e9b 100644
--- a/apps/dnet-is-application/src/main/resources/static/vocabularies.html
+++ b/apps/dnet-is-application/src/main/resources/static/vocabularies.html
@@ -11,6 +11,10 @@
 		td {
 			vertical-align: middle !important;
 		}
+		label {
+			font-weight: bold;
+		}
+		
 	</style>
 	
 	<body ng-app="vocabulariesApp" ng-controller="vocabulariesController">
diff --git a/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html b/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
index 8d7ce53a..5a09d2de 100644
--- a/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
+++ b/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
@@ -11,6 +11,9 @@
 		td {
 			vertical-align: middle !important;
 		}
+		label {
+			font-weight: bold;
+		}
 	</style>	
 	
 	<script th:inline="javascript">
@@ -31,6 +34,10 @@
 						<b>Name: </b><span th:text="${vocName}"></span><br />
 						<b>Description: </b><span th:text="${vocDesc}"></span>
 					</p>
+					<hr />
+					<p>
+						<a href="javascript:void(0)" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</a>
+					</p>
 				
 					<p ng-show="terms.length > 0">
 						<input type="text" class="form-control form-control-sm" ng-model="termFilter" placeholder="Filter..."/>
@@ -57,15 +64,75 @@
 								<th>{{t.code}}</th>
 								<td>{{t.englishName}}</td>
 								<td>{{t.nativeName}}</td>
-								<td>{{t.synonyms.length}} synonym(s)</td>
-								<td align="right"><button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.id)">delete</button></td>
+								<td>
+									<a href="javascript:void(0)" 
+										data-toggle="modal" data-target="#showSynonymsModal" 
+										ng-show="t.synonyms.length > 0"
+										ng-click="setCurrTerm(t)">{{t.synonyms.length}} synonym(s)</a>
+									<span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</span>
+								</td>
+								<td align="right">
+									<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareEditTerm(t)" >edit</button>
+									<button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.code)">delete</button>
+								</td>
 							</tr>
 						</tbody>
 					</table>
 				</div>
 			</div>
 		</div>
-					
+		
+		<!-- Modals -->
+		
+		<div class="modal fade" tabindex="-1" id="editVocabularyTermModal">
+			<div class="modal-dialog modal-lg">
+	 			<div class="modal-content">
+					<div class="modal-header">
+						<h4 class="modal-title" ng-if="mode == 'new'">New term</h4>
+						<h4 class="modal-title" ng-if="mode == 'edit'">Edit term</h4>
+						<button type="button" class="close" data-dismiss="modal">&times;</button>
+					</div>
+					<div class="modal-body">
+						<form>
+							<div class="form-group">
+								<label>Code</label>
+								<input  type="text" class="form-control" ng-model="tmpTerm.code" />
+							</div>
+							<div class="form-group">
+								<label>English Name</label>
+								<input type="text" class="form-control" ng-model="tmpTerm.englishName" />
+							</div>
+							<div class="form-group">
+								<label>Native Name</label>
+								<input type="text" class="form-control" ng-model="tmpTerm.nativeName" />
+							</div>
+							
+						</form>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
+						<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveTerm(tmpTerm)">Submit</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+		<div class="modal fade" tabindex="-1" id="showSynonymsModal">
+			<div class="modal-dialog modal-lg">
+		 		<div class="modal-content">
+		 			<div class="modal-header">
+						<h4 class="modal-title">Synonyms of {{currTerm.code}}</h4>
+					</div>
+					<div class="modal-body">
+						<div ng-repeat="s in currTerm.synonyms">
+							<span class="badge badge-primary" >{{s}}</span>
+							<br />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
 	</body>
 	
 	<script src="common/js/jquery.min.js"></script>