diff --git a/assets/js/src/views/video-edit.js b/assets/js/src/views/video-edit.js
index dba6de59..ffd0d056 100644
--- a/assets/js/src/views/video-edit.js
+++ b/assets/js/src/views/video-edit.js
@@ -12,9 +12,8 @@ var VideoEditView = BrightcoveView.extend({
 		'click    .caption-secondary-fields .delete': 'removeCaptionRow',
 		'click    .add-remote-caption': 'addCaptionRow',
 		'change   .brightcove-variant': 'changeVariant',
-		'click    .add-bc-label': 'addLabelRow',
-		'keypress .brightcove-labels': 'labelAutocomplete',
-		'click    .bc-label-secondary-fields .delete': 'removeLabelRow',
+		'click    .bc-labels-list .remove-label': 'removeLabel',
+		'click    .bc-add-label': 'addLabel',
 	},
 
 	/**
@@ -177,75 +176,6 @@ var VideoEditView = BrightcoveView.extend({
 		image.empty();
 	},
 
-	/**
-	 * Add a label row
-	 *
-	 * @param {Event} evnt
-	 * @param {Object} media
-	 */
-	addLabelRow: function (evnt, media) {
-		var source = undefined;
-		if (media) {
-			source = media.url;
-		}
-
-		this.addLabel(source);
-	},
-
-	/**
-	 * Adds a label
-	 *
-	 * @param source
-	 * @param language
-	 * @param label
-	 * @param defaultcap
-	 */
-	addLabel: function (source, language, label, defaultcap) {
-		let newRow = $(document.getElementById('js-bc-label-empty-row')).clone(),
-			container = document.getElementById('js-bc-labels');
-
-		// Clean up our cloned row
-		newRow.find('input').prop('disabled', false).val('');
-		newRow.removeAttr('id');
-		newRow.removeClass('empty-row');
-
-		// Append our new row to the container
-		$(container).append(newRow);
-	},
-
-	/**
-	 * Fires the autocomplete function
-	 *
-	 * @param {Event} evnt
-	 */
-	labelAutocomplete: function (evnt) {
-		jQuery('.brightcove-labels').autocomplete({
-			source: wpbc.preload.labels,
-			select: function () {
-				$(this).parent('.bc-label-repeater.empty-row').removeClass('empty-row');
-			},
-			appendTo: '.media-modal',
-		});
-	},
-
-	/**
-	 * Removes a label row
-	 * @param {Event} evnt
-	 */
-	removeLabelRow: function (evnt) {
-		evnt.preventDefault();
-
-		let label = evnt.currentTarget,
-			container = $(label).parents('.bc-label-repeater'),
-			source = container.find('.brightcove-labels');
-
-		// Empty the input fields
-		$(source).val('');
-
-		// Remove the container entirely
-		container.remove();
-	},
-
 	/**
 	 * Add a caption row
 	 *
@@ -455,17 +385,7 @@ var VideoEditView = BrightcoveView.extend({
 		this.model.set('captions', captions);
 
 		// Labels
-		var labels = [];
-		this.$el
-			.find('.bc-label-repeater.repeater-row')
-			.not('.empty-row')
-			.each(function () {
-				var label = $(this),
-					Name = label.find('.brightcove-labels').val();
-
-				labels.push(Name);
-			});
-
+		const labels = this.$el.find('.bc-labels-value').val()?.split(',') || [];
 		this.model.set('labels', labels);
 
 		// Custom fields
@@ -569,6 +489,52 @@ var VideoEditView = BrightcoveView.extend({
 		this.model.set('custom', custom);
 	},
 
+	/**
+	 * Adds a label.
+	 * @param {Event} event
+	 */
+	addLabel: function (event) {
+		event.preventDefault();
+
+		const elem = this.el.querySelector('.brightcove-labels');
+		const labelsValElem = this.el.querySelector('.bc-labels-value');
+		const value = elem.value;
+
+		elem.querySelector('option[value="' + value + '"]').setAttribute('disabled', true);
+		elem.selectedIndex = 0;
+
+		const listItem = `<li>
+											<button class="remove-label" aria-label="Remove label: ${value}" data-label="${value}"><span aria-hidden="true">×</span></button>
+											<span class="label-name">${value}</span>
+										</li>`;
+
+		this.el.querySelector('.bc-labels-list').insertAdjacentHTML('beforeend', listItem);
+
+		labelsValElem.value = labelsValElem.value ? labelsValElem.value + ',' + value : value;
+	},
+
+	/**
+	 * Removes a label.
+	 * @param {Event} event
+	 */
+	removeLabel: function (event) {
+		event.preventDefault();
+
+		const label = event.currentTarget.dataset.label;
+		const labelsValElem = this.el.querySelector('.bc-labels-value');
+		const labelElem = this.el.querySelector('.brightcove-labels');
+		const selectedLabels = labelsValElem.value.split(',');
+
+		var index = selectedLabels.indexOf(label);
+		if (index > -1) {
+			selectedLabels.splice(index, 1);
+		}
+
+		labelsValElem.value = selectedLabels.join(',');
+		labelElem.querySelector('option[value="' + label + '"]').removeAttribute('disabled');
+		event.currentTarget.parentElement.remove();
+	},
+
 	/**
 	 * Render the actual view for the Video Edit screen.
 	 *
diff --git a/assets/scss/components/_video-edit.scss b/assets/scss/components/_video-edit.scss
index cc78f4c5..f70600ae 100644
--- a/assets/scss/components/_video-edit.scss
+++ b/assets/scss/components/_video-edit.scss
@@ -2,7 +2,7 @@
 	.image-preview,
 	.setting {
 		margin-bottom: 8px;
-		.description{
+		.description {
 			margin-left: 0px;
 			@media screen and (min-width: 900px) {
 				margin-left: 252px;
@@ -135,16 +135,52 @@
 			}
 
 			span,
-			input[type="text"],
+			input[type='text'],
 			select {
 				margin: 0;
 				min-width: 100%;
 				text-align: left;
 				width: 100%;
 			}
-			input[type="checkbox"] {
+			input[type='checkbox'] {
 				margin: auto;
 			}
 		}
 	}
-}
\ No newline at end of file
+
+	& .bc-labels-list {
+		margin: 0;
+		text-align: left;
+
+		& li {
+			background-color: #fff;
+			border-radius: 4px;
+			border: 1px solid #8c8f94;
+			display: inline-block;
+			margin: 0 10px 10px 0;
+			white-space: nowrap;
+		}
+
+		& button {
+			background-color: #f6f7f7;
+			border-bottom-left-radius: 4px;
+			border-right: 1px solid #8c8f94;
+			border-top-left-radius: 4px;
+			border: none;
+			cursor: pointer;
+			padding: 10px;
+		}
+
+		& span {
+			float: none;
+		}
+
+		& .label-name {
+			padding: 10px;
+		}
+	}
+
+	& .add-labels-container select {
+		margin-left: 0;
+	}
+}
diff --git a/includes/admin/class-bc-templates.php b/includes/admin/class-bc-templates.php
index dd17f148..dc4a2ade 100644
--- a/includes/admin/class-bc-templates.php
+++ b/includes/admin/class-bc-templates.php
@@ -259,34 +259,30 @@ class="brightcove-datetime brightcove-end-date"
 					<div class="setting labels">
 						<span class="name"><?php esc_html_e( 'Labels', 'brightcove' ); ?></span>
 						<div class="setting-content">
-							<div>
-								<button class="button-secondary add-bc-label">
+							<div class="bc-labels-container">
+								<input type="hidden" class="bc-labels-value" value="{{data.labels}}">
+								<ul class="bc-labels-list">
+									<# _.each( data.labels, function( label ) { #>
+									<li>
+										<button class="remove-label" aria-label="<?php esc_html_e( 'Remove label: ', 'brightcove' ); ?>{{label}}" data-label="{{label}}"><span aria-hidden="true">×</span></button>
+										<span class="label-name">{{label}}</span>
+									</li>
+									<# }); #>
+								</ul>
+							<div class="add-labels-container">
+								<select class="brightcove-labels" name="labels" aria-label="<?php esc_html_e( 'Select Label', 'brightcove' ); ?>">
+									<option><?php esc_html_e( 'Select Label', 'brightcove' ); ?></option>
+									<# _.each( wpbc.preload.labels, function( label ) { #>
+									<option
+										<# if ( (data.labels)?.includes(label) ) { #>disabled<# } #>
+										value="{{label}}">{{label}}
+									</option>
+									<# }); #>
+								</select>
+								<button class="button-secondary bc-add-label">
 									<?php esc_html_e( 'Add Label', 'brightcove' ); ?>
 								</button>
-								<a class="button-secondary" href="<?php echo esc_url( admin_url() . 'admin.php?page=brightcove-labels' ); ?>">
-									<?php esc_html_e( 'Create New Label', 'brightcove' ); ?>
-								</a>
 							</div>
-							<div id="js-bc-labels">
-								<# _.each( data.labels, function( label ) { #>
-								<div id="js-caption-fields" class="bc-label-repeater repeater-row">
-									<input type="text" class="brightcove-labels" value="{{label}}">
-
-									<div class="bc-label-secondary-fields">
-										<div class="action-row">
-											<a href="#" class="delete"><?php esc_html_e( 'Remove Label', 'brightcove' ); ?></a>
-										</div>
-									</div>
-								</div>
-								<# }); #>
-								<div id="js-bc-label-empty-row" class="bc-label-repeater repeater-row empty-row">
-									<input id="" type="text" class="brightcove-labels" value=""/>
-									<div class="bc-label-secondary-fields">
-										<div class="action-row">
-											<a href="#" class="delete"><?php esc_html_e( 'Remove Label', 'brightcove' ); ?></a>
-										</div>
-									</div>
-								</div>
 							</div>
 						</div>
 					</div>
diff --git a/includes/class-bc-setup.php b/includes/class-bc-setup.php
index f6b016a7..582b198f 100644
--- a/includes/class-bc-setup.php
+++ b/includes/class-bc-setup.php
@@ -390,7 +390,6 @@ public static function brightcove_enqueue_assets() {
 		);
 
 		$dependencies = array(
-			'jquery-ui-autocomplete',
 			'jquery',
 			'backbone',
 			'wp-backbone',