diff --git a/app/assets/stylesheets/components.css.scss b/app/assets/stylesheets/components.css.scss
index 7c59da7f7a..156d467bca 100644
--- a/app/assets/stylesheets/components.css.scss
+++ b/app/assets/stylesheets/components.css.scss
@@ -6,7 +6,6 @@
 @import "components/code_listing";
 @import "components/heatmap";
 @import "components/img";
-@import "components/label";
 @import "components/link";
 @import "components/modal";
 @import "components/notification";
@@ -17,6 +16,7 @@
 @import "components/scoresheet";
 @import "components/stepper";
 @import "components/table-toolbar";
+@import "components/tokenfield";
 @import "components/tutor";
 @import "components/progress-chart";
 
diff --git a/app/assets/stylesheets/components/label.css.scss b/app/assets/stylesheets/components/label.css.scss
deleted file mode 100644
index 5743376be6..0000000000
--- a/app/assets/stylesheets/components/label.css.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-.token.accent-red {
-  background-color: $color-red;
-  border-color: darken($color-red, 20%);
-  color: $label-text;
-}
-
-.token.accent-pink {
-  background-color: $color-pink;
-  border-color: darken($color-pink, 20%);
-  color: $label-text;
-}
-
-.token.accent-purple {
-  background-color: $color-purple;
-  border-color: darken($color-purple, 20%);
-  color: $label-text;
-}
-
-.token.accent-deep-purple {
-  background-color: $color-deep-purple;
-  border-color: darken($color-deep-purple, 20%);
-  color: $label-text;
-
-  a.btn-close {
-    color: $white-text;
-  }
-}
-
-.token.accent-indigo {
-  background-color: $color-indigo;
-  border-color: darken($color-indigo, 20%);
-  color: $label-text;
-
-  a.btn-close {
-    color: $white-text;
-  }
-}
-
-.token.accent-teal {
-  background-color: $color-teal;
-  border-color: darken($color-teal, 20%);
-  color: $label-text;
-
-  a.btn-close {
-    color: $white-text;
-  }
-}
-
-.token.accent-orange {
-  background-color: $color-orange;
-  border-color: darken($color-orange, 20%);
-  color: $label-text;
-}
-
-.token.accent-brown {
-  background-color: $color-brown;
-  border-color: darken($color-brown, 20%);
-  color: $label-text;
-
-  a.btn-close {
-    color: $white-text;
-  }
-}
-
-.token.accent-blue-grey {
-  background-color: $color-blue-grey;
-  border-color: darken($color-blue-grey, 20%);
-  color: $label-text;
-
-  a.btn-close {
-    color: $white-text;
-  }
-}
-
-.tokenfield {
-  height: auto;
-  z-index: 1;
-
-  .form-control {
-    height: auto;
-  }
-
-  #course_membership_course_labels-tokenfield {
-    height: auto;
-    padding: 0;
-  }
-
-  #exercise_labels-tokenfield {
-    height: auto;
-    padding: 0;
-  }
-
-  .tt-menu {
-    width: 100%;
-    min-width: 160px;
-    margin-top: 2px;
-    padding: 5px 0;
-    background-color: $content-bg;
-    border: 1px solid $divider-color;
-    *border-right-width: 2px;
-    *border-bottom-width: 2px;
-    border-radius: $border-radius-base;
-    background-clip: padding-box;
-  }
-
-  .tt-hint {
-    max-width: 100% !important;
-    width: unset !important;
-  }
-
-  .tt-selectable {
-    cursor: pointer;
-  }
-
-  .tokenfield-undeletable .btn-close {
-    display: none;
-  }
-
-  /* Override inline styling of search bar */
-
-  .twitter-typeahead {
-    max-width: 100% !important;
-    width: 100% !important;
-
-    input.token-input.tt-input {
-      max-width: 100% !important;
-      width: 100% !important;
-    }
-  }
-}
-
-.tokenfield.form-control {
-  background-color: transparent;
-}
-
-.clickable-token {
-  cursor: pointer;
-}
diff --git a/app/assets/stylesheets/components/table-toolbar.css.scss b/app/assets/stylesheets/components/table-toolbar.css.scss
index fc15820fa8..d5611b5ace 100644
--- a/app/assets/stylesheets/components/table-toolbar.css.scss
+++ b/app/assets/stylesheets/components/table-toolbar.css.scss
@@ -78,12 +78,6 @@
   border: none;
   box-shadow: none;
 
