diff --git a/app/assets/stylesheets/tailwind/checkbox.css b/app/assets/stylesheets/tailwind/checkbox.css
index 2fa296ccf..6c2bbd446 100644
--- a/app/assets/stylesheets/tailwind/checkbox.css
+++ b/app/assets/stylesheets/tailwind/checkbox.css
@@ -16,7 +16,7 @@
   }
 
   input[type="checkbox"].sci-checkbox + .sci-checkbox-label::before {
-    @apply bg-transparent border border-solid border-black rounded-sm inline-block
+    @apply bg-transparent border border-solid !border-black rounded-sm inline-block
     left-0 absolute w-4 h-4 content-[''];
   }
 
@@ -25,7 +25,7 @@
   }
 
   input[type="checkbox"].sci-checkbox:checked + .sci-checkbox-label::before {
-    @apply border-sn-science-blue bg-center bg-sn-science-blue;
+    @apply !border-sn-science-blue bg-center bg-sn-science-blue;
     background-image: image-url("icon_small/sn-check.svg");
   }
 
@@ -42,10 +42,10 @@
   }
 
   input[type="checkbox"].sci-checkbox:disabled + .sci-checkbox-label::before {
-    @apply border border-solid border-sn-sleepy-grey;
+    @apply  !border-sn-sleepy-grey;
   }
 
   input[type="checkbox"].sci-checkbox:disabled:checked + .sci-checkbox-label::before {
-    @apply bg-sn-sleepy-grey border border-solid border-sn-sleepy-grey;
+    @apply bg-sn-sleepy-grey !border-sn-sleepy-grey;
   }
 }
diff --git a/app/assets/stylesheets/tailwind/tags.css b/app/assets/stylesheets/tailwind/tags.css
index 74d05680b..896aeb275 100644
--- a/app/assets/stylesheets/tailwind/tags.css
+++ b/app/assets/stylesheets/tailwind/tags.css
@@ -1,10 +1,10 @@
 @layer components {
   .sci-tag {
-    @apply text-xs !rounded-full !px-2 h-6 !py-0.5 inline-flex items-center gap-2;
+    @apply text-xs !rounded-full !pl-2 !pr-1.5 h-6 !py-0.5 inline-flex items-center gap-1;
   }
 
   .sci-tag .sn-icon {
-    @apply -ml-1 leading-4 !text-base cursor-pointer;
+    @apply leading-4 !text-base cursor-pointer shrink-0;
   }
 
   .sci-tag .sn-icon.sn-icon-close {
@@ -16,6 +16,10 @@
   }
 
   .sci-tag .avatar-container {
-    @apply h-5 w-5 rounded-full overflow-hidden flex items-center -ml-1.5 justify-center;
+    @apply h-5 w-5 rounded-full overflow-hidden flex items-center -ml-1.5 justify-center shrink-0;
+  }
+
+  .sci-tag:hover {
+    @apply outline-4 outline-sn-grey-100 outline;
   }
 }
diff --git a/app/javascript/vue/shared/select_dropdown.vue b/app/javascript/vue/shared/select_dropdown.vue
index a559f1e6c..bd7033a6c 100644
--- a/app/javascript/vue/shared/select_dropdown.vue
+++ b/app/javascript/vue/shared/select_dropdown.vue
@@ -35,7 +35,7 @@
              class="w-full bg-transparent border-0 outline-none pl-0 placeholder:text-sn-grey" />
       </template>
       <div v-else class="flex items-center gap-1 flex-wrap">
-        <div v-for="tag in tags" class="px-2 py-1 rounded-sm bg-sn-super-light-grey grid grid-cols-[auto_1fr] items-center gap-1">
+        <div v-for="tag in tags" class="sci-tag bg-sn-super-light-grey" :key="tag.value">
           <div class="truncate" v-if="labelRenderer" v-html="tag.label"></div>
           <div class="truncate" v-else>{{ tag.label }}</div>
           <i @click="removeTag(tag.value)" class="sn-icon mini ml-auto sn-icon-close cursor-pointer"></i>
diff --git a/app/views/design_elements/_checkbox.html.erb b/app/views/design_elements/_checkbox.html.erb
index 8514d24d5..9bf023f04 100644
--- a/app/views/design_elements/_checkbox.html.erb
+++ b/app/views/design_elements/_checkbox.html.erb
@@ -2,10 +2,10 @@
 <div  class="mb-8">
   <div class="flex items-center gap-3">
     <div class="sci-checkbox-container">
-      <input type="checkbox" class="sci-checkbox">
+      <input type="checkbox" id="checkbox1" class="sci-checkbox">
       <span class="sci-checkbox-label"></span>
     </div>
-    <label class="sci-label">Checkbox</label>
+    <label class="sci-label" for="checkbox1">Checkbox</label>
   </div>
 
   <div class="flex items-center gap-3">
diff --git a/app/views/design_elements/_select.html.erb b/app/views/design_elements/_select.html.erb
index 087843f52..ab8f0cbb9 100644
--- a/app/views/design_elements/_select.html.erb
+++ b/app/views/design_elements/_select.html.erb
@@ -164,6 +164,7 @@
         :options="simpleOptions"
         :option-renderer="renderer"
         :label-renderer="renderer"
+        :with-checkboxes="true"
         :multiple="true"
         :size="size"
       ></select-dropdown>
diff --git a/app/views/design_elements/_tags.html.erb b/app/views/design_elements/_tags.html.erb
index 7e7807f4e..f4aa31278 100644
--- a/app/views/design_elements/_tags.html.erb
+++ b/app/views/design_elements/_tags.html.erb
@@ -17,5 +17,11 @@
       Disabled tag
       <i class="sn-icon sn-icon-close"></i>
     </div>
+    <% Constants::TAG_COLORS.each do |color| %>
+      <div class="sci-tag text-white" style="background-color: <%= color %>">
+        <%= color %>
+        <i class="sn-icon sn-icon-close"></i>
+      </div>
+    <% end %>
   </div>
 </div>