diff --git a/src/actions/event-actions.js b/src/actions/event-actions.js
index e182ce233..58b78f9c6 100644
--- a/src/actions/event-actions.js
+++ b/src/actions/event-actions.js
@@ -481,6 +481,12 @@ export const normalizeEvent = (entity, eventTypeConfig, summit) => {
     }
   }
 
+  if (entity.allowed_ticket_types?.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
+
   if (summit)
     normalizePresentationAllowedQuestionFields(normalizedEntity, summit);
 
@@ -953,7 +959,8 @@ export const getEvent = (eventId) => async (dispatch, getState) => {
   const params = {
     access_token: accessToken,
     expand:
-      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.extra_questions, selection_plan.extra_questions.values,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,created_by,track_chair_scores_avg.ranking_type,actions"
+      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.extra_questions, selection_plan.extra_questions.values,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,created_by,track_chair_scores_avg.ranking_type,actions,allowed_ticket_types,allowed_badge_features_types",
+    fields: "allowed_ticket_types.id,allowed_ticket_types.name"
   };
 
   dispatch(startLoading());
@@ -1053,7 +1060,8 @@ export const saveEvent = (entity, publish) => async (dispatch, getState) => {
   const params = {
     access_token: accessToken,
     expand:
-      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,selection_plan.extra_questions,selection_plan.extra_questions.values,created_by,track_chair_scores_avg.ranking_type,actions"
+      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,selection_plan.extra_questions,selection_plan.extra_questions.values,created_by,track_chair_scores_avg.ranking_type,actions,allowed_ticket_types",
+    fields: "allowed_ticket_types.id,allowed_ticket_types.name"
   };
 
   if (entity.id) {
diff --git a/src/actions/event-type-actions.js b/src/actions/event-type-actions.js
index ace5b4010..9c4cb7005 100644
--- a/src/actions/event-type-actions.js
+++ b/src/actions/event-type-actions.js
@@ -9,9 +9,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 import T from "i18n-react/dist/i18n-react";
-import history from "../history";
 import {
   getRequest,
   putRequest,
@@ -24,6 +23,7 @@ import {
   showSuccessMessage,
   authErrorHandler
 } from "openstack-uicore-foundation/lib/utils/actions";
+import history from "../history";
 import { getAccessTokenSafely } from "../utils/methods";
 
 export const REQUEST_EVENT_TYPES = "REQUEST_EVENT_TYPES";
@@ -67,7 +67,9 @@ export const getEventType = (eventTypeId) => async (dispatch, getState) => {
   dispatch(startLoading());
 
   const params = {
-    expand: "allowed_media_upload_types, allowed_media_upload_types.type",
+    expand:
+      "allowed_media_upload_types, allowed_media_upload_types.type, allowed_ticket_types",
+    fields: "allowed_ticket_types.id,allowed_ticket_types.name",
     access_token: accessToken
   };
 
@@ -81,7 +83,7 @@ export const getEventType = (eventTypeId) => async (dispatch, getState) => {
   });
 };
 
-export const resetEventTypeForm = () => (dispatch, getState) => {
+export const resetEventTypeForm = () => (dispatch) => {
   dispatch(createAction(RESET_EVENT_TYPE_FORM)({}));
 };
 
@@ -103,7 +105,7 @@ export const saveEventType = (entity) => async (dispatch, getState) => {
       normalizedEntity,
       authErrorHandler,
       entity
-    )(params)(dispatch).then((payload) => {
+    )(params)(dispatch).then(() => {
       dispatch(
         showSuccessMessage(T.translate("edit_event_type.event_type_saved"))
       );
@@ -177,32 +179,38 @@ export const seedEventTypes = () => async (dispatch, getState) => {
 const normalizeEntity = (entity) => {
   const normalizedEntity = { ...entity };
 
-  //remove # from color hexa
-  normalizedEntity["color"] = normalizedEntity["color"].substr(1);
+  // remove # from color hexa
+  normalizedEntity.color = normalizedEntity.color.substr(1);
 
-  delete normalizedEntity["id"];
-  delete normalizedEntity["created"];
-  delete normalizedEntity["last_edited"];
-  delete normalizedEntity["is_default"];
+  delete normalizedEntity.id;
+  delete normalizedEntity.created;
+  delete normalizedEntity.last_edited;
+  delete normalizedEntity.is_default;
 
   if (normalizedEntity.class_name === "EVENT_TYPE") {
-    delete normalizedEntity["should_be_available_on_cfp"];
-    delete normalizedEntity["use_speakers"];
-    delete normalizedEntity["are_speakers_mandatory"];
-    delete normalizedEntity["min_speakers"];
-    delete normalizedEntity["max_speakers"];
-    delete normalizedEntity["use_moderator"];
-    delete normalizedEntity["is_moderator_mandatory"];
-    delete normalizedEntity["min_moderators"];
-    delete normalizedEntity["max_moderators"];
-    delete normalizedEntity["moderator_label"];
-    delete normalizedEntity["min_duration"];
-    delete normalizedEntity["max_duration"];
+    delete normalizedEntity.should_be_available_on_cfp;
+    delete normalizedEntity.use_speakers;
+    delete normalizedEntity.are_speakers_mandatory;
+    delete normalizedEntity.min_speakers;
+    delete normalizedEntity.max_speakers;
+    delete normalizedEntity.use_moderator;
+    delete normalizedEntity.is_moderator_mandatory;
+    delete normalizedEntity.min_moderators;
+    delete normalizedEntity.max_moderators;
+    delete normalizedEntity.moderator_label;
+    delete normalizedEntity.min_duration;
+    delete normalizedEntity.max_duration;
   }
 
   if (normalizedEntity.show_always_on_schedule) {
     normalizedEntity.allowed_ticket_types = [];
   }
 
+  if (normalizedEntity.allowed_ticket_types.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
+
   return normalizedEntity;
 };
diff --git a/src/actions/order-actions.js b/src/actions/order-actions.js
index 1dee5918b..db993a294 100644
--- a/src/actions/order-actions.js
+++ b/src/actions/order-actions.js
@@ -105,6 +105,11 @@ const normalizeQuestion = (entity) => {
       normalizedEntity.max_selected_values
     );
   }
+  if (normalizedEntity.allowed_ticket_types?.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
   return normalizedEntity;
 };
 
@@ -195,7 +200,8 @@ export const getOrderExtraQuestion =
 
     const params = {
       access_token: accessToken,
-      expand: "values,sub_question_rules"
+      expand: "values,sub_question_rules,allowed_ticket_types",
+      fields: "allowed_ticket_types.id, allowed_ticket_types.name"
     };
 
     return getRequest(
@@ -494,6 +500,10 @@ const normalizePurchaseOrder = (entity) => {
     delete normalizedEntity.owner_company_id;
   }
 
+  if (normalizedEntity.ticket_type_id != null) {
+    normalizedEntity.ticket_type_id = normalizedEntity.ticket_type_id.id;
+  }
+
   delete normalizedEntity.extra_questions;
 
   return normalizedEntity;
diff --git a/src/actions/registration-invitation-actions.js b/src/actions/registration-invitation-actions.js
index 6af234dad..4d45fc7d5 100644
--- a/src/actions/registration-invitation-actions.js
+++ b/src/actions/registration-invitation-actions.js
@@ -9,7 +9,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import T from "i18n-react/dist/i18n-react";
 import {
@@ -29,6 +29,8 @@ import {
 import history from "../history";
 import { checkOrFilter, getAccessTokenSafely } from "../utils/methods";
 import { getSentEmailsByTemplatesAndEmail } from "./email-actions";
+import { DEFAULT_PER_PAGE } from "../utils/constants";
+
 export const REQUEST_INVITATIONS = "REQUEST_INVITATIONS";
 export const RECEIVE_INVITATIONS = "RECEIVE_INVITATIONS";
 export const INVITATIONS_IMPORTED = "INVITATIONS_IMPORTED";
@@ -51,13 +53,13 @@ export const REGISTRATION_INVITATION_ALL_DELETED =
 export const SET_CURRENT_FLOW_EVENT = "SET_CURRENT_FLOW_EVENT";
 export const SET_SELECTED_ALL = "SET_SELECTED_ALL";
 
-/**************************   INVITATIONS   ******************************************/
+/* *************************   INVITATIONS   ***************************************** */
 
 export const getInvitations =
   (
     term = null,
     page = 1,
-    perPage = 10,
+    perPage = DEFAULT_PER_PAGE,
     order = "id",
     orderDir = 1,
     filters = {}
@@ -71,7 +73,7 @@ export const getInvitations =
     dispatch(startLoading());
 
     const params = {
-      page: page,
+      page,
       per_page: perPage,
       access_token: accessToken,
       expand: "allowed_ticket_types,tags"
@@ -86,7 +88,7 @@ export const getInvitations =
     // order
     if (order != null && orderDir != null) {
       const orderDirSign = orderDir === 1 ? "+" : "-";
-      params["order"] = `${orderDirSign}${order}`;
+      params.order = `${orderDirSign}${order}`;
     }
 
     return getRequest(
@@ -138,7 +140,7 @@ export const exportInvitationsCSV =
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
-    const filename = currentSummit.name + "-invitations.csv";
+    const filename = `${currentSummit.name}-invitations.csv`;
     const filter = parseFilters(filters, term);
 
     const params = {
@@ -152,7 +154,7 @@ export const exportInvitationsCSV =
     // order
     if (order != null && orderDir != null) {
       const orderDirSign = orderDir === 1 ? "+" : "-";
-      params["order"] = `${orderDirSign}${order}`;
+      params.order = `${orderDirSign}${order}`;
     }
 
     dispatch(
@@ -164,15 +166,15 @@ export const exportInvitationsCSV =
     );
   };
 
-export const selectInvitation = (invitationId) => (dispatch, getState) => {
+export const selectInvitation = (invitationId) => (dispatch) => {
   dispatch(createAction(SELECT_INVITATION)(invitationId));
 };
 
-export const unSelectInvitation = (invitationId) => (dispatch, getState) => {
+export const unSelectInvitation = (invitationId) => (dispatch) => {
   dispatch(createAction(UNSELECT_INVITATION)(invitationId));
 };
 
-export const clearAllSelectedInvitations = () => (dispatch, getState) => {
+export const clearAllSelectedInvitations = () => (dispatch) => {
   dispatch(createAction(CLEAR_ALL_SELECTED_INVITATIONS)());
 };
 
@@ -242,15 +244,15 @@ export const deleteAllRegistrationInvitation =
     });
   };
 
-export const resetRegistrationInvitationForm = () => (dispatch, getState) => {
+export const resetRegistrationInvitationForm = () => (dispatch) => {
   dispatch(createAction(RESET_REGISTRATION_INVITATION_FORM)({}));
 };
 
-export const setCurrentFlowEvent = (value) => (dispatch, getState) => {
+export const setCurrentFlowEvent = (value) => (dispatch) => {
   dispatch(createAction(SET_CURRENT_FLOW_EVENT)(value));
 };
 
-export const setSelectedAll = (value) => (dispatch, getState) => {
+export const setSelectedAll = (value) => (dispatch) => {
   dispatch(createAction(SET_SELECTED_ALL)(value));
 };
 
@@ -338,10 +340,10 @@ const normalizeEntity = (entity) => {
     (tt) => tt.id
   );
   normalizedEntity.tags = entity.tags.map((t) => t.tag);
-  delete normalizedEntity["created"];
-  delete normalizedEntity["last_edited"];
-  delete normalizedEntity["is_sent"];
-  delete normalizedEntity["accepted_date"];
+  delete normalizedEntity.created;
+  delete normalizedEntity.last_edited;
+  delete normalizedEntity.is_sent;
+  delete normalizedEntity.accepted_date;
   return normalizedEntity;
 };
 
@@ -384,11 +386,11 @@ export const sendEmails =
     };
 
     if (testRecipient) {
-      payload["test_email_recipient"] = testRecipient;
+      payload.test_email_recipient = testRecipient;
     }
 
     if (excerptRecipient) {
-      payload["outcome_email_recipient"] = excerptRecipient;
+      payload.outcome_email_recipient = excerptRecipient;
     }
 
     dispatch(startLoading());
@@ -424,11 +426,14 @@ const parseFilters = (filters, term = null) => {
   }
 
   if (filters.allowedTicketTypesIds?.length > 0) {
-    filter.push("ticket_types_id==" + filters.allowedTicketTypesIds.join("||"));
+    const ticketTypesId = filters.allowedTicketTypesIds.map((tt) =>
+      tt?.id ? tt.id : tt
+    );
+    filter.push(`ticket_types_id==${ticketTypesId.join("||")}`);
   }
 
   if (filters.tagFilter?.length > 0) {
-    filter.push("tags_id==" + filters.tagFilter.map((e) => e.id).join("||"));
+    filter.push(`tags_id==${filters.tagFilter.map((e) => e.id).join("||")}`);
   }
 
   if (term) {
diff --git a/src/actions/summit-actions.js b/src/actions/summit-actions.js
index f60fb0fa7..129fefde4 100644
--- a/src/actions/summit-actions.js
+++ b/src/actions/summit-actions.js
@@ -72,6 +72,7 @@ export const getSummitById = (summitId) => async (dispatch) => {
       "selection_plans," +
       "ticket_types," +
       "badge_types," +
+      "badge_features," +
       "badge_features_types," +
       "badge_access_level_types," +
       "badge_view_types," +
diff --git a/src/components/forms/event-form.js b/src/components/forms/event-form.js
index 3518dfe74..3b2dd5a1f 100644
--- a/src/components/forms/event-form.js
+++ b/src/components/forms/event-form.js
@@ -32,6 +32,7 @@ import {
   Table,
   MemberInput,
   FreeTextSearch,
+  TicketTypesInput,
   SortableTable
 } from "openstack-uicore-foundation/lib/components";
 import { Pagination } from "react-bootstrap";
@@ -986,11 +987,6 @@ class EventForm extends React.Component {
       { label: "Submission", value: "Submission" }
     ];
 
-    const ticket_types_ddl = currentSummit.ticket_types.map((t) => ({
-      value: t.id,
-      label: t.name
-    }));
-
     return (
       <div>
         <input type="hidden" id="id" value={entity.id} />
@@ -1509,7 +1505,7 @@ class EventForm extends React.Component {
               <UploadInput
                 value={entity.attachment}
                 handleUpload={this.handleUploadFile}
-                handleRemove={(ev) => this.handleRemoveFile("attachment")}
+                handleRemove={() => this.handleRemoveFile("attachment")}
                 className="dropzone col-md-6"
                 multiple={this.props.multi}
                 accept="image/*"
@@ -1523,7 +1519,7 @@ class EventForm extends React.Component {
             <UploadInput
               value={entity.image}
               handleUpload={this.handleUploadPic}
-              handleRemove={(ev) => this.handleRemoveFile("image")}
+              handleRemove={() => this.handleRemoveFile("image")}
               className="dropzone col-md-6"
               multiple={false}
               accept="image/*"
@@ -1975,14 +1971,17 @@ class EventForm extends React.Component {
           <div className="row">
             <div className="col-md-4">
               <label> {T.translate("edit_event.allowed_ticket_types")}</label>
-              <Dropdown
+              <TicketTypesInput
                 id="allowed_ticket_types"
                 value={entity?.allowed_ticket_types}
                 placeholder={T.translate(
                   "edit_event.placeholders.allowed_ticket_types"
                 )}
-                options={ticket_types_ddl}
+                summitId={currentSummit.id}
                 onChange={this.handleChange}
+                version="v2"
+                defaultOptions
+                optionsLimit={100}
                 isMulti
               />
             </div>
diff --git a/src/components/forms/event-type-form.js b/src/components/forms/event-type-form.js
index f98ad4ef0..dea75dc08 100644
--- a/src/components/forms/event-type-form.js
+++ b/src/components/forms/event-type-form.js
@@ -9,7 +9,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
 import T from "i18n-react/dist/i18n-react";
@@ -18,7 +18,8 @@ import {
   Dropdown,
   Input,
   SimpleLinkList,
-  Panel
+  Panel,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
 import {
   isEmpty,
@@ -44,7 +45,7 @@ class EventTypeForm extends React.Component {
     this.handleMediaUploadLink = this.handleMediaUploadLink.bind(this);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
     const state = {};
     scrollToError(this.props.errors);
 
@@ -63,8 +64,8 @@ class EventTypeForm extends React.Component {
   }
 
   handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
+    const newEntity = { ...this.state.entity };
+    const newErrors = { ...this.state.errors };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
@@ -75,22 +76,22 @@ class EventTypeForm extends React.Component {
       value = parseInt(ev.target.value);
     }
 
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity: entity, errors: errors });
+    newErrors[id] = "";
+    newEntity[id] = value;
+    this.setState({ entity: newEntity, errors: newErrors });
   }
 
   handleShowAlwaysChange(ev) {
-    const entity = { ...this.state.entity };
+    const newEntity = { ...this.state.entity };
     const value = ev.target.checked;
 
     // if true then we clear allowed ticket types
     if (value) {
-      entity.allowed_ticket_types = [];
+      newEntity.allowed_ticket_types = [];
     }
 
-    entity.show_always_on_schedule = value;
-    this.setState({ entity: entity });
+    newEntity.show_always_on_schedule = value;
+    this.setState({ entity: newEntity });
   }
 
   handleSubmit(ev) {
@@ -124,10 +125,6 @@ class EventTypeForm extends React.Component {
       { label: "Presentation", value: "PRESENTATION_TYPE" },
       { label: "Event", value: "EVENT_TYPE" }
     ];
-    const ticket_types_ddl = currentSummit.ticket_types.map((t) => ({
-      value: t.id,
-      label: t.name
-    }));
 
     const blackout_times_ddl = [
       {
@@ -598,15 +595,17 @@ class EventTypeForm extends React.Component {
                 {" "}
                 {T.translate("edit_event_type.allowed_ticket_types")}
               </label>
-              <Dropdown
+              <TicketTypesInput
                 id="allowed_ticket_types"
-                value={entity.allowed_ticket_types}
+                value={entity?.allowed_ticket_types}
                 placeholder={T.translate(
                   "edit_event_type.placeholders.allowed_ticket_types"
                 )}
-                options={ticket_types_ddl}
+                summitId={currentSummit.id}
                 onChange={this.handleChange}
+                optionsLimit={100}
                 disabled={!!entity.show_always_on_schedule}
+                defaultOptions
                 isMulti
               />
             </div>
diff --git a/src/components/forms/extra-question-form/index.js b/src/components/forms/extra-question-form/index.js
index a7dd37936..6491dd923 100644
--- a/src/components/forms/extra-question-form/index.js
+++ b/src/components/forms/extra-question-form/index.js
@@ -9,18 +9,20 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
-import history from "../../../history";
 import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
 import {
   Dropdown,
   Input,
   TextEditor,
-  SortableTable
+  SortableTable,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
+import { Modal } from "react-bootstrap";
+import history from "../../../history";
 import {
   isEmpty,
   scrollToError,
@@ -28,7 +30,6 @@ import {
   hasErrors
 } from "../../../utils/methods";
 import { ExtraQuestionsTypeAllowSubQuestion } from "../../../utils/constants";
-import { Modal } from "react-bootstrap";
 import "./styles.less";
 
 class ExtraQuestionForm extends React.Component {
@@ -56,7 +57,7 @@ class ExtraQuestionForm extends React.Component {
     this.handleAddNewValue = this.handleAddNewValue.bind(this);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
     const state = {};
     scrollToError(this.props.errors);
 
@@ -75,15 +76,15 @@ class ExtraQuestionForm extends React.Component {
   }
 
   handleChangeValue(ev) {
-    const currentEditValue = { ...this.state.currentEditValue };
+    const newCurrentEditValue = { ...this.state.currentEditValue };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
       value = ev.target.checked;
     }
 
-    currentEditValue[id] = value;
-    this.setState({ ...this.state, currentEditValue: currentEditValue });
+    newCurrentEditValue[id] = value;
+    this.setState({ ...this.state, currentEditValue: newCurrentEditValue });
   }
 
   handleEditValue(valueId) {
@@ -94,17 +95,17 @@ class ExtraQuestionForm extends React.Component {
   }
 
   handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
+    const newEntity = { ...this.state.entity };
+    const newErrors = { ...this.state.errors };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
       value = ev.target.checked;
     }
 
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity: entity, errors: errors });
+    newErrors[id] = "";
+    newEntity[id] = value;
+    this.setState({ entity: newEntity, errors: newErrors });
   }
 
   handleOnSaveQuestionValue(ev) {
@@ -122,7 +123,7 @@ class ExtraQuestionForm extends React.Component {
     this.props.onSubmit(this.state.entity);
   }
 
-  handleNewSubQuestionRule(ev) {
+  handleNewSubQuestionRule() {
     const { entity } = this.state;
     history.push(
       `/app/summits/${entity.summit_id}/order-extra-questions/${entity.id}/sub-rule/new`
@@ -156,7 +157,7 @@ class ExtraQuestionForm extends React.Component {
 
   formatRuleQuestionColumn(item) {
     const { summitExtraQuestions } = this.props;
-    let question = summitExtraQuestions.find(
+    const question = summitExtraQuestions.find(
       (e) => e.id === item.sub_question_id
     );
     return `${item.visibility === "Visible" ? "Show" : "Not Show"} ${
@@ -219,15 +220,6 @@ class ExtraQuestionForm extends React.Component {
             value: f.id
           }))
         : [];
-    const ticket_type_ddl =
-      currentSummit &&
-      currentSummit.ticket_types &&
-      currentSummit.ticket_types.length > 0
-        ? currentSummit.ticket_types.map((tt) => ({
-            label: tt.name,
-            value: tt.id
-          }))
-        : [];
 
     const question_usage_ddl = [
       { label: "Order", value: "Order" },
@@ -247,9 +239,8 @@ class ExtraQuestionForm extends React.Component {
       {
         columnKey: "is_default",
         value: T.translate("question_form.is_default"),
-        render: (row, val) => {
-          return val ? T.translate("general.yes") : T.translate("general.no");
-        },
+        render: (row, val) =>
+          val ? T.translate("general.yes") : T.translate("general.no"),
         input: "checkbox"
       }
     ];
@@ -421,27 +412,24 @@ class ExtraQuestionForm extends React.Component {
             )}
           </div>
           <div className="row form-group">
-            {ticket_type_ddl.length > 0 && (
-              <div className="col-md-4">
-                <label>
-                  {T.translate("question_form.allowed_ticket_types")} &nbsp;
-                  <i
-                    className="fa fa-info-circle"
-                    title={T.translate(
-                      "question_form.allowed_ticket_types_info"
-                    )}
-                  />
-                </label>
-                <Dropdown
-                  id="allowed_ticket_types"
-                  clearable
-                  isMulti
-                  value={entity.allowed_ticket_types}
-                  onChange={this.handleChange}
-                  options={ticket_type_ddl}
+            <div className="col-md-4">
+              <label>
+                {T.translate("question_form.allowed_ticket_types")} &nbsp;
+                <i
+                  className="fa fa-info-circle"
+                  title={T.translate("question_form.allowed_ticket_types_info")}
                 />
-              </div>
-            )}
+              </label>
+              <TicketTypesInput
+                id="allowed_ticket_types"
+                value={entity?.allowed_ticket_types}
+                summitId={currentSummit.id}
+                onChange={this.handleChange}
+                optionsLimit={100}
+                defaultOptions
+                isMulti
+              />
+            </div>
             {badge_features_ddl.length >= 0 && (
               <>
                 <div className="col-md-2 col-md-offset-1">
@@ -460,11 +448,11 @@ class ExtraQuestionForm extends React.Component {
                   </label>
                   <Dropdown
                     id="allowed_badge_features_types"
-                    clearable
-                    isMulti
                     value={entity.allowed_badge_features_types}
-                    onChange={this.handleChange}
                     options={badge_features_ddl}
+                    onChange={this.handleChange}
+                    clearable
+                    isMulti
                   />
                 </div>
               </>
@@ -539,7 +527,7 @@ class ExtraQuestionForm extends React.Component {
         {currentEditValue != null && (
           <Modal
             className="modal_edit_value"
-            show={true}
+            show
             onHide={() =>
               this.setState({ ...this.state, currentEditValue: null })
             }
diff --git a/src/components/forms/purchase-order-form.js b/src/components/forms/purchase-order-form.js
index 128f88f2a..e5be630bf 100644
--- a/src/components/forms/purchase-order-form.js
+++ b/src/components/forms/purchase-order-form.js
@@ -16,10 +16,10 @@ import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
 import {
   Input,
-  Dropdown,
   Table,
   Panel,
-  PromocodeInput
+  PromocodeInput,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
 import { Pagination } from "react-bootstrap";
 import OwnerInput from "../inputs/owner-input";
@@ -39,7 +39,7 @@ class PurchaseOrderForm extends React.Component {
       entity: { ...props.entity },
       errors: props.errors,
       showSection: "billing",
-      addTicketTypeId: 0,
+      addTicketTypeId: null,
       addTicketQty: 0,
       addPromoCode: null
     };
@@ -97,11 +97,16 @@ class PurchaseOrderForm extends React.Component {
   handleAddTickets = (ev) => {
     ev.preventDefault();
 
-    const { addTicketTypeId, addTicketQty, addPromoCode, entity } = this.state;
-    if (!entity || !addTicketTypeId || !addTicketQty) return;
+    const {
+      addTicketTypeId: { id: ticketTypeId },
+      addTicketQty,
+      addPromoCode,
+      entity
+    } = this.state;
+    if (!entity || !ticketTypeId || !addTicketQty) return;
 
     this.props
-      .addTickets(entity.id, addTicketTypeId, addTicketQty, addPromoCode)
+      .addTickets(entity.id, ticketTypeId, addTicketQty, addPromoCode)
       .then(() =>
         this.setState({
           addTicketTypeId: null,
@@ -184,11 +189,6 @@ class PurchaseOrderForm extends React.Component {
       }
     };
 
-    const ticket_type_ddl = currentSummit?.ticket_types?.map((tt) => ({
-      label: tt.name,
-      value: tt.id
-    }));
-
     const tax_columns = [
       ...(entity?.approved_refunds_taxes?.map((tax) => ({
         columnKey: `tax_${tax.id}_refunded_amount`,
@@ -329,11 +329,14 @@ class PurchaseOrderForm extends React.Component {
           <div className="row form-group">
             <div className="col-md-6">
               <label> {T.translate("edit_purchase_order.ticket_type")}</label>
-              <Dropdown
+              <TicketTypesInput
                 id="ticket_type_id"
                 value={entity.ticket_type_id}
+                summitId={currentSummit.id}
                 onChange={this.handleChange}
-                options={ticket_type_ddl}
+                version="v2"
+                defaultOptions
+                optionsLimit={100}
               />
             </div>
             <div className="col-md-3">
@@ -510,16 +513,19 @@ class PurchaseOrderForm extends React.Component {
                       {" "}
                       {T.translate("edit_purchase_order.ticket_type")}
                     </label>
-                    <Dropdown
-                      clearable
-                      options={ticket_type_ddl}
+                    <TicketTypesInput
                       value={this.state.addTicketTypeId}
+                      summitId={currentSummit.id}
                       onChange={(ev) => {
                         this.setState({
                           ...this.state,
-                          addTicketTypeId: parseInt(ev.target.value)
+                          addTicketTypeId: ev.target.value
                         });
                       }}
+                      version="v2"
+                      defaultOptions
+                      optionsLimit={100}
+                      isClearable
                     />
                   </div>
                   <div className="col-md-4">
diff --git a/src/components/forms/tax-type-form.js b/src/components/forms/tax-type-form.js
index 71a6db7bf..a81b7955c 100644
--- a/src/components/forms/tax-type-form.js
+++ b/src/components/forms/tax-type-form.js
@@ -9,7 +9,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
 import T from "i18n-react/dist/i18n-react";
@@ -18,7 +18,9 @@ import {
   Input,
   SimpleLinkList
 } from "openstack-uicore-foundation/lib/components";
+import { queryTicketTypes } from "openstack-uicore-foundation/lib/utils/query-actions";
 import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
+import { MILLISECONDS_TO_SECONDS } from "../../utils/constants";
 
 class TaxTypeForm extends React.Component {
   constructor(props) {
@@ -29,14 +31,13 @@ class TaxTypeForm extends React.Component {
       errors: props.errors
     };
 
-    this.queryTickets = this.queryTickets.bind(this);
     this.handleTicketLink = this.handleTicketLink.bind(this);
     this.handleTicketUnLink = this.handleTicketUnLink.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
     const state = {};
     scrollToError(this.props.errors);
 
@@ -55,8 +56,8 @@ class TaxTypeForm extends React.Component {
   }
 
   handleChange(ev) {
-    let entity = { ...this.state.entity };
-    let errors = { ...this.state.errors };
+    const newEntity = { ...this.state.entity };
+    const newErrors = { ...this.state.errors };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
@@ -64,23 +65,23 @@ class TaxTypeForm extends React.Component {
     }
 
     if (ev.target.type === "datetime") {
-      value = value.valueOf() / 1000;
+      value = value.valueOf() / MILLISECONDS_TO_SECONDS;
     }
 
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity: entity, errors: errors });
+    newErrors[id] = "";
+    newEntity[id] = value;
+    this.setState({ entity: newEntity, errors: newErrors });
   }
 
   handleSubmit(ev) {
-    let entity = { ...this.state.entity };
+    const entity = { ...this.state.entity };
     ev.preventDefault();
 
-    this.props.onSubmit(this.state.entity);
+    this.props.onSubmit(entity);
   }
 
   hasErrors(field) {
-    let { errors } = this.state;
+    const { errors } = this.state;
     if (field in errors) {
       return errors[field];
     }
@@ -98,22 +99,11 @@ class TaxTypeForm extends React.Component {
     this.props.onTicketUnLink(entity.id, valueId);
   }
 
-  queryTickets(input, callback) {
-    const { currentSummit } = this.props;
-    let ticketTypes = [];
-
-    ticketTypes = currentSummit.ticket_types.filter(
-      (f) => f.name.toLowerCase().indexOf(input.toLowerCase()) !== -1
-    );
-
-    callback(ticketTypes);
-  }
-
   render() {
     const { entity } = this.state;
     const { currentSummit } = this.props;
 
-    let ticketColumns = [
+    const ticketColumns = [
       { columnKey: "name", value: T.translate("edit_tax_type.name") },
       {
         columnKey: "description",
@@ -121,13 +111,14 @@ class TaxTypeForm extends React.Component {
       }
     ];
 
-    let ticketOptions = {
+    const ticketOptions = {
       title: T.translate("edit_tax_type.ticket_types"),
       valueKey: "name",
       labelKey: "name",
       defaultOptions: true,
       actions: {
-        search: this.queryTickets,
+        search: (ev, callback) =>
+          queryTicketTypes(currentSummit.id, { name: ev }, callback, "v2"),
         delete: { onClick: this.handleTicketUnLink },
         add: { onClick: this.handleTicketLink }
       }
diff --git a/src/pages/attendees/summit-attendees-list-page.js b/src/pages/attendees/summit-attendees-list-page.js
index bff014045..a5378ba93 100644
--- a/src/pages/attendees/summit-attendees-list-page.js
+++ b/src/pages/attendees/summit-attendees-list-page.js
@@ -23,7 +23,8 @@ import {
   SelectableTable,
   DateTimePicker,
   TagInput,
-  CompanyInput
+  CompanyInput,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import { SegmentedControl } from "segmented-control";
@@ -127,6 +128,7 @@ class SummitAttendeeListPage extends React.Component {
     this.handleApplyEventFilters = this.handleApplyEventFilters.bind(this);
     this.handleTermChange = this.handleTermChange.bind(this);
     this.handleOrAndFilter = this.handleOrAndFilter.bind(this);
+    this.handleParseFilters = this.handleParseFilters.bind(this);
     this.state = {
       showModal: false,
       modalTitle: "",
@@ -147,7 +149,7 @@ class SummitAttendeeListPage extends React.Component {
       term,
       order,
       orderDir,
-      attendeeFilters,
+      this.handleParseFilters(attendeeFilters),
       selectedColumns
     );
   }
@@ -160,7 +162,7 @@ class SummitAttendeeListPage extends React.Component {
   }
 
   handleChangeFlowEvent(ev) {
-    const { value, id } = ev.target;
+    const { value } = ev.target;
     this.props.setCurrentFlowEvent(value);
   }
 
@@ -252,7 +254,7 @@ class SummitAttendeeListPage extends React.Component {
         DEFAULT_PER_PAGE,
         order,
         orderDir,
-        filters,
+        this.handleParseFilters(filters),
         extraColumns
       );
     }
@@ -293,12 +295,12 @@ class SummitAttendeeListPage extends React.Component {
       perPage,
       order,
       orderDir,
-      attendeeFilters,
+      this.handleParseFilters(attendeeFilters),
       selectedColumns
     );
   }
 
-  handleSort(index, key, dir, func) {
+  handleSort(index, key, dir) {
     const { page, perPage, term } = this.props;
     const { attendeeFilters, selectedColumns } = this.state;
     key = key === "name" ? "full_name" : key;
@@ -308,7 +310,7 @@ class SummitAttendeeListPage extends React.Component {
       perPage,
       key,
       dir,
-      attendeeFilters,
+      this.handleParseFilters(attendeeFilters),
       selectedColumns
     );
   }
@@ -322,12 +324,12 @@ class SummitAttendeeListPage extends React.Component {
       perPage,
       order,
       orderDir,
-      attendeeFilters,
+      this.handleParseFilters(attendeeFilters),
       selectedColumns
     );
   }
 
-  handleNewAttendee(ev) {
+  handleNewAttendee() {
     const { currentSummit, history } = this.props;
     history.push(`/app/summits/${currentSummit.id}/attendees/new`);
   }
@@ -361,7 +363,7 @@ class SummitAttendeeListPage extends React.Component {
       perPage,
       order,
       orderDir,
-      attendeeFilters,
+      this.handleParseFilters(attendeeFilters),
       selectedColumns
     );
   }
@@ -459,10 +461,13 @@ class SummitAttendeeListPage extends React.Component {
           : `${ev.target.operator}${ev.target.value}`;
       }
     }
-    this.setState({
-      ...this.state,
-      attendeeFilters: { ...this.state.attendeeFilters, [id]: value }
-    });
+    this.setState(
+      {
+        ...this.state,
+        attendeeFilters: { ...this.state.attendeeFilters, [id]: value }
+      },
+      () => console.log("CHECK...", this.state.attendeeFilters)
+    );
   }
 
   handleOrAndFilter(ev) {
@@ -476,6 +481,16 @@ class SummitAttendeeListPage extends React.Component {
     this.props.changeAttendeeListSearchTerm(term);
   }
 
+  handleParseFilters(filters) {
+    const parsedFilters = { ...filters };
+    if (parsedFilters.ticketTypeFilter?.length > 0) {
+      parsedFilters.ticketTypeFilter = filters.ticketTypeFilter.map(
+        (tt) => tt.id
+      );
+    }
+    return parsedFilters;
+  }
+
   render() {
     const {
       currentSummit,
@@ -490,8 +505,7 @@ class SummitAttendeeListPage extends React.Component {
       currentFlowEvent,
       selectedAll,
       badgeFeatures,
-      badgeTypes,
-      sendEmails
+      badgeTypes
     } = this.props;
 
     const {
@@ -605,10 +619,6 @@ class SummitAttendeeListPage extends React.Component {
       }
     ];
 
-    const ticketTypesDDL = [
-      ...currentSummit.ticket_types.map((t) => ({ label: t.name, value: t.id }))
-    ];
-
     const featuresTypesDDL = [
       ...badgeFeatures.map((bf) => ({ label: bf.name, value: bf.id }))
     ];
@@ -922,15 +932,17 @@ class SummitAttendeeListPage extends React.Component {
               className="col-md-6"
               style={{ minHeight: "61px", paddingTop: "8px" }}
             >
-              <Dropdown
+              <TicketTypesInput
                 id="ticketTypeFilter"
                 value={attendeeFilters.ticketTypeFilter}
                 onChange={this.handleExtraFilterChange}
-                options={ticketTypesDDL}
-                isClearable
                 placeholder={T.translate(
                   "attendee_list.placeholders.ticket_type"
                 )}
+                version="v2"
+                summitId={currentSummit.id}
+                optionsLimit={100}
+                defaultOptions
                 isMulti
               />
             </div>
diff --git a/src/pages/sponsors/edit-sponsor-extra-question-page.js b/src/pages/sponsors/edit-sponsor-extra-question-page.js
index 7baea8d34..07f9579ea 100644
--- a/src/pages/sponsors/edit-sponsor-extra-question-page.js
+++ b/src/pages/sponsors/edit-sponsor-extra-question-page.js
@@ -87,6 +87,7 @@ function EditSponsorExtraQuestionPage({
       <hr />
       {currentSummit && (
         <ExtraQuestionForm
+          currentSummit={currentSummit}
           shouldAllowSubRules={false}
           shouldShowUsage={false}
           shouldShowPrintable={false}
diff --git a/src/pages/summits/edit-selection-plan-extra-question-page.js b/src/pages/summits/edit-selection-plan-extra-question-page.js
index de0fa7926..b0c92088a 100644
--- a/src/pages/summits/edit-selection-plan-extra-question-page.js
+++ b/src/pages/summits/edit-selection-plan-extra-question-page.js
@@ -56,7 +56,7 @@ class EditSelectionPlanExtraQuestionPage extends React.Component {
     this.props.saveSelectionPlanExtraQuestion(selectionPlanId, entity);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
     const oldId = prevProps.match.params.extra_question_id;
     const newId = this.props.match.params.extra_question_id;
     const selectionPlanId = this.props.currentSelectionPlan.id;
@@ -132,6 +132,7 @@ class EditSelectionPlanExtraQuestionPage extends React.Component {
         <hr />
         {currentSummit && (
           <ExtraQuestionForm
+            currentSummit={currentSummit}
             shouldAllowSubRules={false}
             shouldShowUsage={false}
             shouldShowPrintable={false}
diff --git a/src/pages/tickets/registration-invitations-list-page.js b/src/pages/tickets/registration-invitations-list-page.js
index 35fd4c1e6..3d05e485f 100644
--- a/src/pages/tickets/registration-invitations-list-page.js
+++ b/src/pages/tickets/registration-invitations-list-page.js
@@ -9,7 +9,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
 import { connect } from "react-redux";
@@ -22,8 +22,10 @@ import {
   UploadInput,
   Dropdown,
   TagInput,
-  Input
+  Input,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
+import { SegmentedControl } from "segmented-control";
 import { getSummitById } from "../../actions/summit-actions";
 import {
   exportInvitationsCSV,
@@ -46,11 +48,10 @@ import {
 } from "../../utils/constants";
 
 import "../../styles/registration-invitation-list-page.less";
-import { SegmentedControl } from "segmented-control";
 import OrAndFilter from "../../components/filters/or-and-filter";
 import { validateEmail } from "../../utils/methods";
 import InvitationStatusDropdown from "../../components/inputs/invitation-status-dropdown";
-import SendEmailModal from "../../components/send-email-modal/index.jsx";
+import SendEmailModal from "../../components/send-email-modal/index";
 
 class RegistrationInvitationsListPage extends React.Component {
   constructor(props) {
@@ -145,7 +146,7 @@ class RegistrationInvitationsListPage extends React.Component {
   }
 
   handleChangeFlowEvent(ev) {
-    const { value, id } = ev.target;
+    const { value } = ev.target;
     this.props.setCurrentFlowEvent(value);
   }
 
@@ -159,7 +160,7 @@ class RegistrationInvitationsListPage extends React.Component {
       showCancelButton: true,
       confirmButtonColor: "#DD6B55",
       confirmButtonText: T.translate("general.yes_delete")
-    }).then(function (result) {
+    }).then((result) => {
       if (result.value) {
         deleteAllRegistrationInvitation();
       }
@@ -168,20 +169,18 @@ class RegistrationInvitationsListPage extends React.Component {
 
   handleDelete(invitation_id) {
     const { deleteRegistrationInvitation, invitations } = this.props;
-    let invitation = invitations.find((i) => i.id === invitation_id);
+    const invitation = invitations.find((i) => i.id === invitation_id);
 
     Swal.fire({
       title: T.translate("general.are_you_sure"),
-      text:
-        T.translate("registration_invitation_list.remove_warning") +
-        " (" +
-        invitation.email +
-        ") .",
+      text: `${T.translate("registration_invitation_list.remove_warning")} (${
+        invitation.email
+      }) .`,
       type: "warning",
       showCancelButton: true,
       confirmButtonColor: "#DD6B55",
       confirmButtonText: T.translate("general.yes_delete")
-    }).then(function (result) {
+    }).then((result) => {
       if (result.value) {
         deleteRegistrationInvitation(invitation_id);
       }
@@ -262,10 +261,10 @@ class RegistrationInvitationsListPage extends React.Component {
   }
 
   handleSelectedAll(ev) {
-    let selectedAllCb = ev.target.checked;
+    const selectedAllCb = ev.target.checked;
     this.props.setSelectedAll(selectedAllCb);
     if (!selectedAllCb) {
-      //clear all selected
+      // clear all selected
       this.props.clearAllSelectedInvitations();
     }
   }
@@ -273,8 +272,11 @@ class RegistrationInvitationsListPage extends React.Component {
   handleTicketTypeSelected(ev) {
     const { term, page, order, orderDir, perPage, status, isSent, tagFilter } =
       this.props;
-    let { value } = ev.target;
-    const ticketTypeFilter = [...value];
+    const { value } = ev.target;
+    const ticketTypeFilter = [...value].map((tt) => ({
+      id: tt.id,
+      name: tt.name
+    }));
     const {
       invitationFilter: { orAndFilter }
     } = this.state;
@@ -287,7 +289,7 @@ class RegistrationInvitationsListPage extends React.Component {
     });
   }
 
-  handleSort(index, key, dir, func) {
+  handleSort(index, key, dir) {
     const {
       term,
       page,
@@ -548,7 +550,7 @@ class RegistrationInvitationsListPage extends React.Component {
     const table_options = {
       sortCol: order,
       sortDir: orderDir,
-      selectedAll: selectedAll,
+      selectedAll,
       actions: {
         edit: {
           onClick: this.handleEdit,
@@ -561,11 +563,7 @@ class RegistrationInvitationsListPage extends React.Component {
 
     if (!currentSummit.id) return <div />;
 
-    const ticketTypesFilterDDL = currentSummit.ticket_types.map((t) => {
-      return { label: t.name, value: t.id };
-    });
-
-    let flowEventsDDL = [
+    const flowEventsDDL = [
       { label: "-- SELECT EMAIL EVENT --", value: "" },
       {
         label: "SUMMIT_REGISTRATION_INVITE_REGISTRATION",
@@ -628,7 +626,7 @@ class RegistrationInvitationsListPage extends React.Component {
             <OrAndFilter
               style={{ marginTop: 15 }}
               value={invitationFilter.orAndFilter}
-              entity={"invitations"}
+              entity="invitations"
               onChange={(filter) => this.handleOrAndFilter(filter)}
             />
             <div className="row">
@@ -645,21 +643,24 @@ class RegistrationInvitationsListPage extends React.Component {
                 />
               </div>
               <div className="col-md-6">
-                <Dropdown
+                <TicketTypesInput
                   id="allowed_ticket_types_filter"
                   value={allowedTicketTypesIds}
                   placeholder={T.translate(
                     "registration_invitation_list.placeholders.allowed_ticket_types_filter"
                   )}
                   onChange={this.handleTicketTypeSelected}
-                  options={ticketTypesFilterDDL}
-                  isMulti={true}
+                  summitId={currentSummit.id}
+                  version="v2"
+                  optionsLimit={100}
+                  defaultOptions
+                  isMulti
                 />
               </div>
             </div>
             <div className="row">
               <div className="col-md-6">
-                <div className={"row"}>
+                <div className="row">
                   <div className="col-md-6">
                     <SegmentedControl
                       name="isSent"
@@ -705,7 +706,7 @@ class RegistrationInvitationsListPage extends React.Component {
                   options={flowEventsDDL}
                 />
               </div>
-              <div className={"col-md-4"}>
+              <div className="col-md-4">
                 <Input
                   id="testRecipient"
                   value={testRecipient}
@@ -721,7 +722,7 @@ class RegistrationInvitationsListPage extends React.Component {
                   className="form-control"
                 />
               </div>
-              <div className={"col-md-2"}>
+              <div className="col-md-2">
                 <button
                   className="btn btn-default right-space"
                   onClick={this.handleSendClick}
diff --git a/src/pages/tickets/ticket-list-page.js b/src/pages/tickets/ticket-list-page.js
index 68692339c..868d7af7e 100644
--- a/src/pages/tickets/ticket-list-page.js
+++ b/src/pages/tickets/ticket-list-page.js
@@ -21,7 +21,8 @@ import {
   Dropdown,
   PromocodeInput,
   TagInput,
-  CompanyInput
+  CompanyInput,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
 import { Modal, Pagination } from "react-bootstrap";
 import { Breadcrumb } from "react-breadcrumbs";
@@ -614,10 +615,6 @@ class TicketListPage extends React.Component {
 
     if (!currentSummit.id) return <div />;
 
-    const ticketTypesOptions = [
-      ...currentSummit.ticket_types.map((t) => ({ label: t.name, value: t.id }))
-    ];
-
     const alpha = Array.from(Array(LETTERS_IN_ALPHABET)).map(
       (e, i) => i + UPPERCASE_A_IN_ASCII
     );
@@ -1023,19 +1020,24 @@ class TicketListPage extends React.Component {
             )}
             {enabledFilters.includes("ticketTypesFilter") && (
               <div className="col-md-6">
-                <Select
+                <TicketTypesInput
                   placeholder={T.translate(
                     "ticket_list.placeholders.ticket_types"
                   )}
                   name="ticketTypesFilter"
                   value={ticketFilters.ticketTypesFilter}
-                  onChange={(val) =>
-                    this.handleFilterChange("ticketTypesFilter", val)
+                  onChange={(ev) =>
+                    this.handleFilterChange(
+                      "ticketTypesFilter",
+                      ev.target.value.map((tt) => ({ ...tt, value: tt.id }))
+                    )
                   }
-                  options={ticketTypesOptions}
-                  isClearable
                   isMulti
                   className="dropdownFilter"
+                  version="v2"
+                  summitId={currentSummit.id}
+                  optionsLimit={100}
+                  defaultOptions
                 />
               </div>
             )}
diff --git a/src/reducers/summits/selection-plan-extra-question-reducer.js b/src/reducers/summits/selection-plan-extra-question-reducer.js
index f9f8c4df1..6c9012591 100644
--- a/src/reducers/summits/selection-plan-extra-question-reducer.js
+++ b/src/reducers/summits/selection-plan-extra-question-reducer.js
@@ -9,7 +9,10 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
+
+import { VALIDATE } from "openstack-uicore-foundation/lib/utils/actions";
+import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 
 import {
   RESET_SELECTION_PLAN_EXTRA_QUESTION_FORM,
@@ -23,8 +26,6 @@ import {
   SELECTION_PLAN_EXTRA_QUESTION_VALUE_UPDATED
 } from "../../actions/selection-plan-actions";
 
-import { VALIDATE } from "openstack-uicore-foundation/lib/utils/actions";
-import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
 
 export const DEFAULT_ENTITY = {
@@ -35,7 +36,8 @@ export const DEFAULT_ENTITY = {
   mandatory: false,
   placeholder: "",
   values: [],
-  is_editable: true
+  is_editable: true,
+  allowed_badge_features_types: []
 };
 
 const DEFAULT_STATE = {
@@ -48,102 +50,76 @@ const selectionPlanExtraQuestionReducer = (state = DEFAULT_STATE, action) => {
   const { type, payload } = action;
   switch (type) {
     case LOGOUT_USER:
-      {
-        // we need this in case the token expired while editing the form
-        if (payload.hasOwnProperty("persistStore")) {
-          return state;
-        } else {
-          return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
-        }
+      // we need this in case the token expired while editing the form
+      if (payload.hasOwnProperty("persistStore")) {
+        return state;
       }
-      break;
+      return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
     case SET_CURRENT_SUMMIT:
     case RESET_SELECTION_PLAN_EXTRA_QUESTION_FORM:
-      {
-        return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
-      }
-      break;
-    case RECEIVE_SELECTION_PLAN_EXTRA_QUESTION_META:
-      {
-        let allClasses = payload.response;
+      return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
+    case RECEIVE_SELECTION_PLAN_EXTRA_QUESTION_META: {
+      const allClasses = payload.response;
 
-        return { ...state, allClasses: allClasses };
-      }
-      break;
+      return { ...state, allClasses };
+    }
     case UPDATE_SELECTION_PLAN_EXTRA_QUESTION:
-      {
-        return { ...state, entity: { ...payload }, errors: {} };
-      }
-      break;
+      return { ...state, entity: { ...payload }, errors: {} };
     case SELECTION_PLAN_EXTRA_QUESTION_ADDED:
-    case RECEIVE_SELECTION_PLAN_EXTRA_QUESTION:
-      {
-        let entity = { ...payload.response };
+    case RECEIVE_SELECTION_PLAN_EXTRA_QUESTION: {
+      const entity = { ...payload.response };
 
-        for (var key in entity) {
-          if (entity.hasOwnProperty(key)) {
-            entity[key] = entity[key] == null ? "" : entity[key];
-          }
+      for (const key in entity) {
+        if (entity.hasOwnProperty(key)) {
+          entity[key] = entity[key] == null ? "" : entity[key];
         }
-
-        return { ...state, entity: { ...DEFAULT_ENTITY, ...entity } };
       }
-      break;
+
+      return { ...state, entity: { ...DEFAULT_ENTITY, ...entity } };
+    }
     case SELECTION_PLAN_EXTRA_QUESTION_UPDATED:
-      {
-        return state;
+      return state;
+    case SELECTION_PLAN_EXTRA_QUESTION_VALUE_ADDED: {
+      const entity = { ...payload.response };
+      let values = [...state.entity.values];
+      if (entity.is_default) {
+        // reset all other values
+        values = values.map((v) => ({ ...v, is_default: false }));
       }
-      break;
-    case SELECTION_PLAN_EXTRA_QUESTION_VALUE_ADDED:
-      {
-        let entity = { ...payload.response };
-        let values = [...state.entity.values];
-        if (entity.is_default) {
-          // reset all other values
-          values = values.map((v) => ({ ...v, is_default: false }));
-        }
 
-        return {
-          ...state,
-          entity: { ...state.entity, values: [...values, entity] }
-        };
+      return {
+        ...state,
+        entity: { ...state.entity, values: [...values, entity] }
+      };
+    }
+    case SELECTION_PLAN_EXTRA_QUESTION_VALUE_UPDATED: {
+      const entity = { ...payload.response };
+      let values_tmp = state.entity.values.filter((v) => v.id !== entity.id);
+      if (entity.is_default) {
+        // reset all other values
+        values_tmp = values_tmp.map((v) => ({ ...v, is_default: false }));
       }
-      break;
-    case SELECTION_PLAN_EXTRA_QUESTION_VALUE_UPDATED:
-      {
-        let entity = { ...payload.response };
-        let values_tmp = state.entity.values.filter((v) => v.id !== entity.id);
-        if (entity.is_default) {
-          // reset all other values
-          values_tmp = values_tmp.map((v) => ({ ...v, is_default: false }));
-        }
 
-        let values = [...values_tmp, entity];
+      const values = [...values_tmp, entity];
 
-        values.sort((a, b) =>
-          a.order > b.order ? 1 : a.order < b.order ? -1 : 0
-        );
+      values.sort((a, b) =>
+        a.order > b.order ? 1 : a.order < b.order ? -1 : 0
+      );
 
-        return { ...state, entity: { ...state.entity, values: values } };
-      }
-      break;
-    case SELECTION_PLAN_EXTRA_QUESTION_VALUE_DELETED:
-      {
-        let { valueId } = payload;
-        return {
-          ...state,
-          entity: {
-            ...state.entity,
-            values: state.entity.values.filter((v) => v.id !== valueId)
-          }
-        };
-      }
-      break;
+      return { ...state, entity: { ...state.entity, values } };
+    }
+    case SELECTION_PLAN_EXTRA_QUESTION_VALUE_DELETED: {
+      const { valueId } = payload;
+      return {
+        ...state,
+        entity: {
+          ...state.entity,
+          values: state.entity.values.filter((v) => v.id !== valueId)
+        }
+      };
+    }
     case VALIDATE:
-      {
-        return { ...state, errors: payload.errors };
-      }
-      break;
+      return { ...state, errors: payload.errors };
     default:
       return state;
   }