-  .token {
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: 15px;
-  }
-
   .twitter-typeahead .token-input.tt-hint {
     color: $text-secondary;
     margin-top: 7px;
diff --git a/vendor/assets/stylesheets/bootstrap-tokenfield/bootstrap-tokenfield.css.scss b/app/assets/stylesheets/components/tokenfield.css.scss
similarity index 53%
rename from vendor/assets/stylesheets/bootstrap-tokenfield/bootstrap-tokenfield.css.scss
rename to app/assets/stylesheets/components/tokenfield.css.scss
index acb2cfd607..83f83770d2 100644
--- a/vendor/assets/stylesheets/bootstrap-tokenfield/bootstrap-tokenfield.css.scss
+++ b/app/assets/stylesheets/components/tokenfield.css.scss
@@ -1,114 +1,41 @@
 /*!
- * bootstrap-tokenfield
+ * this file was based on the following repository, but is heavily modified
  * https://github.com/sliptree/bootstrap-tokenfield
  * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
  */
-@-webkit-keyframes blink {
-  0% {
-    border-color: #ededed;
-  }
-  100% {
-    border-color: #b94a48;
-  }
-}
-@-moz-keyframes blink {
-  0% {
-    border-color: #ededed;
-  }
-  100% {
-    border-color: #b94a48;
-  }
-}
-@keyframes blink {
-  0% {
-    border-color: #ededed;
-  }
-  100% {
-    border-color: #b94a48;
-  }
-}
 .tokenfield {
   height: auto;
   min-height: 34px;
   padding-bottom: 0px;
+  z-index: 1;
 }
 .tokenfield.focus {
   border-color: #66afe9;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-    0 0 8px rgba(102, 175, 233, 0.6);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
     0 0 8px rgba(102, 175, 233, 0.6);
 }
 .tokenfield .token {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  display: inline-block;
-  border: 1px solid #d9d9d9;
-  background-color: #ededed;
+  $token-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  height: $token-height;
+  border-radius: $token-height/2;
+  padding-left: 12px;
+  padding-right: 8px;
+  border-width: 0px;
+  color: $text-on-bg-color;
+  text-transform: capitalize;
   white-space: nowrap;
-  margin: -1px 5px 5px 0;
-  height: 22px;
-  vertical-align: top;
+  margin: 0 8px 8px 0;
   cursor: default;
 }
-.tokenfield .token:hover {
-  border-color: #b9b9b9;
-}
-.tokenfield .token.active {
-  border-color: #52a8ec;
-  border-color: rgba(82, 168, 236, 0.8);
-}
-.tokenfield .token.duplicate {
-  border-color: #ebccd1;
-  -webkit-animation-name: blink;
-  animation-name: blink;
-  -webkit-animation-duration: 0.1s;
-  animation-duration: 0.1s;
-  -webkit-animation-direction: normal;
-  animation-direction: normal;
-  -webkit-animation-timing-function: ease;
-  animation-timing-function: ease;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-.tokenfield .token.invalid {
-  background: none;
-  border: 1px solid transparent;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  border-bottom: 1px dotted #d9534f;
-}
-.tokenfield .token.invalid.active {
-  background: #ededed;
-  border: 1px solid #ededed;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.tokenfield .token .token-label {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-left: 4px;
-  vertical-align: top;
-}
 .tokenfield .token .close {
-  display: inline-block;
-  font-size: 95%;
-  margin-left: 5px;
-  float: none;
-  padding-right: 4px;
-  color: white;
-  opacity: 90%;
+  margin-left: 8px;
+  color: $text-on-bg-color;
 }
 .tokenfield .token .close:hover {
-  opacity: 100%;
+  color: $text-color;
   cursor: pointer;
 }
 .tokenfield .token-input {
@@ -119,14 +46,11 @@
   height: 20px;
   padding: 0;
   margin-bottom: 6px;
-  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .tokenfield .token-input:focus {
   border-color: transparent;
   outline: 0;
-  /* IE6-9 */
-  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .tokenfield.disabled {
@@ -147,17 +71,14 @@
 }
 .has-warning .tokenfield.focus {
   border-color: #66512c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
 }
 .has-error .tokenfield.focus {
   border-color: #843534;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
 }
 .has-success .tokenfield.focus {
   border-color: #2b542c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
 }
 .tokenfield.form-control-sm,
@@ -211,3 +132,96 @@
   padding-left: 0px;
   padding-right: 4px;
 }
+
+
+// these are manually added styles
+.token.accent-red {
+  background-color: $color-red-bg;
+}
+.token.accent-pink {
+  background-color: $color-pink-bg;
+}
+.token.accent-purple {
+  background-color: $color-purple-bg;
+}
+.token.accent-deep-purple {
+  background-color: $color-deep-purple-bg;
+}
+.token.accent-indigo {
+  background-color: $color-indigo-bg;
+}
+.token.accent-teal {
+  background-color: $color-teal-bg;
+}
+.token.accent-orange {
+  background-color: $color-orange-bg;
+}
+.token.accent-brown {
+  background-color: $color-brown-bg;
+}
+.token.accent-blue-grey {
+  background-color: $color-blue-grey-bg;
+}
+
+.tokenfield {
+
+  .form-control {
+    height: auto;
+  }
+
+  #course_membership_course_labels-tokenfield {
+    height: auto;
+    padding: 0;
+  }
+
+  #exercise_labels-tokenfield {
+    height: auto;
+    padding: 0;
+  }
+
+  .tt-menu {
+    width: 100%;
+    min-width: 160px;
+    margin-top: 2px;
+    padding: 5px 0;
+    background-color: $content-bg;
+    border: 1px solid $divider-color;
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    border-radius: $border-radius-base;
+    background-clip: padding-box;
+  }
+
+  .tt-hint {
+    max-width: 100% !important;
+    width: unset !important;
+  }
+
+  .tt-selectable {
+    cursor: pointer;
+  }
+
+  .tokenfield-undeletable .btn-close {
+    display: none;
+  }
+
+  /* Override inline styling of search bar */
+
+  .twitter-typeahead {
+    max-width: 100% !important;
+    width: 100% !important;
+
+    input.token-input.tt-input {
+      max-width: 100% !important;
+      width: 100% !important;
+    }
+  }
+}
+
+.tokenfield.form-control {
+  background-color: transparent;
+}
+
+.clickable-token {
+  cursor: pointer;
+}
diff --git a/app/assets/stylesheets/theme/theme-light.css.scss b/app/assets/stylesheets/theme/theme-light.css.scss
index f40517cd29..cb6bb2b0e7 100644
--- a/app/assets/stylesheets/theme/theme-light.css.scss
+++ b/app/assets/stylesheets/theme/theme-light.css.scss
@@ -55,6 +55,7 @@ $warning-500: $amber-500;
 $body-bg: $grey-50;
 $content-bg: white;
 $text-color: $black-text;
+$text-on-bg-color: rgba(0, 0, 0, 0.75);
 $body-color: $text-color;
 $color-contrast-dark: $text-color;
 $text-disabled: $black-disabled;
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 31539784ed..fccf5c274a 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -145,7 +145,7 @@
             multi: true,
             data: <%= raw local_assigns.fetch(:description_languages, []).map{|l| {id: l, name: t("js.#{l}")}}.to_json %>,
             color: function () {
-                return "light-grey";
+                return "orange";
             },
         };
         <% end %>
diff --git a/vendor/assets/stylesheets/vendor.scss b/vendor/assets/stylesheets/vendor.scss
index 32297c9d31..7a4b36313f 100644
--- a/vendor/assets/stylesheets/vendor.scss
+++ b/vendor/assets/stylesheets/vendor.scss
@@ -1,4 +1,3 @@
 // all pages
 @import "strip/strip";
-@import "bootstrap-tokenfield/bootstrap-tokenfield";
 @import "bootstrap-tokenfield/tokenfield-typeahead";