diff --git a/src/gui/app/directives/modals/setups/create-setup-modal.js b/src/gui/app/directives/modals/setups/create-setup-modal.js
index 703066638..7fb980931 100644
--- a/src/gui/app/directives/modals/setups/create-setup-modal.js
+++ b/src/gui/app/directives/modals/setups/create-setup-modal.js
@@ -84,7 +84,7 @@
             controller: function(commandsService, countersService, currencyService,
                 effectQueuesService, eventsService, hotkeyService, presetEffectListsService,
                 timerService, viewerRolesService, quickActionsService, accountAccess, utilityService,
-                ngToast, backendCommunicator, $q) {
+                ngToast, backendCommunicator, sortTagsService, $q) {
 
                 const $ctrl = this;
 
@@ -161,7 +161,8 @@
                     const components = componentConfig.all.map(c => {
                         return {
                             id: c.id,
-                            name: c[componentConfig.nameField]
+                            name: c[componentConfig.nameField],
+                            tags: sortTagsService.getSortTagsForItem(componentConfig.key, c.sortTags).map(st => st.name)
                         };
                     });
                     const selectedIds = $ctrl.setup.components[componentConfig.key].map(c => c.id);
diff --git a/src/gui/app/directives/modals/setups/firebot-component-list-modal.js b/src/gui/app/directives/modals/setups/firebot-component-list-modal.js
index f94df9b83..e58f48614 100644
--- a/src/gui/app/directives/modals/setups/firebot-component-list-modal.js
+++ b/src/gui/app/directives/modals/setups/firebot-component-list-modal.js
@@ -12,8 +12,11 @@
                     <div id="roles" class="modal-subheader" style="padding: 0 0 4px 0">
                         {{$ctrl.label}}
                     </div>
+                    <div style="height: 55px; display: flex; align-items: center;">
+                        <searchbar search-id="componentSearch" placeholder-text="Search {{$ctrl.label}}..." query="$ctrl.componentSearch" style="width: 100%;"></searchbar>
+                    </div>
                     <div class="viewer-group-list" style="height: inherit; min-height: 100px;max-height: 300px;">
-                        <label ng-repeat="component in $ctrl.allComponents track by component.id" class="control-fb control--checkbox">{{component.name}}
+                        <label ng-repeat="component in $ctrl.allComponents | filter:$ctrl.componentSearch track by component.id" class="control-fb control--checkbox">{{component.name}}
                             <input type="checkbox" ng-click="$ctrl.toggleComponentSelected(component.id)" ng-checked="$ctrl.componentIsSelected(component.id)"  aria-label="..." >
                             <div class="control__indicator"></div>
                         </label>
@@ -29,7 +32,7 @@
                 close: "&",
                 dismiss: "&"
             },
-            controller: function() {
+            controller: function($timeout) {
                 const $ctrl = this;
 
                 $ctrl.label = "";
@@ -56,6 +59,10 @@
                     if ($ctrl.resolve.selectedIds) {
                         $ctrl.selectedIds = $ctrl.resolve.selectedIds;
                     }
+
+                    $timeout(() => {
+                        angular.element("#componentSearch").trigger("focus");
+                    }, 50);
                 };
 
                 $ctrl.save = () => {
diff --git a/src/gui/app/services/sort-tags.service.js b/src/gui/app/services/sort-tags.service.js
index 06b11f262..197b045e6 100644
--- a/src/gui/app/services/sort-tags.service.js
+++ b/src/gui/app/services/sort-tags.service.js
@@ -75,7 +75,7 @@
             /**
              * @param {string} context
              * @param {string[]} tagIds
-             * @returns {string[]}
+             * @returns {SortTag[]}
              */
             service.getSortTagsForItem = (context, tagIds) => {
                 if (context == null || tagIds == null) {