diff --git a/label_studio/core/static/css/uikit.css b/label_studio/core/static/css/uikit.css
index d5d5d5341daa..07677d28e752 100644
--- a/label_studio/core/static/css/uikit.css
+++ b/label_studio/core/static/css/uikit.css
@@ -22,7 +22,7 @@ body {
   display: block;
 }
 .field--wide > *:not(:first-child) {
-  display: flex;
+  display: block;
   margin-top: 4px;
   width: 100%;
   box-sizing: border-box;
diff --git a/label_studio/data_manager/actions/predictions_to_annotations.py b/label_studio/data_manager/actions/predictions_to_annotations.py
index 26e62666db56..56964eb5c30d 100644
--- a/label_studio/data_manager/actions/predictions_to_annotations.py
+++ b/label_studio/data_manager/actions/predictions_to_annotations.py
@@ -91,7 +91,6 @@ def predictions_to_annotations_form(user, project):
                     'name': 'model_version',
                     'label': 'Choose predictions',
                     'options': versions,
-                    'value': first,
                 }
             ],
         }
@@ -107,7 +106,7 @@ def predictions_to_annotations_form(user, project):
         'dialog': {
             'title': 'Create Annotations From Predictions',
             'text': 'Create annotations from predictions using selected predictions set '
-            'for each selected task. '
+            'for each selected task.'
             'Your account will be assigned as an owner to those annotations. ',
             'type': 'confirm',
             'form': predictions_to_annotations_form,
diff --git a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss
index 63ba912c0fbc..42b92837da95 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss
+++ b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss
@@ -1,10 +1,8 @@
 .input-ls,
 .select-ls,
 .textarea-ls {
-  --input-size: 40px;
-
-  height: var(--input-size);
-  min-height: var(--input-size);
+  height: 40px;
+  min-height: 40px;
   background: var(--sand_0);
   font-size: 16px;
   line-height: 22px;
diff --git a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx
index bb65f28ad30f..59212fdaf5a7 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";
-import { Select as SelectUI } from "@humansignal/ui";
+import "./Select.scss";
 
 const SelectOption = ({ value, label, disabled = false, hidden = false, ...props }) => {
   return (
@@ -24,23 +24,16 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
     return groupedOptions;
   }, {});
 
+  const renderOptions = (option) => {
+    return <SelectOption {...(option.value ? { ...option, key: option.value } : { value: option, key: option })} />;
+  };
+
   const classList = rootClass.mod({ ghost }).mix(className);
 
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
 
-  const selectOptions = useMemo(() => {
-    return Object.keys(grouped).flatMap((group) => {
-      return group === "NoGroup"
-        ? grouped[group]
-        : (grouped[group] = {
-            label: group,
-            children: grouped[group],
-          });
-    });
-  }, [grouped]);
-
   const selectWrapper = (
     <FormField
       name={props.name}
@@ -53,16 +46,32 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
     >
       {(ref) => {
         return (
-          <SelectUI
-            {...props}
-            value={value}
-            onChange={(val) => {
-              setValue(val);
-              props.onChange?.(val);
-            }}
-            ref={ref}
-            options={selectOptions}
-          />
+          <div className={classList}>
+            <select
+              {...props}
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+                props.onChange?.(e);
+              }}
+              ref={ref}
+              className={rootClass.elem("list")}
+            >
+              {props.placeholder && (!props.defaulValue || !props.value) && (
+                <option value="" disabled hidden>
+                  {props.placeholder}
+                </option>
+              )}
+
+              {Object.keys(grouped).map((group) => {
+                return group === "NoGroup" ? (
+                  grouped[group].map(renderOptions)
+                ) : (
+                  <optgroup label={group}>{grouped[group].map(renderOptions)}</optgroup>
+                );
+              })}
+            </select>
+          </div>
         );
       }}
     </FormField>
diff --git a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss
new file mode 100644
index 000000000000..075251e0ace3
--- /dev/null
+++ b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss
@@ -0,0 +1,38 @@
+.select-ls {
+  position: relative;
+
+  &__list {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    margin: 0;
+    border: none;
+    border-radius: 3px;
+    position: absolute;
+    background-color: transparent;
+    transition: box-shadow 80ms ease;
+    font-size: inherit;
+    border-right: 10px solid transparent;
+  }
+
+  &_ghost {
+    margin-left: -10px;
+    border: 1px solid transparent;
+
+    &__list {
+      padding: 0 5px;
+    }
+
+    &:hover {
+      border: 1px solid var(--sand_300);
+    }
+  }
+}
+
+select:disabled {
+  background: var(--sand_200);
+  color: var(--sand_500);
+  opacity: 1;
+}
diff --git a/web/apps/labelstudio/src/components/Pagination/Pagination.scss b/web/apps/labelstudio/src/components/Pagination/Pagination.scss
index 18000bed00dc..83fe89e9e37e 100644
--- a/web/apps/labelstudio/src/components/Pagination/Pagination.scss
+++ b/web/apps/labelstudio/src/components/Pagination/Pagination.scss
@@ -1,7 +1,5 @@
 .pagination-ls {
-  --pagination-height: 40px;
-
-  height: var(--pagination-height);
+  height: 40px;
   display: inline-flex;
   align-items: center;
 
@@ -116,12 +114,14 @@
 
   &__input {
     width: 100px;
-    height: var(--pagination-height);
+    height: 38px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #D9D9D9;
+    border-top: none;
+    border-bottom: none;
     background: var(--sand_100);
     margin: 1px 0;
 
diff --git a/web/apps/labelstudio/src/components/Pagination/Pagination.tsx b/web/apps/labelstudio/src/components/Pagination/Pagination.tsx
index 8589a8cec424..190807fcb424 100644
--- a/web/apps/labelstudio/src/components/Pagination/Pagination.tsx
+++ b/web/apps/labelstudio/src/components/Pagination/Pagination.tsx
@@ -11,7 +11,7 @@ import {
 import { Block, Elem } from "../../utils/bem";
 import { clamp, isDefined } from "../../utils/helpers";
 import { useValueTracker } from "../Form/Utils";
-import { Select } from "@humansignal/ui";
+import { Select } from "../Form/Elements";
 import "./Pagination.scss";
 import { useUpdateEffect } from "../../utils/hooks";
 
@@ -263,8 +263,8 @@ export const Pagination: FC<PaginationProps> = forwardRef(
             <Select
               value={pageSize}
               options={pageSizeOptions.map((v) => ({ label: `${v} per page`, value: v }))}
-              onChange={(val: string) => {
-                const newPageSize = Number.parseInt(val);
+              onChange={(e: any) => {
+                const newPageSize = Number.parseInt(e.target.value);
 
                 setPageSize(newPageSize);
 
diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx
index 6263fab91afe..f9486dae0d5c 100644
--- a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx
+++ b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx
@@ -1,13 +1,13 @@
 import "codemirror/lib/codemirror.css";
 import "codemirror/mode/xml/xml";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { UnControlled as CodeMirror } from "react-codemirror2";
 import CM from "codemirror";
 import "codemirror/addon/hint/show-hint";
 import "codemirror/addon/hint/show-hint.css";
 
 import { Button, ToggleItems } from "../../../components";
-import { Form, Input } from "../../../components/Form";
+import { Form } from "../../../components/Form";
 import { useAPI } from "../../../providers/ApiProvider";
 import { Block, cn, Elem } from "../../../utils/bem";
 import { Palette } from "../../../utils/colors";
@@ -22,7 +22,7 @@ import "./codemirror.css";
 import "./config-hint";
 import tags from "./schema.json";
 import { UnsavedChanges } from "./UnsavedChanges";
-import { Checkbox, Select } from "@humansignal/ui";
+import { Checkbox } from "@humansignal/ui";
 import { toSnakeCase } from "strman";
 
 const wizardClass = cn("wizard");
@@ -154,25 +154,26 @@ const ConfigureSettings = ({ template }) => {
 
     switch (type) {
       case Array:
-        onChange = (val) => {
+        onChange = (e) => {
           if (typeof options.param === "function") {
-            options.param($tag, val);
+            options.param($tag, e.target.value);
           } else {
-            $object.setAttribute(options.param, val);
+            $object.setAttribute(options.param, e.target.value);
           }
           template.render();
         };
         return (
           <li key={key}>
-            <Select
-              className="border"
-              value={value}
-              onChange={onChange}
-              options={options.type}
-              label={options.title}
-              isInline={true}
-              dataTestid={`select-trigger-${options.title.replace(/\s+/g, "-").replace(":", "").toLowerCase()}-${value}`}
-            />
+            <label>
+              {options.title}{" "}
+              <select className="border" value={value} onChange={onChange}>
+                {options.type.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </label>
           </li>
         );
       case Boolean:
@@ -246,7 +247,9 @@ const ConfigureColumn = ({ template, obj, columns }) => {
     template.render();
   };
 
-  const selectValue = (value) => {
+  const selectValue = (e) => {
+    const value = e.target.value;
+
     if (value === "-") {
       setIsManual(true);
       return;
@@ -275,40 +278,23 @@ const ConfigureColumn = ({ template, obj, columns }) => {
     }
   };
 
-  const columnsList = useMemo(() => {
-    const cols = (columns ?? []).map((col) => {
-      return {
-        value: col,
-        label: col === DEFAULT_COLUMN ? "<imported file>" : `$${col}`,
-      };
-    });
-    if (!columns?.length) {
-      cols.push({ value, label: "<imported file>" });
-    }
-    cols.push({ value: "-", label: "<set manually>" });
-    return cols;
-  }, [columns, DEFAULT_COLUMN, value]);
-
   return (
-    <>
-      <Select
-        onChange={selectValue}
-        value={isManual ? "-" : value}
-        options={columnsList}
-        isInline={true}
-        label={
-          <>
-            Use {obj.tagName.toLowerCase()}
-            {template.objects > 1 && ` for ${obj.getAttribute("name")}`}
-            {" from "}
-            {columns?.length > 0 && columns[0] !== DEFAULT_COLUMN && "field "}
-          </>
-        }
-        labelProps={{ className: "inline-flex" }}
-        dataTestid={`select-trigger-use-image-from-field-${isManual ? "-" : value}`}
-      />
-      {isManual && <Input value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
-    </>
+    <p>
+      Use {obj.tagName.toLowerCase()}
+      {template.objects > 1 && ` for ${obj.getAttribute("name")}`}
+      {" from "}
+      {columns?.length > 0 && columns[0] !== DEFAULT_COLUMN && "field "}
+      <select className="border" onChange={selectValue} value={isManual ? "-" : value}>
+        {columns?.map((column) => (
+          <option key={column} value={column}>
+            {column === DEFAULT_COLUMN ? "<imported file>" : `$${column}`}
+          </option>
+        ))}
+        {!columns?.length && <option value={value}>{"<imported file>"}</option>}
+        <option value="-">{"<set manually>"}</option>
+      </select>
+      {isManual && <input value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
+    </p>
   );
 };
 
diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss
index ff3c35cd9e9e..6cb072596220 100644
--- a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss
+++ b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss
@@ -309,8 +309,6 @@ $scroll-width: 5px;
     margin-left: 8px;
     padding: 4px 8px;
     line-height: 1.4em;
-    height: 40px;
-    border-radius: var(--corner-radius-smaller);
   }
 
   select {
diff --git a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx b/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx
index dd5639a54dd5..13159f68e0ea 100644
--- a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx
+++ b/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx
@@ -1,4 +1,4 @@
-import { EnterpriseBadge, Select } from "@humansignal/ui";
+import { EnterpriseBadge } from "@humansignal/ui";
 import React from "react";
 import { useHistory } from "react-router";
 import { Button, ToggleItems } from "../../components";
@@ -12,7 +12,7 @@ import "./CreateProject.scss";
 import { ImportPage } from "./Import/Import";
 import { useImportPage } from "./Import/useImportPage";
 import { useDraftProject } from "./utils/useDraftProject";
-import { Input, TextArea } from "../../components/Form";
+import { Input, Select, TextArea } from "../../components/Form";
 import { Caption } from "../../components/Caption/Caption";
 import { FF_LSDV_E_297, isFF } from "../../utils/feature-flags";
 import { createURL } from "../../components/HeidiTips/utils";
diff --git a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings/ModelVersionSelector.jsx b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings/ModelVersionSelector.jsx
index a39468a1c1af..17692d6ebb25 100644
--- a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings/ModelVersionSelector.jsx
+++ b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings/ModelVersionSelector.jsx
@@ -82,10 +82,9 @@ export const ModelVersionSelector = ({
             name={name}
             disabled={!versions.length && !models.length}
             value={version}
-            onChange={setVersion}
+            onChange={(e) => setVersion(e.target.value)}
             options={[...models, ...versions]}
-            placeholder={placeholder || "Please select model or predictions"}
-            isInProgress={loading}
+            placeholder={loading ? "Loading ..." : placeholder ? placeholder : "Please select model or predictions"}
             {...props}
           />
         </div>
diff --git a/web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx b/web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx
index e359fa99b240..3a21d733bdc5 100644
--- a/web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx
+++ b/web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx
@@ -1,7 +1,7 @@
-import { EnterpriseBadge, Select } from "@humansignal/ui";
+import { EnterpriseBadge } from "@humansignal/ui";
 import { useCallback, useContext } from "react";
 import { Button } from "../../components";
-import { Form, Input, TextArea } from "../../components/Form";
+import { Form, Input, Select, TextArea } from "../../components/Form";
 import { RadioGroup } from "../../components/Form/Elements/RadioGroup/RadioGroup";
 import { ProjectContext } from "../../providers/ProjectProvider";
 import { Block, Elem } from "../../utils/bem";
diff --git a/web/apps/labelstudio/src/pages/Settings/MachineLearningSettings/Forms.jsx b/web/apps/labelstudio/src/pages/Settings/MachineLearningSettings/Forms.jsx
index d782508239fc..c4a7a7b4bfae 100644
--- a/web/apps/labelstudio/src/pages/Settings/MachineLearningSettings/Forms.jsx
+++ b/web/apps/labelstudio/src/pages/Settings/MachineLearningSettings/Forms.jsx
@@ -6,7 +6,7 @@ import { Form, Input, Select, TextArea, Toggle } from "../../../components/Form"
 import "./MachineLearningSettings.scss";
 
 const CustomBackendForm = ({ action, backend, project, onSubmit }) => {
-  const [selectedAuthMethod, setAuthMethod] = useState("NONE");
+  const [selectedAuthMethod, setAuthMethod] = useState("");
   const [, setMLError] = useState();
 
   return (
@@ -38,8 +38,9 @@ const CustomBackendForm = ({ action, backend, project, onSubmit }) => {
             { label: "No Authentication", value: "NONE" },
             { label: "Basic Authentication", value: "BASIC_AUTH" },
           ]}
-          value={selectedAuthMethod}
-          onChange={setAuthMethod}
+          onChange={(e) => {
+            setAuthMethod(e.target.value);
+          }}
         />
       </Form.Row>
 
diff --git a/web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageForm.jsx b/web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageForm.jsx
index b57e8a3a91a1..2b03f8b25fbc 100644
--- a/web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageForm.jsx
+++ b/web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageForm.jsx
@@ -41,7 +41,9 @@ export const StorageForm = forwardRef(({ onSubmit, target, project, rootClass, s
           label: title,
         })),
         value: storage?.type ?? type,
-        onChange: setType,
+        onChange: (e) => {
+          setType(e.target.value);
+        },
       },
     ],
   };
diff --git a/web/libs/app-common/src/blocks/SampleDatasetSelect/SampleDatasetSelect.tsx b/web/libs/app-common/src/blocks/SampleDatasetSelect/SampleDatasetSelect.tsx
index 52bd6099b653..f4f0ff5c6ba5 100644
--- a/web/libs/app-common/src/blocks/SampleDatasetSelect/SampleDatasetSelect.tsx
+++ b/web/libs/app-common/src/blocks/SampleDatasetSelect/SampleDatasetSelect.tsx
@@ -1,4 +1,4 @@
-import { Select } from "@humansignal/ui";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "@humansignal/shad/components/ui/select";
 import { useCallback, useMemo } from "react";
 
 type Sample = {
@@ -30,41 +30,33 @@ export function SampleDatasetSelect({
     [samples, onSampleApplied],
   );
 
-  const options = useMemo(() => {
-    return samples.map((sample) => ({
-      value: sample.url,
-      label: (
-        <div className="flex flex-col">
-          <div className="font-bold">{sample.title}</div>
-          <div className="mt-2">{sample.description}</div>
-        </div>
-      ),
-    }));
-  }, [samples]);
   const onClick = () => {
     if ("__lsa" in window) {
       __lsa("sample.open");
     }
   };
 
-  const selectedValueRenderer = useCallback(
-    (option: any) => {
-      return samples.find((o) => o.url === option.value)?.title ?? option?.label;
-    },
-    [samples],
-  );
-
   return (
     <div className="flex gap-3 items-center">
       <span className="text-neutral-content-subtler">or use a sample dataset</span>
-      <Select
-        value={sample?.url ?? undefined}
-        placeholder="Select sample"
-        onChange={onSelect}
-        triggerProps={{ onClick }}
-        options={options}
-        selectedValueRenderer={selectedValueRenderer}
-      />
+      <Select value={sample?.url ?? undefined} onValueChange={onSelect}>
+        <SelectTrigger
+          className="!h-10 min-w-52 rounded-sm border-neutral-border-bold data-[placeholder]:!text-[#000] data-[placeholder]:text-[16px] text-[16px] [&_svg]:stroke-[#000]"
+          onClick={onClick}
+        >
+          {title}
+        </SelectTrigger>
+        <SelectContent className="z-99999 w-fit min-w-[400px] p-2">
+          <SelectGroup>
+            {samples.map((sample) => (
+              <SelectItem value={sample.url} key={sample.url} className="hover:bg-neutral-surface-active">
+                <div className=" font-bold">{sample.title}</div>
+                <div className="mt-2">{sample.description}</div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
     </div>
   );
 }
diff --git a/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx b/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx
index 1de781cc8e0d..3c48ec49666a 100644
--- a/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx
+++ b/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx
@@ -88,15 +88,6 @@ Annotators.FilterItem = UsersInjector(({ users, item }) => {
   ) : null;
 });
 
-Annotators.searchFilter = (option, queryString) => {
-  const user = DM.users.find((u) => u.id === option?.value);
-  return (
-    user.id?.toString().toLowerCase().includes(queryString.toLowerCase()) ||
-    user.email.toLowerCase().includes(queryString.toLowerCase()) ||
-    user.displayName.toLowerCase().includes(queryString.toLowerCase())
-  );
-};
-
 Annotators.filterable = true;
 Annotators.customOperators = [
   {
diff --git a/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.jsx b/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.jsx
index e4a881639b30..b6f644e394b2 100644
--- a/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.jsx
+++ b/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.jsx
@@ -2,7 +2,7 @@ import { format, isMatch, isValid } from "date-fns";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { default as DP } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { BemWithSpecifiContext, cn } from "../../../utils/bem";
+import { BemWithSpecifiContext } from "../../../utils/bem";
 import { isDefined } from "../../../utils/utils";
 import { Dropdown } from "../Dropdown/Dropdown";
 import Input from "../Input/Input";
@@ -106,21 +106,18 @@ export const DatePicker = ({
         ref={dropdownRef}
         toggle={false}
         content={
-          <div className={cn("datepicker").elem("wrapper")}>
-            <DP
-              {...dateRange}
-              ref={datepickerRef}
-              selected={realStartDate}
-              onChange={(date) => onChangeHandler(date)}
-              onSelect={(date) => onChangeHandler(date)}
-              monthsShown={2}
-              selectsRange={selectRange}
-              showTimeSelect={showTime}
-              inline
-            />
-          </div>
+          <DP
+            {...dateRange}
+            ref={datepickerRef}
+            selected={realStartDate}
+            onChange={(date) => onChangeHandler(date)}
+            onSelect={(date) => onChangeHandler(date)}
+            monthsShown={2}
+            selectsRange={selectRange}
+            showTimeSelect={showTime}
+            inline
+          />
         }
-        style={{ backgroundColor: "transparent", borderRadius: "1em" }}
       >
         <Elem name="output" mod={{ range: selectRange }}>
           <Input
diff --git a/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.scss b/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.scss
index a759bfdbf115..8b339716a41a 100644
--- a/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.scss
+++ b/web/libs/datamanager/src/components/Common/DatePicker/DatePicker.scss
@@ -20,13 +20,4 @@
     display: flex;
     align-items: center;
   }
-
-  &__wrapper {
-    background-color: transparent;
-
-    > div {
-      display: flex;
-      background-color: transparent;
-    }
-  }
 }
diff --git a/web/libs/datamanager/src/components/Common/Dropdown/DropdownTrigger.jsx b/web/libs/datamanager/src/components/Common/Dropdown/DropdownTrigger.jsx
index 995441040644..be0fa82df394 100644
--- a/web/libs/datamanager/src/components/Common/Dropdown/DropdownTrigger.jsx
+++ b/web/libs/datamanager/src/components/Common/Dropdown/DropdownTrigger.jsx
@@ -4,20 +4,7 @@ import { Dropdown } from "./DropdownComponent";
 import { DropdownContext } from "./DropdownContext";
 
 export const DropdownTrigger = React.forwardRef(
-  (
-    {
-      tag,
-      children,
-      dropdown,
-      content,
-      toggle,
-      closeOnClickOutside = true,
-      disabled = false,
-      isChildValid = (element) => false,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ tag, children, dropdown, content, toggle, closeOnClickOutside = true, disabled = false, ...props }, ref) => {
     if (children.length > 2) throw new Error("Trigger can't contain more that one child and a dropdown");
     const dropdownRef = ref ?? dropdown ?? React.useRef();
     const triggerEL = React.Children.only(children);
@@ -35,9 +22,9 @@ export const DropdownTrigger = React.forwardRef(
           return res || child.hasTarget(target);
         }, false);
 
-        return triggerClicked || dropdownClicked || childDropdownClicked || isChildValid(target);
+        return triggerClicked || dropdownClicked || childDropdownClicked;
       },
-      [triggerRef, dropdownRef, isChildValid],
+      [triggerRef, dropdownRef],
     );
 
     const handleClick = React.useCallback(
diff --git a/web/libs/datamanager/src/components/Common/FiltersPane.jsx b/web/libs/datamanager/src/components/Common/FiltersPane.jsx
index e8409e915a09..e299408c889e 100644
--- a/web/libs/datamanager/src/components/Common/FiltersPane.jsx
+++ b/web/libs/datamanager/src/components/Common/FiltersPane.jsx
@@ -58,9 +58,6 @@ export const FiltersPane = injector(
         disabled={sidebarEnabled}
         content={<Filters />}
         openUpwardForShortViewport={false}
-        isChildValid={(ele) => {
-          return !!ele.closest("[data-radix-popper-content-wrapper]");
-        }}
       >
         <FiltersButton {...rest} size={size} />
       </Dropdown.Trigger>
diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.jsx b/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.jsx
index 4b1a0d500701..b2d13c747773 100644
--- a/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.jsx
+++ b/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.jsx
@@ -2,7 +2,7 @@ import { cn } from "../../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
 import { default as Label } from "../Label/Label";
-import { Select as SelectUI } from "@humansignal/ui";
+import "./Select.scss";
 
 const Select = ({
   label,
@@ -20,6 +20,8 @@ const Select = ({
   const rootClass = cn("form-select");
   const [value, setValue] = useValueTracker(props.value, defaultValue);
 
+  const classList = rootClass.mod({ ghost, size }).mix(className);
+
   const selectWrapper = (
     <FormField
       name={props.name}
@@ -34,18 +36,37 @@ const Select = ({
     >
       {({ ref }) => {
         return (
-          <SelectUI
-            {...props}
-            ref={ref}
-            value={value}
-            onChange={(val) => {
-              setValue(val);
-              props.onChange?.(val);
-            }}
-            className={rootClass.elem("list").toString()}
-            options={options?.toJSON ? options.toJSON() : options}
-            size={size}
-          />
+          <div className={classList}>
+            <select
+              {...props}
+              ref={ref}
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+                props.onChange?.(e);
+              }}
+              className={rootClass.elem("list")}
+            >
+              {props.placeholder && (!props.defaulValue || !props.value) && (
+                <option value="" disabled hidden>
+                  {props.placeholder}
+                </option>
+              )}
+
+              {(options ?? []).map((option) => {
+                const value = option.value ?? option;
+                const label = option.label ?? value;
+                const disabled = option.disabled ?? false;
+                const hidden = option.hidden ?? false;
+
+                return (
+                  <option key={value} value={value} disabled={disabled} hidden={hidden}>
+                    {label}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
         );
       }}
     </FormField>
diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.scss b/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.scss
new file mode 100644
index 000000000000..57c1e84aab95
--- /dev/null
+++ b/web/libs/datamanager/src/components/Common/Form/Elements/Select/Select.scss
@@ -0,0 +1,36 @@
+.form-select {
+  position: relative;
+
+  &__list {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    margin: 0;
+    border: none;
+    border-radius: 3px;
+    position: absolute;
+    background-color: transparent;
+    transition: box-shadow 80ms ease;
+    font-size: inherit;
+    border-right: 10px solid transparent;
+
+    .form-select_size_small & {
+      padding: 0 8px;
+    }
+  }
+
+  &_ghost {
+    margin-left: -10px;
+    border: 1px solid transparent;
+
+    & .form-select__list {
+      padding: 0 5px;
+    }
+
+    &:hover {
+      border: 1px solid var(--sand_300);
+    }
+  }
+}
diff --git a/web/libs/datamanager/src/components/Common/Input/Input.jsx b/web/libs/datamanager/src/components/Common/Input/Input.jsx
index 45a022809048..57b4e4bca90a 100644
--- a/web/libs/datamanager/src/components/Common/Input/Input.jsx
+++ b/web/libs/datamanager/src/components/Common/Input/Input.jsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { clsx } from "clsx";
 import { cn } from "../../../utils/bem";
 import "./Input.scss";
 
-const Input = React.forwardRef(({ className, size, rawClassName, ...props }, ref) => {
-  const classList = clsx(cn("input-dm").mod({ size }).mix(className).toString(), rawClassName);
+const Input = React.forwardRef(({ className, size, ...props }, ref) => {
+  const classList = cn("input-dm").mod({ size }).mix(className);
 
   return <input {...props} className={classList} ref={ref} />;
 });
diff --git a/web/libs/datamanager/src/components/Common/Input/Input.scss b/web/libs/datamanager/src/components/Common/Input/Input.scss
index 630d6a1635a8..8efe20772f53 100644
--- a/web/libs/datamanager/src/components/Common/Input/Input.scss
+++ b/web/libs/datamanager/src/components/Common/Input/Input.scss
@@ -1,5 +1,6 @@
 .input-dm,
 .textarea-dm {
+  height: 32px;
   width: 100%;
   background: #FAFAFA;
   font-size: 14px;
diff --git a/web/libs/datamanager/src/components/Common/Pagination/Pagination.tsx b/web/libs/datamanager/src/components/Common/Pagination/Pagination.tsx
index 9799709b4e75..9a374b5a94ba 100644
--- a/web/libs/datamanager/src/components/Common/Pagination/Pagination.tsx
+++ b/web/libs/datamanager/src/components/Common/Pagination/Pagination.tsx
@@ -299,8 +299,8 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
               size={size}
               value={pageSize}
               options={pageSizeOptions.map((v) => ({ label: `${v} per page`, value: v }))}
-              onChange={(val: any) => {
-                const newPageSize = Number.parseInt(val);
+              onChange={(e: any) => {
+                const newPageSize = Number.parseInt(e.target.value);
 
                 setPageSize(newPageSize);
 
diff --git a/web/libs/datamanager/src/components/Common/Select/Select.jsx b/web/libs/datamanager/src/components/Common/Select/Select.jsx
new file mode 100644
index 000000000000..badac82a5d12
--- /dev/null
+++ b/web/libs/datamanager/src/components/Common/Select/Select.jsx
@@ -0,0 +1,204 @@
+import {
+  Children,
+  cloneElement,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { shallowEqualArrays } from "shallow-equal";
+import { BemWithSpecifiContext } from "../../../utils/bem";
+import { isDefined } from "../../../utils/utils";
+import { Dropdown } from "../Dropdown/Dropdown";
+import { IconChevronDown } from "@humansignal/icons";
+import "./Select.scss";
+
+const SelectContext = createContext();
+const { Block, Elem } = BemWithSpecifiContext();
+
+const findSelectedChild = (children, value) => {
+  return Children.toArray(children).reduce((res, child) => {
+    if (res !== null) return res;
+
+    if (child.type.displayName === "Select.Option") {
+      if (child.props.value === value) {
+        res = child;
+      } else if (Array.isArray(value) && value.length === 1) {
+        res = findSelectedChild(children, value[0]);
+      }
+    } else if (child.type.displayName === "Select.OptGroup") {
+      res = findSelectedChild(child.props.children, value);
+    }
+
+    return res;
+  }, null);
+};
+
+export const Select = ({ value, defaultValue, size, children, onChange, style, multiple, tabIndex = 0 }) => {
+  const dropdown = useRef();
+  const rootRef = useRef();
+  const [currentValue, setCurrentValue] = useState(multiple ? [].concat(value ?? []).flat(10) : value);
+  const [focused, setFocused] = useState();
+
+  const options = Children.toArray(children);
+
+  const setValue = (newValue) => {
+    let updatedValue = newValue;
+
+    if (multiple) {
+      if (currentValue.includes(newValue)) {
+        updatedValue = currentValue.filter((v) => v !== newValue);
+      } else {
+        updatedValue = [...currentValue, newValue].flat(10);
+      }
+    }
+
+    setCurrentValue(updatedValue);
+    return updatedValue;
+  };
+
+  const context = {
+    currentValue,
+    focused,
+    multiple,
+    setCurrentValue(value) {
+      const newValue = setValue(value);
+
+      onChange?.(newValue);
+
+      if (multiple !== true) {
+        dropdown.current?.close();
+      }
+    },
+  };
+
+  const selected = useMemo(() => {
+    if (multiple && currentValue?.length > 1) {
+      return <>Multiple values selected</>;
+    }
+
+    const foundChild = findSelectedChild(children, defaultValue ?? currentValue);
+
+    const result = foundChild?.props?.children;
+
+    return result ? cloneElement(<>{result}</>) : null;
+  }, [currentValue, defaultValue, children, value]);
+
+  const focusItem = (i) => {
+    setFocused(options[i ?? 0].props.value);
+  };
+
+  const focusNext = useCallback(
+    (direction) => {
+      const selectedIndex = options.findIndex((c) => c.props.value === focused);
+      let nextIndex = selectedIndex === -1 ? 0 : selectedIndex + direction;
+
+      if (nextIndex >= options.length) {
+        nextIndex = 0;
+      } else if (nextIndex < 0) {
+        nextIndex = options.length - 1;
+      }
+
+      focusItem(nextIndex);
+    },
+    [focused],
+  );
+
+  const handleKeyboard = (e) => {
+    if (document.activeElement !== rootRef.current) {
+      return;
+    }
+
+    if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+      if (dropdown?.current.visible) {
+        focusNext(e.key === "ArrowDown" ? 1 : -1);
+      } else {
+        dropdown.current?.open();
+        focusItem();
+      }
+    } else if ((e.code === "Space" || e.code === "Enter") && isDefined(focused)) {
+      context.setCurrentValue(focused);
+    }
+  };
+
+  useEffect(() => {
+    if (multiple) {
+      if (shallowEqualArrays(value ?? [], currentValue ?? []) === false) {
+        context.setCurrentValue(value?.flat?.(10) ?? []);
+      }
+    } else if (value !== currentValue) {
+      context.setCurrentValue(value);
+    }
+  }, [value, multiple]);
+
+  return (
+    <SelectContext.Provider value={context}>
+      <Block ref={rootRef} name="select-dm" mod={{ size }} style={style} tabIndex={tabIndex} onKeyDown={handleKeyboard}>
+        <Dropdown.Trigger
+          ref={dropdown}
+          style={{ maxHeight: 280, overflow: "auto" }}
+          content={<Elem name="list">{children}</Elem>}
+          onToggle={(visible) => {
+            if (!visible) setFocused(null);
+          }}
+        >
+          <Elem name="selected">
+            <Elem name="value">{selected ?? "Select value"}</Elem>
+            <Elem name="icon">
+              <IconChevronDown />
+            </Elem>
+          </Elem>
+        </Dropdown.Trigger>
+      </Block>
+    </SelectContext.Provider>
+  );
+};
+Select.displayName = "Select";
+
+Select.Option = ({ value, children, style }) => {
+  const { setCurrentValue, multiple, currentValue, focused } = useContext(SelectContext);
+
+  const isSelected = useMemo(() => {
+    const option = String(value);
+
+    if (multiple) {
+      return currentValue.map((v) => String(v)).includes(option);
+    }
+    return option === String(currentValue);
+  }, [value, focused, currentValue]);
+
+  const isFocused = useMemo(() => {
+    return String(value) === String(focused);
+  }, [value, focused]);
+
+  return (
+    <Elem
+      name="option"
+      mod={{
+        selected: isSelected,
+        focused: isFocused,
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        setCurrentValue(value);
+      }}
+      style={style}
+    >
+      {children}
+    </Elem>
+  );
+};
+Select.Option.displayName = "Select.Option";
+
+Select.OptGroup = ({ label, children, style }) => {
+  return (
+    <Elem name="optgroup" style={style}>
+      <Elem name="optgroup-label">{label}</Elem>
+      <Elem name="optgroup-list">{children}</Elem>
+    </Elem>
+  );
+};
+Select.OptGroup.displayName = "Select.OptGroup";
diff --git a/web/libs/datamanager/src/components/Common/Select/Select.scss b/web/libs/datamanager/src/components/Common/Select/Select.scss
new file mode 100644
index 000000000000..e0c0f89f390d
--- /dev/null
+++ b/web/libs/datamanager/src/components/Common/Select/Select.scss
@@ -0,0 +1,101 @@
+@use 'sass:color';
+
+.select-dm {
+  height: 40px;
+  background: #FAFAFA;
+  font-size: 16px;
+  line-height: 22px;
+  border: 1px solid var(--sand_300);
+  box-sizing: border-box;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &_size {
+    &_compact {
+      height: 32px;
+    }
+
+    &_small {
+      height: 24px;
+      font-size: 12px;
+    }
+  }
+
+  &__list {
+    width: max-content;
+  }
+
+  &__selected {
+    width: 100%;
+    padding: 0 7px;
+    min-width: 60px;
+    display: flex;
+    font-weight: 500;
+    align-items: center;
+  }
+
+  &__value {
+    width: max-content;
+    min-width: 30px;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__option {
+    cursor: pointer;
+    padding: 4px 16px;
+
+    &:hover,
+    &_focused {
+      background-color: #f7f7f7;
+    }
+
+    &_selected {
+      color: white;
+      background-color: var(--accent_color);
+    }
+
+    &_selected:hover,
+    &_selected.select-dm__option_focused {
+      background-color: hsl(var(--accent_color), 10%);
+      color: var(--accent_color);
+    }
+  }
+
+  &__icon {
+    margin-left: 5px;
+    position: relative;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__optgroup {
+    &-list {
+      width: max-content;
+    }
+
+    &-label {
+      padding: 4px 16px;
+      color: rgb(var(--black-raw) / 60%);
+    }
+  }
+
+  &__optgroup-list &__option {
+    padding-left: 24px;
+  }
+
+  &_disabled {
+    pointer-events: none;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 6px rgb(var(--accent_color-raw) / 20%), inset 0 -1px 0 var(--black_10), inset 0 0 0 1px var(--black_15), inset 0 0 0 1px rgb(var(--accent_color-raw) / 20%);
+    border-color: rgb(var(--accent_color-raw) / 20%);
+  }
+}
diff --git a/web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx
index 4f51cac738b7..c8db8de4088f 100644
--- a/web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx
+++ b/web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx
@@ -50,7 +50,6 @@ export const ActionsButton = injector(
             store.SDK.invoke("actionDialogOk", action.id, { body });
             store.invokeAction(action.id, { body });
           },
-          closeOnClickOutside: false,
         });
       } else {
         store.invokeAction(action.id);
diff --git a/web/libs/datamanager/src/components/Filters/FilterDropdown.jsx b/web/libs/datamanager/src/components/Filters/FilterDropdown.jsx
index cb6ad53ee7fd..3073bc659580 100644
--- a/web/libs/datamanager/src/components/Filters/FilterDropdown.jsx
+++ b/web/libs/datamanager/src/components/Filters/FilterDropdown.jsx
@@ -1,6 +1,40 @@
 import { observer } from "mobx-react";
-import { Select } from "../Common/Form";
-import { useCallback, useMemo } from "react";
+import { IconChevronDown } from "@humansignal/icons";
+import { Icon } from "../Common/Icon/Icon";
+import { Select } from "../Common/Select/Select";
+import { Tag } from "../Common/Tag/Tag";
+
+const TagRender =
+  (items) =>
+  ({ label, ...rest }) => {
+    const color = items.find((el) => el.value === rest.value)?.color;
+
+    return (
+      <Tag color={color ?? "#000"} {...rest} size="small" className="filter-data-tag">
+        <div className="ant-tag-text">{label}</div>
+      </Tag>
+    );
+  };
+
+const renderOptions = (OptionRender) => (item) => {
+  const value = item.value ?? item;
+  const label = item.label ?? item.title ?? value;
+  const key = `${item.id}-${value}-${label}`;
+
+  if (item.options) {
+    return (
+      <Select.OptGroup key={key} label={item.title}>
+        {item.options.map(renderOptions(OptionRender))}
+      </Select.OptGroup>
+    );
+  }
+
+  return (
+    <Select.Option key={`${value}-${label}`} value={value} style={{ fontSize: 12 }} title={label}>
+      {OptionRender ? <OptionRender item={item} /> : label}
+    </Select.Option>
+  );
+};
 
 export const FilterDropdown = observer(
   ({
@@ -15,44 +49,33 @@ export const FilterDropdown = observer(
     optionRender,
     dropdownClassName,
     outputFormat,
-    searchFilter,
   }) => {
-    const parseItems = useCallback(
-      (item) => {
-        const OptionVisuals = optionRender;
-        const option =
-          typeof item === "string" || typeof item === "number"
-            ? { label: <OptionVisuals item={item} />, value: item, original: item }
-            : {
-                ...item,
-                label: item?.original?.field?.parent ? (
-                  <OptionVisuals item={item} />
-                ) : (
-                  (item?.title ?? item?.label ?? item?.name)
-                ),
-                value: item?.value ?? item,
-                children: item?.options?.map(parseItems),
-              };
-        return option;
-      },
-      [optionRender],
-    );
-    const options = useMemo(() => items.map(parseItems), [items, parseItems]);
-
     return (
       <Select
         multiple={multiple}
         placeholder={placeholder}
         defaultValue={defaultValue}
         value={value}
+        tagRender={TagRender(items)}
+        bordered={false}
+        style={{
+          fontSize: 12,
+          width: "100%",
+          backgroundColor: disabled ? "none" : "#fafafa",
+          ...(multiple ? { padding: 0 } : {}),
+          ...(style ?? {}),
+        }}
+        dropdownStyle={{ minWidth: "fit-content" }}
         onChange={(value) => onChange(outputFormat?.(value) ?? value)}
         disabled={disabled}
         size="small"
-        options={options}
-        searchable={true}
-        className="whitespace-nowrap"
-        searchFilter={searchFilter}
-      />
+        suffixIcon={<Icon icon={IconChevronDown} />}
+        listItemHeight={20}
+        listHeight={600}
+        dropdownClassName={dropdownClassName}
+      >
+        {items.map(renderOptions(optionRender))}
+      </Select>
     );
   },
 );
diff --git a/web/libs/datamanager/src/components/Filters/FilterInput.jsx b/web/libs/datamanager/src/components/Filters/FilterInput.jsx
index bfb100bde73a..6dbf7bef0554 100644
--- a/web/libs/datamanager/src/components/Filters/FilterInput.jsx
+++ b/web/libs/datamanager/src/components/Filters/FilterInput.jsx
@@ -11,7 +11,7 @@ export const FilterInput = ({ value, type, onChange, placeholder, schema, style
 
   return (
     <Input
-      rawClassName="h-full"
+      size="small"
       type={type}
       value={value ?? ""}
       ref={inputRef}
diff --git a/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.jsx b/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.jsx
index 56c247841b55..5645b3669417 100644
--- a/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.jsx
+++ b/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.jsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { Fragment } from "react";
-import { IconClose } from "@humansignal/icons";
+import { IconTrash } from "@humansignal/icons";
 import { BemWithSpecifiContext } from "../../../utils/bem";
 import { Button } from "../../Common/Button/Button";
 import { Icon } from "../../Common/Icon/Icon";
@@ -73,7 +73,7 @@ export const FilterLine = observer(({ filter, availableFilters, index, view, sid
             e.stopPropagation();
             filter.delete();
           }}
-          icon={<Icon icon={IconClose} size={12} />}
+          icon={<Icon icon={IconTrash} size={12} />}
         />
       </Elem>
     </Block>
diff --git a/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss b/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss
index 46a254d36957..2e0eb7f82c8f 100644
--- a/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss
+++ b/web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss
@@ -10,16 +10,15 @@
   grid-template-columns: 70px 110px 100px 120px 24px;
 
   &__remove {
-    height: 100%;
+    width: 24px;
+    height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
 
     .button-dm {
-      height: 24px;
-      width: 24px;
-      padding: 0;
       flex: none;
+      padding: 0;
     }
   }
 
diff --git a/web/libs/datamanager/src/components/Filters/FilterLine/FilterOperation.jsx b/web/libs/datamanager/src/components/Filters/FilterLine/FilterOperation.jsx
index a3d6c3cf92af..de1e6b4cd99b 100644
--- a/web/libs/datamanager/src/components/Filters/FilterLine/FilterOperation.jsx
+++ b/web/libs/datamanager/src/components/Filters/FilterLine/FilterOperation.jsx
@@ -78,7 +78,6 @@ export const FilterOperation = observer(({ filter, field, operator, value }) =>
           filter={filter}
           value={value}
           onChange={onChange}
-          size="small"
         />
       </Elem>
     </>
diff --git a/web/libs/datamanager/src/components/Filters/Filters.scss b/web/libs/datamanager/src/components/Filters/Filters.scss
index 38806abfb2a5..390a8882d863 100644
--- a/web/libs/datamanager/src/components/Filters/Filters.scss
+++ b/web/libs/datamanager/src/components/Filters/Filters.scss
@@ -61,7 +61,7 @@
 
     &_withFilters {
       display: grid;
-      grid-template-columns: 65px min-content min-content 1fr min-content;
+      grid-template-columns: 65px min-content min-content 1fr 24px;
       grid-gap: 3px 4px;
     }
   }
diff --git a/web/libs/datamanager/src/components/Filters/types/Date.jsx b/web/libs/datamanager/src/components/Filters/types/Date.jsx
index 6bf99795a5d2..46b35bf53681 100644
--- a/web/libs/datamanager/src/components/Filters/types/Date.jsx
+++ b/web/libs/datamanager/src/components/Filters/types/Date.jsx
@@ -38,7 +38,7 @@ export const DateTimeInput = observer(({ value, range, time, onChange }) => {
   }, [range, value]);
 
   return (
-    <DatePicker value={dateValue} selectRange={range} showTime={time === true} onChange={onValueChange} size="small" />
+    <DatePicker size="small" value={dateValue} selectRange={range} showTime={time === true} onChange={onValueChange} />
   );
 });
 
diff --git a/web/libs/datamanager/src/components/Filters/types/List.jsx b/web/libs/datamanager/src/components/Filters/types/List.jsx
index f803fa824485..62ac1f1a8922 100644
--- a/web/libs/datamanager/src/components/Filters/types/List.jsx
+++ b/web/libs/datamanager/src/components/Filters/types/List.jsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { FilterDropdown } from "../FilterDropdown";
 // import { Common } from "./Common";
 
-export const VariantSelect = observer(({ filter, schema, onChange, multiple, value, placeholder }) => {
+export const VariantSelect = observer(({ filter, schema, onChange, multiple, value }) => {
   if (!schema) return <></>;
   const { items } = schema;
 
@@ -14,9 +14,10 @@ export const VariantSelect = observer(({ filter, schema, onChange, multiple, val
   })();
 
   const FilterItem = filter.cellView?.FilterItem;
+
   return (
     <FilterDropdown
-      items={items?.toJSON ? items.toJSON() : items}
+      items={items}
       value={selectedValue}
       multiple={multiple}
       optionRender={FilterItem}
@@ -27,9 +28,7 @@ export const VariantSelect = observer(({ filter, schema, onChange, multiple, val
             }
           : undefined
       }
-      searchFilter={filter.cellView?.searchFilter}
       onChange={(value) => onChange(value)}
-      placeholder={placeholder ?? "Select value"}
     />
   );
 });
diff --git a/web/libs/editor/src/common/Pagination/Pagination.tsx b/web/libs/editor/src/common/Pagination/Pagination.tsx
index 71d8878bc4c8..f62d1a2ce2f0 100644
--- a/web/libs/editor/src/common/Pagination/Pagination.tsx
+++ b/web/libs/editor/src/common/Pagination/Pagination.tsx
@@ -1,8 +1,7 @@
-import { type ChangeEvent, type FC, forwardRef, type KeyboardEvent, useCallback, useMemo, useState } from "react";
+import { type ChangeEvent, type FC, forwardRef, type KeyboardEvent, useCallback, useState } from "react";
 import { Hotkey } from "../../core/Hotkey";
 import { useHotkey } from "../../hooks/useHotkey";
 import { Block, Elem } from "../../utils/bem";
-import { Select } from "@humansignal/ui";
 import "./Pagination.scss";
 
 interface PaginationProps {
@@ -57,14 +56,15 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
       onChange?.(1, e.currentTarget.value);
     };
 
-    const options = useMemo(() => {
+    const renderOptions = () => {
       return pageSizeOptions.map((obj: number, index: number) => {
-        return {
-          value: obj,
-          label: `${obj} per page`,
-        };
+        return (
+          <option value={obj} key={index}>
+            {obj} per page
+          </option>
+        );
       });
-    }, [pageSizeOptions]);
+    };
 
     return (
       <Block name="pagination" mod={{ size, outline, align, noPadding, disabled }}>
@@ -149,7 +149,9 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
         </Elem>
         {pageSizeSelectable && (
           <Elem name="page-size">
-            <Select value={pageSize} onChange={handleChangeSelect} options={options} />
+            <select value={pageSize} onChange={handleChangeSelect}>
+              {renderOptions()}
+            </select>
           </Elem>
         )}
       </Block>
diff --git a/web/libs/editor/src/common/Select/Select.scss b/web/libs/editor/src/common/Select/Select.scss
new file mode 100644
index 000000000000..de352a0a2e06
--- /dev/null
+++ b/web/libs/editor/src/common/Select/Select.scss
@@ -0,0 +1,148 @@
+.select {
+  --select-surface-color: var(--sand_0);
+
+  height: 40px;
+  background-color: var(--select-surface-color);
+  font-size: 16px;
+  line-height: 22px;
+  border: 1px solid var(--sand_300);
+  box-sizing: border-box;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &_surface {
+    &_emphasis {
+      --select-surface-color: var(--sand_0);
+    }
+  }
+
+  &_size {
+    &_compact {
+      height: 32px;
+      border-radius: 3px;
+    }
+
+    &_small {
+      height: 24px;
+      font-size: 12px;
+    }
+  }
+
+  &__list {
+    width: max-content;
+  }
+
+  &__dropdown {
+    &:not(.dropdown__trigger) {
+      max-height: 280px;
+      overflow: auto;
+
+      .select__option {
+        padding-inline: 12px;
+      }
+    }
+  }
+
+  &__dropdown_variant_rounded {
+    &:not(.dropdown__trigger) {
+      border-radius: 4px;
+      padding-bottom: 8px;
+      margin-top: 4px;
+    }
+  }
+
+  &__selected {
+    width: 100%;
+    padding: 0 7px;
+    min-width: 60px;
+    display: flex;
+    font-weight: 500;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__value {
+    width: max-content;
+    min-width: 30px;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__option {
+    cursor: pointer;
+    padding: 4px 16px;
+
+    &:hover,
+    &_focused {
+      background-color: var(--sand_0);
+    }
+
+    &_selected {
+      color: var(--sand_0);
+      background-color: var(--primary_link);
+    }
+
+    &_selected:hover,
+    &_selected.select_focused {
+      background-color: var(--grape_0);
+    }
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    margin-left: 5px;
+    position: relative;
+
+    &::before,
+    &::after {
+      width: 6px;
+      height: 6px;
+      display: block;
+      position: absolute;
+      content: "";
+      border: 1px solid var(--primary_link);
+      border-right: none;
+      border-bottom: none;
+    }
+
+    &::before {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, 50%) rotate(45deg);
+    }
+
+    &::after {
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(-135deg);
+    }
+  }
+
+  &__optgroup {
+    &-list {
+      width: max-content;
+    }
+
+    &-label {
+      padding: 4px 16px;
+      color:var(--sand_700);
+    }
+  }
+
+  &__optgroup-list &__option {
+    padding-left: 24px;
+  }
+
+  &_disabled {
+    pointer-events: none;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 6px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--grape_100);
+    border-color: var(--primary_link);
+  }
+}
\ No newline at end of file
diff --git a/web/libs/editor/src/common/Select/Select.tsx b/web/libs/editor/src/common/Select/Select.tsx
new file mode 100644
index 000000000000..4a79a99cea45
--- /dev/null
+++ b/web/libs/editor/src/common/Select/Select.tsx
@@ -0,0 +1,293 @@
+import {
+  Children,
+  cloneElement,
+  createContext,
+  type CSSProperties,
+  type FC,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactChild,
+  type ReactFragment,
+  type ReactNode,
+  type ReactPortal,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { BemWithSpecifiContext, cn } from "../../utils/bem";
+import { shallowEqualArrays } from "shallow-equal";
+import { isDefined } from "../../utils/utilities";
+import { Dropdown } from "../Dropdown/Dropdown";
+import "./Select.scss";
+import { FF_DEV_2669, isFF } from "../../utils/feature-flags";
+
+type FoundChild = ReactChild | ReactFragment | ReactPortal;
+
+interface SelectProps {
+  placeholder?: ReactNode;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  size?: "normal" | "medium" | "small";
+  style?: CSSProperties;
+  variant?: "base" | "rounded";
+  surface?: "base" | "emphasis";
+  multiple?: boolean;
+  renderMultipleSelected?: (value: string[]) => ReactNode;
+  tabIndex?: number;
+  onChange?: (newValue?: string | string[]) => void;
+  dataTestid?: string;
+}
+
+interface SelectComponent<T> extends FC<T> {
+  Option: FC;
+  OptGroup: FC;
+}
+
+interface SelectContextProps {
+  multiple?: boolean;
+  focused?: string | boolean | null;
+  currentValue?: string | string[] | null;
+  setCurrentValue: (value?: string | string[]) => void;
+}
+
+const SelectContext = createContext<SelectContextProps>({
+  multiple: false,
+  focused: false,
+  currentValue: [],
+  setCurrentValue() {},
+});
+
+const { Block, Elem } = BemWithSpecifiContext();
+
+const findSelectedChild = (children: ReactNode, value?: string | string[]): FoundChild | null => {
+  return Children.toArray(children).reduce<FoundChild | null>((res, child) => {
+    if (res !== null) return res;
+
+    const { type, props } = child as any;
+
+    if (type.displayName === "Select.Option") {
+      if (props.value === value) {
+        res = child;
+      } else if (Array.isArray(value) && value.length === 1) {
+        res = findSelectedChild(children, value[0]);
+      }
+    } else if (type.displayName === "Select.OptGroup") {
+      res = findSelectedChild(props.children, value);
+    }
+
+    return res;
+  }, null);
+};
+
+export const Select: SelectComponent<SelectProps> = ({
+  value,
+  defaultValue,
+  size,
+  children,
+  style,
+  multiple,
+  renderMultipleSelected,
+  onChange,
+  variant,
+  surface,
+  dataTestid,
+  tabIndex = 0,
+  placeholder = "Select value",
+}) => {
+  const dropdown = useRef<any>();
+  const rootRef = useRef();
+  const [currentValue, setCurrentValue] = useState(multiple ? ([] as string[]).concat(value ?? []).flat(10) : value);
+  const [focused, setFocused] = useState<string | null>();
+
+  const options = Children.toArray(children).filter((child: any) => {
+    // toArray is returning incorrect types which don't have type.displayName or props, but the actual child does.
+    return child.type.displayName === "Select.Option" && !child.props.exclude;
+  });
+
+  const setValue = (newValue?: string | string[]) => {
+    let updatedValue: string | string[] | undefined = newValue;
+
+    if (multiple && Array.isArray(currentValue) && newValue) {
+      if (!Array.isArray(newValue) && currentValue.includes(newValue)) {
+        updatedValue = currentValue.filter((v) => v !== newValue);
+      } else {
+        updatedValue = [...currentValue, newValue].flat(10);
+      }
+    }
+
+    setCurrentValue(updatedValue);
+    return updatedValue;
+  };
+
+  const context: SelectContextProps = {
+    currentValue,
+    focused,
+    multiple,
+    setCurrentValue(value) {
+      const newValue = setValue(value);
+
+      onChange?.(newValue);
+
+      if (multiple !== true) {
+        dropdown.current?.close();
+      }
+    },
+  };
+
+  const selected = useMemo(() => {
+    if (isFF(FF_DEV_2669) && multiple && renderMultipleSelected) {
+      return renderMultipleSelected(Array.isArray(currentValue) ? currentValue : [currentValue || ""]);
+    }
+    if (multiple && Array.isArray(currentValue) && currentValue?.length > 1) {
+      return <>Multiple values selected</>;
+    }
+
+    const foundChild = findSelectedChild(children, defaultValue ?? currentValue) as any;
+
+    const result = foundChild?.props?.children;
+
+    return result ? cloneElement(<>{result}</>) : null;
+  }, [currentValue, defaultValue, children, value, renderMultipleSelected]);
+
+  const focusItem = (i?: number) => {
+    const child = options[i ?? 0] as any;
+
+    setFocused(child.props.value);
+  };
+
+  const focusNext = useCallback(
+    (direction) => {
+      const selectedIndex = options.findIndex((c: any) => c.props.value === focused);
+
+      let nextIndex = selectedIndex === -1 ? 0 : selectedIndex + direction;
+
+      if (nextIndex >= options.length) {
+        nextIndex = 0;
+      } else if (nextIndex < 0) {
+        nextIndex = options.length - 1;
+      }
+
+      focusItem(nextIndex);
+    },
+    [focused],
+  );
+
+  const handleKeyboard = (e: KeyboardEvent) => {
+    if (document.activeElement !== rootRef.current) {
+      return;
+    }
+
+    if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+      if (dropdown?.current.visible) {
+        focusNext(e.key === "ArrowDown" ? 1 : -1);
+      } else {
+        dropdown.current?.open();
+        focusItem();
+      }
+    } else if ((e.code === "Space" || e.code === "Enter") && isDefined(focused)) {
+      context.setCurrentValue(focused);
+    }
+  };
+
+  useEffect(() => {
+    if (multiple && Array.isArray(value) && Array.isArray(currentValue)) {
+      if (shallowEqualArrays(value ?? [], currentValue ?? []) === false) {
+        context.setCurrentValue(value?.flat?.(10) ?? []);
+      }
+    } else if (value !== currentValue) {
+      context.setCurrentValue(value);
+    }
+  }, [value, multiple]);
+
+  return (
+    <SelectContext.Provider value={context}>
+      <Block
+        ref={rootRef}
+        name="select"
+        mod={{ size, surface }}
+        style={style}
+        tabIndex={tabIndex}
+        onKeyDown={handleKeyboard}
+      >
+        <Dropdown.Trigger
+          ref={dropdown}
+          className={cn("select", { elem: "dropdown", mod: { variant } }).toClassName()}
+          content={<Elem name="list">{children}</Elem>}
+          onToggle={(visible: boolean) => {
+            if (!visible) setFocused(null);
+          }}
+        >
+          <Elem name="selected" data-testid={dataTestid}>
+            <Elem name="value">{selected ?? placeholder}</Elem>
+            <Elem name="icon" />
+          </Elem>
+        </Dropdown.Trigger>
+      </Block>
+    </SelectContext.Provider>
+  );
+};
+Select.displayName = "Select";
+
+interface SelectOptionProps {
+  value?: string;
+  style?: CSSProperties;
+  exclude?: boolean;
+}
+
+const SelectOption: FC<SelectOptionProps> = ({ value, children, style }) => {
+  const { setCurrentValue, multiple, currentValue, focused } = useContext(SelectContext);
+
+  const isSelected = useMemo(() => {
+    const option = String(value);
+
+    if (multiple && Array.isArray(currentValue)) {
+      return currentValue.map((v) => String(v)).includes(option);
+    }
+    return option === String(currentValue);
+  }, [value, focused, currentValue]);
+
+  const isFocused = useMemo(() => {
+    return String(value) === String(focused);
+  }, [value, focused]);
+
+  return (
+    <Elem
+      name="option"
+      mod={{
+        selected: isSelected,
+        focused: isFocused,
+      }}
+      onClick={(e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        setCurrentValue(value);
+      }}
+      style={style}
+    >
+      {children}
+    </Elem>
+  );
+};
+
+SelectOption.displayName = "Select.Option";
+
+interface SelectioOptGroupProps {
+  label?: JSX.Element | string;
+  style?: CSSProperties;
+}
+
+const SelectOptGroup: FC<SelectioOptGroupProps> = ({ label, children, style }) => {
+  return (
+    <Elem name="optgroup" style={style}>
+      <Elem name="optgroup-label">{label}</Elem>
+      <Elem name="optgroup-list">{children}</Elem>
+    </Elem>
+  );
+};
+
+SelectOptGroup.displayName = "Select.OptGroup";
+
+Select.Option = SelectOption;
+Select.OptGroup = SelectOptGroup;
diff --git a/web/libs/editor/src/components/Filter/Filter.scss b/web/libs/editor/src/components/Filter/Filter.scss
new file mode 100644
index 000000000000..64b55fa7078c
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/Filter.scss
@@ -0,0 +1,42 @@
+.filter {
+  padding: 10px;
+
+  &__empty {
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: var(--sand_900);
+    width: 220px;
+  }
+}
+
+.filter-button {
+  display: flex;
+  height: 24px;
+  padding: 0 6px 0 2px;
+  cursor: pointer;
+  align-items: center;
+  border-radius: 4px;
+
+  &:active,
+  &_active {
+    background: var(--sand_200);
+  }
+
+  &__icon {
+    align-items: center;
+    display: flex;
+  }
+
+  &__filter-length {
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+    color: var(--grape_700);
+    width: 15px;
+    height: 20px;
+    line-height: 21px;
+    border-radius: 2px;
+    background: var(--grape_100);
+    margin-left: 3px;
+  }
+}
\ No newline at end of file
diff --git a/web/libs/editor/src/components/Filter/Filter.tsx b/web/libs/editor/src/components/Filter/Filter.tsx
new file mode 100644
index 000000000000..6eafe0de8a0c
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/Filter.tsx
@@ -0,0 +1,132 @@
+import { Block, Elem } from "../../utils/bem";
+import { Dropdown } from "../../common/Dropdown/Dropdown";
+
+import { type FC, useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "../../common/Button/Button";
+import { IconFilter } from "@humansignal/icons";
+
+import "./Filter.scss";
+import type { FilterInterface, FilterListInterface } from "./FilterInterfaces";
+import { FilterRow } from "./FilterRow";
+import { FilterItems } from "./filter-util";
+import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
+
+export const Filter: FC<FilterInterface> = ({ availableFilters, filterData, onChange, animated = true }) => {
+  const [filterList, setFilterList] = useState<FilterListInterface[]>([]);
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    onChange(FilterItems(filterData, filterList));
+  }, [filterData]);
+
+  const addNewFilterListItem = useCallback(() => {
+    setFilterList((filterList) => [
+      ...filterList,
+      {
+        field: availableFilters[0]?.label ?? "",
+        logic: "and",
+        operation: "",
+        value: "",
+        path: "",
+      },
+    ]);
+  }, [setFilterList, availableFilters]);
+
+  const onChangeRow = useCallback(
+    (index: number, { field, operation, value, path, logic }: Partial<FilterListInterface>) => {
+      setFilterList((oldList) => {
+        const newList = [...oldList];
+
+        newList[index] = {
+          ...newList[index],
+          field: field ?? newList[index].field,
+          operation: operation ?? newList[index].operation,
+          logic: logic ?? newList[index].logic,
+          value: value ?? newList[index].value,
+          path: path ?? newList[index].path,
+        };
+
+        onChange(FilterItems(filterData, newList));
+
+        return newList;
+      });
+    },
+    [setFilterList, filterData],
+  );
+
+  const onDeleteRow = useCallback(
+    (index: number) => {
+      setFilterList((oldList) => {
+        const newList = [...oldList];
+
+        newList.splice(index, 1);
+
+        if (newList[0]) {
+          newList[0].logic = "and";
+        }
+
+        onChange(FilterItems(filterData, newList));
+
+        return newList;
+      });
+    },
+    [setFilterList, filterData],
+  );
+
+  const renderFilterList = useMemo(() => {
+    return filterList.map(({ field, operation, logic, value }, index) => (
+      <Block key={index} name="filter-item">
+        <FilterRow
+          index={index}
+          availableFilters={availableFilters}
+          field={field}
+          logic={logic}
+          operation={operation}
+          value={value}
+          onDelete={onDeleteRow}
+          onChange={onChangeRow}
+        />
+      </Block>
+    ));
+  }, [filterList, availableFilters, onDeleteRow, onChangeRow]);
+
+  const renderFilter = useMemo(() => {
+    return (
+      <Block name={"filter"}>
+        {filterList.length > 0 ? renderFilterList : <Elem name="empty">No filters applied</Elem>}
+        <Button look="alt" size="small" type={"text"} onClick={addNewFilterListItem}>
+          Add {filterList.length ? "Another Filter" : "Filter"}
+        </Button>
+      </Block>
+    );
+  }, [filterList, renderFilterList, addNewFilterListItem]);
+
+  const onToggle = useCallback((isOpen: boolean) => {
+    setActive(isOpen);
+  }, []);
+
+  return (
+    <Dropdown.Trigger content={renderFilter} dataTestId={"dropdown"} animated={animated} onToggle={onToggle}>
+      <Block data-testid={"filter-button"} name={"filter-button"} mod={{ active }}>
+        <Elem name={"icon"}>
+          <IconFilter />
+        </Elem>
+        <Elem
+          name={"text"}
+          style={{
+            fontSize: isFF(FF_DEV_3873) && 12,
+            fontWeight: isFF(FF_DEV_3873) && 500,
+            lineHeight: isFF(FF_DEV_3873) && "24px",
+          }}
+        >
+          Filter
+        </Elem>
+        {filterList.length > 0 && (
+          <Elem name={"filter-length"} data-testid={"filter-length"}>
+            {filterList.length}
+          </Elem>
+        )}
+      </Block>
+    </Dropdown.Trigger>
+  );
+};
diff --git a/web/libs/editor/src/components/Filter/FilterDropdown.tsx b/web/libs/editor/src/components/Filter/FilterDropdown.tsx
new file mode 100644
index 000000000000..0bc8efb3506a
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/FilterDropdown.tsx
@@ -0,0 +1,53 @@
+import type { FC } from "react";
+import { Select } from "../../common/Select/Select";
+
+interface FilterDropdownInterface {
+  items: any[];
+  onChange: (value: any) => void;
+  value?: string | string[] | undefined;
+  placeholder?: string;
+  defaultValue?: string | string[] | undefined;
+  optionRender?: any;
+  dataTestid?: string;
+  style?: any;
+}
+
+const renderOptions = (item: any, index: number) => {
+  const value = item.key ?? item.label;
+  const key = index;
+
+  return (
+    <Select.Option key={`${key}`} value={value} style={{ fontSize: 12 }} title={value}>
+      {item.label}
+    </Select.Option>
+  );
+};
+
+export const FilterDropdown: FC<FilterDropdownInterface> = ({
+  placeholder,
+  defaultValue,
+  items,
+  style,
+  dataTestid,
+  value,
+  onChange,
+}) => {
+  return (
+    <Select
+      placeholder={placeholder}
+      defaultValue={defaultValue}
+      dataTestid={dataTestid}
+      value={value}
+      style={{
+        fontSize: 12,
+        width: "100%",
+        backgroundColor: "#fafafa",
+        ...(style ?? {}),
+      }}
+      onChange={(value) => onChange(value)}
+      size="small"
+    >
+      {items.map(renderOptions)}
+    </Select>
+  );
+};
diff --git a/web/libs/editor/src/components/Filter/FilterInput.tsx b/web/libs/editor/src/components/Filter/FilterInput.tsx
new file mode 100644
index 000000000000..8393e64fa3ac
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/FilterInput.tsx
@@ -0,0 +1,36 @@
+import React, { type FC } from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import Input from "../../common/Input/Input";
+
+interface FilterInputInterface {
+  value: string | number | undefined;
+  type: string;
+  onChange: (value: any) => void;
+  placeholder?: string;
+  schema?: any;
+  style?: any;
+}
+
+export const FilterInput: FC<FilterInputInterface> = ({ value, type, onChange, placeholder, schema, style }) => {
+  const inputRef = React.useRef();
+  const onChangeHandler = () => {
+    const value = inputRef.current?.value ?? inputRef.current?.input?.value;
+
+    onChange(value);
+  };
+
+  return (
+    <Input
+      size="small"
+      type={type}
+      value={value ?? ""}
+      ref={inputRef}
+      placeholder={placeholder}
+      data-testid={"filter-input"}
+      onChange={onChangeHandler}
+      style={style}
+      {...(schema ?? {})}
+    />
+  );
+};
diff --git a/web/libs/editor/src/components/Filter/FilterInterfaces.tsx b/web/libs/editor/src/components/Filter/FilterInterfaces.tsx
new file mode 100644
index 000000000000..4963f69dbcbd
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/FilterInterfaces.tsx
@@ -0,0 +1,26 @@
+export enum Logic {
+  and = "And",
+  or = "Or",
+}
+
+export interface FilterInterface {
+  availableFilters: AvailableFiltersInterface[];
+  onChange: (filter: any) => void;
+  filterData: any;
+
+  animated?: boolean;
+}
+
+export interface FilterListInterface {
+  field?: string | string[] | undefined;
+  operation?: string | string[] | undefined;
+  value?: any;
+  path?: string;
+  logic?: "and" | "or";
+}
+
+export interface AvailableFiltersInterface {
+  label: string;
+  path: string;
+  type: "Boolean" | "Common" | "Number" | "String" | string;
+}
diff --git a/web/libs/editor/src/components/Filter/FilterRow.scss b/web/libs/editor/src/components/Filter/FilterRow.scss
new file mode 100644
index 000000000000..7e4a70955dec
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/FilterRow.scss
@@ -0,0 +1,25 @@
+.filter-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 8px;
+
+  &__title-row {
+    width: 60px;
+    text-align: right;
+  }
+
+  &__delete {
+    cursor: pointer;
+    height: 16px;
+  }
+
+  &__column {
+    display: flex;
+    margin-right: 8px;
+
+    input {
+      height: 24px !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/libs/editor/src/components/Filter/FilterRow.tsx b/web/libs/editor/src/components/Filter/FilterRow.tsx
new file mode 100644
index 000000000000..4c42ac7a2b56
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/FilterRow.tsx
@@ -0,0 +1,118 @@
+import { type FC, useEffect, useState } from "react";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import * as FilterInputs from "./types";
+
+import { Block, Elem } from "../../utils/bem";
+import { FilterDropdown } from "./FilterDropdown";
+
+import "./FilterRow.scss";
+import { type FilterListInterface, Logic } from "./FilterInterfaces";
+import { isDefined } from "../../utils/utilities";
+import { IconDelete } from "@humansignal/icons";
+
+interface FilterRowInterface extends FilterListInterface {
+  availableFilters: any;
+  index: number;
+  onChange: (index: number, obj: any) => void;
+  onDelete: (index: number) => void;
+}
+
+const logicItems = Object.entries(Logic).map(([key, label]) => ({ key, label }));
+
+export const FilterRow: FC<FilterRowInterface> = ({
+  field,
+  operation,
+  value,
+  logic,
+  availableFilters,
+  index,
+  onChange,
+  onDelete,
+}) => {
+  const [_selectedField, setSelectedField] = useState(0);
+  const [_selectedOperation, setSelectedOperation] = useState(-1);
+  const [_inputComponent, setInputComponent] = useState(null);
+
+  useEffect(() => {
+    onChange(index, { field: availableFilters[_selectedField].label, path: availableFilters[_selectedField].path });
+  }, [_selectedField]);
+
+  useEffect(() => {
+    const _operationItems = FilterInputs?.[availableFilters[_selectedField].type];
+    const _operation = _operationItems.findIndex((item: any) => (item.key ?? item.label) === _selectedOperation);
+
+    if (!isDefined(_operation) || _operation < 0) return;
+    const _filterInputs = FilterInputs?.[availableFilters[_selectedField].type][_operation];
+
+    onChange(index, { operation: _filterInputs?.key });
+    setInputComponent(_filterInputs?.input);
+  }, [_selectedOperation, _selectedField]);
+
+  return (
+    <Block name={"filter-row"} data-testid={"filter-row"}>
+      <Elem name={"column"}>
+        {index === 0 ? (
+          <Elem name={"title-row"}>Where</Elem>
+        ) : (
+          <FilterDropdown
+            value={logic}
+            items={logicItems}
+            dataTestid={"logic-dropdown"}
+            style={{ width: "60px" }}
+            onChange={(value: any) => {
+              onChange(index, { logic: value });
+            }}
+          />
+        )}
+      </Elem>
+      <Elem name={"column"}>
+        <FilterDropdown
+          value={field}
+          items={availableFilters}
+          dataTestid={"field-dropdown"}
+          style={{ width: "140px" }}
+          onChange={(value: any) => {
+            setSelectedField(availableFilters.findIndex((item: any) => (item.key ?? item.label) === value));
+
+            onChange(index, { value: null });
+          }}
+        />
+      </Elem>
+      <Elem name={"column"}>
+        <FilterDropdown
+          value={operation}
+          items={FilterInputs?.[availableFilters[_selectedField].type]}
+          dataTestid={"operation-dropdown"}
+          style={{ width: "110px" }}
+          onChange={(value: any) => {
+            setSelectedOperation(value);
+          }}
+        />
+      </Elem>
+      <Elem name={"column"}>
+        {_inputComponent && operation !== "empty" && (
+          <Elem
+            tag={_inputComponent}
+            value={value}
+            onChange={(value: any) => {
+              onChange(index, { value });
+            }}
+          />
+        )}
+      </Elem>
+      <Elem name={"column"}>
+        <Elem
+          onClick={() => {
+            onDelete(index);
+          }}
+          data-testid={`delete-row-${index}`}
+          name={"delete"}
+        >
+          <IconDelete />
+        </Elem>
+      </Elem>
+    </Block>
+  );
+};
diff --git a/web/libs/editor/src/components/Filter/__tests__/Filter.test.tsx b/web/libs/editor/src/components/Filter/__tests__/Filter.test.tsx
new file mode 100644
index 000000000000..b3a4d725f103
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/__tests__/Filter.test.tsx
@@ -0,0 +1,244 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Filter } from "../Filter";
+
+describe("Filter", () => {
+  const mockOnChange = jest.fn();
+  const filterData = [
+    {
+      labelName: "AirPlane",
+    },
+    {
+      labelName: "Car",
+    },
+    {
+      labelName: "AirCar",
+    },
+  ];
+
+  test("Validate if filter is rendering", () => {
+    const filter = render(
+      <Filter
+        onChange={mockOnChange}
+        filterData={filterData}
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+      />,
+    );
+
+    const whereText = filter.getByText("Filter");
+
+    expect(whereText).toBeDefined();
+  });
+
+  test("Should delete row when delete button is clicked", () => {
+    const filter = render(
+      <Filter
+        onChange={mockOnChange}
+        filterData={filterData}
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+      />,
+    );
+
+    const FilterButton = filter.getByText("Filter");
+
+    fireEvent.click(FilterButton);
+
+    const AddButton = filter.getByText("Add Filter");
+
+    fireEvent.click(AddButton);
+    fireEvent.click(AddButton);
+
+    const selectBox = filter.getByTestId("logic-dropdown");
+
+    expect(selectBox.textContent).toBe("And");
+
+    fireEvent.click(selectBox);
+    fireEvent.click(screen.getByText("Or"));
+
+    expect(selectBox.textContent).toBe("Or");
+
+    fireEvent.click(screen.getByTestId("delete-row-1"));
+
+    expect(filter.getAllByTestId("filter-row")).toHaveLength(1);
+  });
+
+  test("Should filter the content", () => {
+    let filteredContent: any;
+
+    const filter = render(
+      <Filter
+        onChange={(value) => {
+          filteredContent = value;
+        }}
+        filterData={filterData}
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+      />,
+    );
+
+    const FilterButton = filter.getByText("Filter");
+
+    fireEvent.click(FilterButton);
+
+    expect(screen.getByText("No filters applied")).toBeDefined();
+
+    const AddButton = filter.getByText("Add Filter");
+
+    fireEvent.click(AddButton);
+
+    const fieldDropdown = filter.getByTestId("field-dropdown");
+    const operationDropdown = filter.getByTestId("operation-dropdown");
+
+    fireEvent.click(operationDropdown);
+    fireEvent.click(screen.getByText("not contains"));
+
+    const filterInput = filter.getByTestId("filter-input");
+
+    expect(filterInput).toBeDefined();
+
+    expect(fieldDropdown.textContent).toBe("Annotation results");
+    expect(operationDropdown.textContent).toBe("not contains");
+
+    fireEvent.change(filterInput, { target: { value: "Plane" } });
+
+    expect(filteredContent).toStrictEqual([{ labelName: "Car" }, { labelName: "AirCar" }]);
+  });
+
+  test("Should hide dropdown filter", async () => {
+    const filter = render(
+      <Filter
+        onChange={mockOnChange}
+        filterData={filterData}
+        animated={false}
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+      />,
+    );
+
+    const FilterButton = await filter.getByText("Filter");
+
+    fireEvent.click(FilterButton);
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const dropdown = await filter.getByTestId("dropdown");
+
+    expect(dropdown.classList.contains("dm-visible")).toBe(true);
+
+    const AddButton = await filter.getByText("Add Filter");
+
+    fireEvent.click(AddButton);
+
+    fireEvent.click(FilterButton);
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(dropdown.classList.contains("dm-before-appear")).toBe(false);
+    expect(dropdown.classList.contains("dm-visible")).toBe(false);
+    expect(dropdown.classList.contains("dm-before-disappear")).toBe(false);
+  });
+
+  test("Should show filter length badge", () => {
+    const filter = render(
+      <Filter
+        onChange={mockOnChange}
+        filterData={filterData}
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+      />,
+    );
+
+    const FilterButton = filter.getByText("Filter");
+
+    fireEvent.click(FilterButton);
+
+    expect(screen.getByText("No filters applied")).toBeDefined();
+
+    const AddButton = filter.getByText("Add Filter");
+
+    fireEvent.click(AddButton);
+    fireEvent.click(AddButton);
+
+    const filterLength = filter.getByTestId("filter-length");
+
+    expect(filterLength.textContent).toBe("2");
+  });
+
+  test("Filter button should be selected", () => {
+    const filter = render(
+      <Filter
+        onChange={mockOnChange}
+        filterData={filterData}
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+      />,
+    );
+
+    const FilterButton = filter.getByTestId("filter-button");
+
+    fireEvent.click(FilterButton);
+
+    expect(FilterButton.classList.contains("dm-filter-button_active")).toBe(true);
+  });
+});
diff --git a/web/libs/editor/src/components/Filter/__tests__/FilterRow.test.tsx b/web/libs/editor/src/components/Filter/__tests__/FilterRow.test.tsx
new file mode 100644
index 000000000000..75c88334c004
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/__tests__/FilterRow.test.tsx
@@ -0,0 +1,149 @@
+import { FilterRow } from "../FilterRow";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("FilterRow", () => {
+  const mockOnChange = jest.fn();
+  const mockOnDelete = jest.fn();
+
+  test('should display "Where" when index is 0', () => {
+    const filter = render(
+      <FilterRow
+        field=""
+        operation=""
+        value=""
+        logic="and"
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+        index={0}
+        onChange={mockOnChange}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const whereText = filter.getByText("Where");
+
+    expect(whereText).toBeDefined();
+  });
+
+  test("should display select box when index is 1 or more", () => {
+    const filter = render(
+      <FilterRow
+        field=""
+        operation=""
+        value=""
+        logic="and"
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+        index={1}
+        onChange={mockOnChange}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const selectBox = filter.getByTestId("logic-dropdown");
+
+    expect(selectBox.textContent).toBe("And");
+
+    fireEvent.click(screen.getByTestId("logic-dropdown"));
+    fireEvent.click(screen.getByText("Or"));
+
+    expect(selectBox.textContent).toBe("Or");
+  });
+
+  test("should display select box when index is 1 or more", () => {
+    const filter = render(
+      <FilterRow
+        field=""
+        operation=""
+        value=""
+        logic="and"
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+        index={1}
+        onChange={mockOnChange}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const selectBox = filter.getByTestId("logic-dropdown");
+
+    expect(selectBox.textContent).toBe("And");
+
+    fireEvent.click(selectBox);
+    fireEvent.click(screen.getByText("Or"));
+
+    expect(selectBox.textContent).toBe("Or");
+  });
+
+  test("select and fill fields", () => {
+    const filter = render(
+      <FilterRow
+        field=""
+        operation=""
+        value=""
+        logic="and"
+        availableFilters={[
+          {
+            label: "Annotation results",
+            path: "labelName",
+            type: "String",
+          },
+          {
+            label: "Confidence score",
+            path: "score",
+            type: "Number",
+          },
+        ]}
+        index={1}
+        onChange={mockOnChange}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const fieldDropdown = filter.getByTestId("field-dropdown");
+    const operationDropdown = filter.getByTestId("operation-dropdown");
+
+    expect(fieldDropdown).toBeDefined();
+    fireEvent.click(fieldDropdown);
+    fireEvent.click(screen.getByText("Annotation results"));
+    fireEvent.click(operationDropdown);
+    fireEvent.click(screen.getByText("not contains"));
+
+    const filterInput = filter.getByTestId("filter-input");
+
+    expect(filterInput).toBeDefined();
+
+    expect(fieldDropdown.textContent).toBe("Annotation results");
+    expect(operationDropdown.textContent).toBe("not contains");
+  });
+});
diff --git a/web/libs/editor/src/components/Filter/__tests__/filter-utils.test.tsx b/web/libs/editor/src/components/Filter/__tests__/filter-utils.test.tsx
new file mode 100644
index 000000000000..a25f4fbc0bc5
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/__tests__/filter-utils.test.tsx
@@ -0,0 +1,284 @@
+import { FilterItemsByOperation } from "../filter-util";
+
+describe("FilterItems", () => {
+  const items = [
+    {
+      item: {
+        name: "Car",
+        value: 25,
+      },
+    },
+    {
+      item: {
+        name: "AirPlane",
+        value: 30,
+      },
+    },
+    {
+      item: {
+        name: "Car Flower",
+        value: 40,
+      },
+    },
+  ];
+
+  test("should filter items that contain the specified value", () => {
+    const filterItem = { operation: "contains", path: "item.name", value: "Car" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "Car",
+          value: 25,
+        },
+      },
+      {
+        item: {
+          name: "Car Flower",
+          value: 40,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that do not contain the specified value", () => {
+    const filterItem = { operation: "not_contains", path: "item.name", value: "Car" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that value is between the specified values", () => {
+    const filterItem = { operation: "in", path: "item.value", value: { min: 26, max: 35 } };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that value is not between the specified values", () => {
+    const filterItem = { operation: "not_in", path: "item.value", value: { min: 26, max: 35 } };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "Car",
+          value: 25,
+        },
+      },
+      {
+        item: {
+          name: "Car Flower",
+          value: 40,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that value match with regex specified value", () => {
+    const filterItem = { operation: "regex", path: "item.name", value: "[C-O]" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "Car",
+          value: 25,
+        },
+      },
+      {
+        item: {
+          name: "Car Flower",
+          value: 40,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that value is empty", () => {
+    const filterItem = { operation: "empty", path: "item.name", value: "" };
+    const filteredItems = FilterItemsByOperation(
+      [
+        {
+          item: {
+            name: "Car",
+            value: 25,
+          },
+        },
+        {
+          item: {
+            name: "",
+            value: 30,
+          },
+        },
+        {
+          item: {
+            name: null,
+            value: 40,
+          },
+        },
+      ],
+      filterItem,
+    );
+
+    console.log(filteredItems);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "",
+          value: 30,
+        },
+      },
+      {
+        item: {
+          name: null,
+          value: 40,
+        },
+      },
+    ]);
+  });
+
+  test("should return all items when value is empty", () => {
+    const filterItem = { operation: "contains", path: "item.name", value: "" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual(items);
+  });
+
+  test("should filter items that have a greater value than the specified value ", () => {
+    const filterItem = { operation: "greater", path: "item.value", value: "25" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+      {
+        item: {
+          name: "Car Flower",
+          value: 40,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that have a less value than the specified value ", () => {
+    const filterItem = { operation: "less", path: "item.value", value: "40" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "Car",
+          value: 25,
+        },
+      },
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that have a less or equal value than the specified value ", () => {
+    const filterItem = { operation: "less_or_equal", path: "item.value", value: "30" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "Car",
+          value: 25,
+        },
+      },
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that have a greater or equal value than the specified value ", () => {
+    const filterItem = { operation: "greater_or_equal", path: "item.value", value: "30" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+      {
+        item: {
+          name: "Car Flower",
+          value: 40,
+        },
+      },
+    ]);
+  });
+
+  test("should return all items when operation is invalid", () => {
+    const filterItem = { operation: "invalid_operation", path: "item.name", value: "Doe" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual(items);
+  });
+
+  test("should filter items that is equal as the specified value", () => {
+    const filterItem = { operation: "equal", path: "item.value", value: "25" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "Car",
+          value: 25,
+        },
+      },
+    ]);
+  });
+
+  test("should filter items that is not equal as the specified value", () => {
+    const filterItem = { operation: "not_equal", path: "item.value", value: "25" };
+    const filteredItems = FilterItemsByOperation(items, filterItem);
+
+    expect(filteredItems).toEqual([
+      {
+        item: {
+          name: "AirPlane",
+          value: 30,
+        },
+      },
+      {
+        item: {
+          name: "Car Flower",
+          value: 40,
+        },
+      },
+    ]);
+  });
+});
diff --git a/web/libs/editor/src/components/Filter/filter-util.ts b/web/libs/editor/src/components/Filter/filter-util.ts
new file mode 100644
index 000000000000..0041f7c2bed8
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/filter-util.ts
@@ -0,0 +1,192 @@
+import type { FilterListInterface } from "./FilterInterfaces";
+import { isDefined } from "../../utils/utilities";
+
+export const FilterItemsByOperation = (items: any[], filterItem: FilterListInterface) => {
+  if ((!filterItem.value || filterItem.value === "") && filterItem.operation !== "empty") return items;
+
+  switch (filterItem.operation) {
+    case "contains":
+      return contains(items, filterItem);
+    case "not_contains":
+      return notcontains(items, filterItem);
+    case "in":
+      return between(items, filterItem);
+    case "not_in":
+      return notbetween(items, filterItem);
+    case "regex":
+      return regex(items, filterItem);
+    case "empty":
+      return empty(items, filterItem);
+    case "greater":
+      return greater(items, filterItem);
+    case "less":
+      return less(items, filterItem);
+    case "less_or_equal":
+      return lessOrEqual(items, filterItem);
+    case "greater_or_equal":
+      return greaterOrEqual(items, filterItem);
+    case "equal":
+      return equal(items, filterItem);
+    case "not_equal":
+      return notequal(items, filterItem);
+    default:
+      return items;
+  }
+};
+
+export const FilterItems = (items: any[], filterList: FilterListInterface[]) => {
+  const _filteredList = [[...items]];
+
+  for (let i = 0; i < filterList.length; i++) {
+    if (!filterList[i].value && filterList[i].operation !== "empty") continue;
+
+    if (filterList[i].logic === "and") {
+      // 0 is equal to AND, 1 is equal to OR
+      _filteredList[_filteredList.length - 1] = FilterItemsByOperation(
+        _filteredList[_filteredList.length - 1],
+        filterList[i],
+      );
+    } else {
+      _filteredList.push(FilterItemsByOperation(items, filterList[i]));
+    }
+  }
+
+  return _filteredList.flat(1).reduce((unique, item) => (unique.includes(item) ? unique : [...unique, item]), []);
+};
+
+const contains = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item?.toLowerCase().includes(filterItem.value.toLowerCase());
+    });
+  }
+  return items;
+};
+
+const notcontains = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return !item?.toLowerCase().includes(filterItem.value.toLowerCase());
+    });
+  }
+  return items;
+};
+
+const greater = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item > filterItem.value;
+    });
+  }
+  return items;
+};
+
+const greaterOrEqual = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item >= filterItem.value;
+    });
+  }
+  return items;
+};
+
+const less = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item < filterItem.value;
+    });
+  }
+  return items;
+};
+
+const lessOrEqual = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item <= filterItem.value;
+    });
+  }
+  return items;
+};
+
+const equal = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item?.toString().toLowerCase() === filterItem.value?.toString().toLowerCase();
+    });
+  }
+  return items;
+};
+
+const notequal = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item?.toString().toLowerCase() !== filterItem.value?.toLowerCase();
+    });
+  }
+  return items;
+};
+
+const between = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return filterItem.value.min <= item && item <= filterItem.value.max;
+    });
+  }
+  return items;
+};
+
+const notbetween = (items: any[], filterItem: FilterListInterface) => {
+  if (isDefined(filterItem.value)) {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+
+      return item <= filterItem.value.min || filterItem.value.max <= item;
+    });
+  }
+  return items;
+};
+
+const regex = (items: any[], filterItem: FilterListInterface) => {
+  try {
+    return items.filter((obj) => {
+      const item = getFilteredPath(filterItem.path, obj);
+      const regex = new RegExp(filterItem.value, "g");
+
+      return item.match(regex);
+    });
+  } catch (e) {
+    return items;
+  }
+};
+
+const empty = (items: any[], filterItem: FilterListInterface) => {
+  return items.filter((obj) => {
+    const item = getFilteredPath(filterItem.path, obj);
+
+    return item === "" || !item || item === null || item === undefined || item === "blank";
+  });
+};
+
+const getFilteredPath = (path: string | string[], items: any[], separator = ".") => {
+  const properties = Array.isArray(path) ? path : path.split(separator);
+
+  return properties.reduce((prev, curr) => prev?.[curr], items);
+};
diff --git a/web/libs/editor/src/components/Filter/types/Boolean.jsx b/web/libs/editor/src/components/Filter/types/Boolean.jsx
new file mode 100644
index 000000000000..4b708df12bad
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/types/Boolean.jsx
@@ -0,0 +1,23 @@
+import { FilterDropdown } from "../FilterDropdown";
+import { observer } from "mobx-react";
+
+const BaseInput = observer((props) => (
+  <FilterDropdown
+    onChange={(value) => {
+      props.onChange(!value);
+    }}
+    items={[
+      { label: "true", key: true },
+      { label: "false", key: false },
+    ]}
+  />
+));
+
+export const BooleanFilter = [
+  {
+    key: "equal",
+    label: "is",
+    valueType: "single",
+    input: BaseInput,
+  },
+];
diff --git a/web/libs/editor/src/components/Filter/types/Common.jsx b/web/libs/editor/src/components/Filter/types/Common.jsx
new file mode 100644
index 000000000000..68724ef95e37
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/types/Common.jsx
@@ -0,0 +1,14 @@
+import { FilterDropdown } from "../FilterDropdown";
+import { observer } from "mobx-react";
+
+const BaseInput = observer((props) => (
+  <FilterDropdown onChange={(value) => props.onChange(value)} items={[{ label: "yes" }, { label: "no" }]} />
+));
+
+export const Common = [
+  {
+    key: "empty",
+    label: "is empty",
+    input: BaseInput,
+  },
+];
diff --git a/web/libs/editor/src/components/Filter/types/Number.jsx b/web/libs/editor/src/components/Filter/types/Number.jsx
new file mode 100644
index 000000000000..bc08372ab973
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/types/Number.jsx
@@ -0,0 +1,85 @@
+import { observer } from "mobx-react";
+import { FilterInput } from "../FilterInput";
+import { Common } from "./Common";
+
+const NumberInput = observer((props) => {
+  return <FilterInput {...props} type="number" value={props.value} pattern={"[0-9*]"} onChange={props.onChange} />;
+});
+
+const RangeInput = observer((props) => {
+  const min = props.value?.min ?? null;
+  const max = props.value?.max ?? null;
+
+  const onValueChange = (newValue) => {
+    console.log({ newValue });
+    props.onChange(newValue);
+  };
+
+  const onChangeMin = (newValue) => {
+    onValueChange({ min: Number(newValue), max });
+  };
+
+  const onChangeMax = (newValue) => {
+    onValueChange({ min, max: Number(newValue) });
+  };
+
+  return (
+    <>
+      <NumberInput placeholder="Min" value={min} onChange={onChangeMin} schema={props.schema} style={{ flex: 1 }} />
+      <span style={{ padding: "0 10px" }}>and</span>
+      <NumberInput placeholder="Max" value={max} onChange={onChangeMax} schema={props.schema} style={{ flex: 1 }} />
+    </>
+  );
+});
+
+export const NumberFilter = [
+  {
+    key: "equal",
+    label: "=",
+    valueType: "single",
+    input: NumberInput,
+  },
+  {
+    key: "not_equal",
+    label: "≠",
+    valueType: "single",
+    input: NumberInput,
+  },
+  {
+    key: "less",
+    label: "<",
+    valueType: "single",
+    input: NumberInput,
+  },
+  {
+    key: "greater",
+    label: ">",
+    valueType: "single",
+    input: NumberInput,
+  },
+  {
+    key: "less_or_equal",
+    label: "≤",
+    valueType: "single",
+    input: NumberInput,
+  },
+  {
+    key: "greater_or_equal",
+    label: "≥",
+    valueType: "single",
+    input: NumberInput,
+  },
+  {
+    key: "in",
+    label: "is between",
+    valueType: "range",
+    input: RangeInput,
+  },
+  {
+    key: "not_in",
+    label: "not between",
+    valueType: "range",
+    input: RangeInput,
+  },
+  ...Common,
+];
diff --git a/web/libs/editor/src/components/Filter/types/String.jsx b/web/libs/editor/src/components/Filter/types/String.jsx
new file mode 100644
index 000000000000..e2c38af17a22
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/types/String.jsx
@@ -0,0 +1,50 @@
+import { observer } from "mobx-react";
+import { FilterInput } from "../FilterInput";
+import { Common } from "./Common";
+
+const BaseInput = observer((props) => {
+  return (
+    <FilterInput
+      {...props}
+      type="text"
+      value={props.value}
+      onChange={props.onChange}
+      style={{ fontSize: 14 }}
+      placeholder={props.placeholder}
+    />
+  );
+});
+
+export const StringFilter = [
+  {
+    key: "contains",
+    label: "contains",
+    valueType: "single",
+    input: BaseInput,
+  },
+  {
+    key: "not_contains",
+    label: "not contains",
+    valueType: "single",
+    input: BaseInput,
+  },
+  {
+    key: "regex",
+    label: "regex",
+    valueType: "single",
+    input: BaseInput,
+  },
+  {
+    key: "equal",
+    label: "equal",
+    valueType: "single",
+    input: BaseInput,
+  },
+  {
+    key: "not_equal",
+    label: "not equal",
+    valueType: "single",
+    input: BaseInput,
+  },
+  ...Common,
+];
diff --git a/web/libs/editor/src/components/Filter/types/index.js b/web/libs/editor/src/components/Filter/types/index.js
new file mode 100644
index 000000000000..22306a9663e2
--- /dev/null
+++ b/web/libs/editor/src/components/Filter/types/index.js
@@ -0,0 +1,4 @@
+export { BooleanFilter as Boolean } from "./Boolean";
+export { Common } from "./Common";
+export { NumberFilter as Number } from "./Number";
+export { StringFilter as Image, StringFilter as String } from "./String";
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
index b6129699d764..38939ae5383a 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
@@ -13,7 +13,7 @@ import {
   useState,
 } from "react";
 import { IconPropertyAngle } from "@humansignal/icons";
-import { Checkbox, Select } from "@humansignal/ui";
+import { Checkbox } from "@humansignal/ui";
 import { Block, Elem, useBEM } from "../../../utils/bem";
 import { FF_DEV_2715, isFF } from "../../../utils/feature-flags";
 import { TimeDurationControl } from "../../TimeDurationControl/TimeDurationControl";
@@ -189,12 +189,17 @@ const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) =>
           onChange={(v) => onChangeHandler(Number(v))}
         />
       ) : options ? (
-        <Select
+        <select
           value={value}
-          onChange={(val) => onChangeHandler(val)}
+          onChange={(e) => onChangeHandler(e.target.value)}
           className={block?.elem("select").toClassName()}
-          options={options}
-        />
+        >
+          {options.map((value, i) => (
+            <option key={`${value}-${i}`} value={value}>
+              {value}
+            </option>
+          ))}
+        </select>
       ) : null}
       <PropertyLabel label={label} />
     </Elem>
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
index c3dbaaf418ec..2baf51341acc 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
@@ -13,7 +13,7 @@ import { Button } from "../../../common/Button/Button";
 import { Block, Elem } from "../../../utils/bem";
 import { wrapArray } from "../../../utils/utilities";
 import { RegionItem } from "./RegionItem";
-import { Select } from "@humansignal/ui";
+import { Select } from "antd";
 import "./Relations.scss";
 
 const RealtionsComponent: FC<any> = ({ relationStore }) => {
@@ -143,7 +143,7 @@ const RelationMeta: FC<any> = observer(({ relation }) => {
   const { children, choice } = control;
 
   const selectionMode = useMemo(() => {
-    return choice === "multiple";
+    return choice === "multiple" ? "multiple" : undefined;
   }, [choice]);
 
   const onChange = useCallback(
@@ -154,21 +154,22 @@ const RelationMeta: FC<any> = observer(({ relation }) => {
     },
     [relation],
   );
-  const options = useMemo(
-    () => children.map((c: any) => ({ value: c.value, style: { background: c.background } })),
-    [children],
-  );
 
   return (
     <Block name="relation-meta">
       <Select
-        multiple={selectionMode}
+        mode={selectionMode}
         style={{ width: "100%" }}
         placeholder="Select labels"
         value={selectedValues}
         onChange={onChange}
-        options={options}
-      />
+      >
+        {children.map((c: any) => (
+          <Select.Option key={c.value} value={c.value} style={{ background: c.background }}>
+            {c.value}
+          </Select.Option>
+        ))}
+      </Select>
     </Block>
   );
 });
diff --git a/web/libs/editor/src/components/Waveform/Waveform.jsx b/web/libs/editor/src/components/Waveform/Waveform.jsx
index e2ac3618f5ac..6f92db5bbefd 100644
--- a/web/libs/editor/src/components/Waveform/Waveform.jsx
+++ b/web/libs/editor/src/components/Waveform/Waveform.jsx
@@ -7,15 +7,14 @@ import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js
 import WaveSurfer from "wavesurfer.js";
 import styles from "./Waveform.module.scss";
 import globalStyles from "../../styles/global.module.scss";
-import { Col, Row, Slider } from "antd";
+import { Col, Row, Select, Slider } from "antd";
 import { SoundOutlined } from "@ant-design/icons";
 import defaultMessages from "../../utils/messages";
 import { Hotkey } from "../../core/Hotkey";
-import { Select, Tooltip } from "@humansignal/ui";
+import { Tooltip } from "@humansignal/ui";
 
 const MIN_ZOOM_Y = 1;
 const MAX_ZOOM_Y = 50;
-const SPEEDS = ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"].map((v) => ({ value: +v, label: `Speed ${v}` }));
 
 /**
  * Use formatTimeCallback to style the notch labels as you wish, such
@@ -481,6 +480,8 @@ export default class Waveform extends React.Component {
   };
 
   render() {
+    const speeds = ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"];
+
     return (
       <div>
         <div id="wave" ref={this.setWaveformRef} className={styles.wave} />
@@ -566,8 +567,13 @@ export default class Waveform extends React.Component {
                   style={{ width: "100%" }}
                   defaultValue={this.state.speed}
                   onChange={this.onChangeSpeed}
-                  options={SPEEDS}
-                />
+                >
+                  {speeds.map((speed) => (
+                    <Select.Option value={+speed} key={speed}>
+                      Speed {speed}
+                    </Select.Option>
+                  ))}
+                </Select>
               )}
             </Col>
           </Row>
diff --git a/web/libs/editor/src/tags/control/Choices.jsx b/web/libs/editor/src/tags/control/Choices.jsx
index 6530eaa1b915..1ab4208570dc 100644
--- a/web/libs/editor/src/tags/control/Choices.jsx
+++ b/web/libs/editor/src/tags/control/Choices.jsx
@@ -1,3 +1,4 @@
+import { Select } from "antd";
 import { observer } from "mobx-react";
 import { types } from "mobx-state-tree";
 
@@ -20,11 +21,12 @@ import DynamicChildrenMixin from "../../mixins/DynamicChildrenMixin";
 import { FF_LSDV_4583, isFF } from "../../utils/feature-flags";
 import { ReadOnlyControlMixin } from "../../mixins/ReadOnlyMixin";
 import SelectedChoiceMixin from "../../mixins/SelectedChoiceMixin";
+import { HintTooltip } from "../../components/Taxonomy/Taxonomy";
 import ClassificationBase from "./ClassificationBase";
 import PerItemMixin from "../../mixins/PerItem";
 import Infomodal from "../../components/Infomodal/Infomodal";
-import { useMemo } from "react";
-import { Select, Tooltip } from "@humansignal/ui";
+
+const { Option } = Select;
 
 /**
  * The `Choices` tag is used to create a group of choices, with radio buttons or checkboxes. It can be used for single or multi-class classification. Also, it is used for advanced classification tasks where annotators can choose one or multiple answers.
@@ -251,25 +253,11 @@ const ChoicesModel = types.compose(
 );
 
 const ChoicesSelectLayout = observer(({ item }) => {
-  const options = useMemo(
-    () =>
-      item.tiedChildren.map((i) => ({
-        value: i._value,
-        label: (
-          <Tooltip title={i.hint}>
-            <span data-testid="choiceOptionText" className="w-full">
-              {i._value}
-            </span>
-          </Tooltip>
-        ),
-      })),
-    [item.tiedChildren],
-  );
   return (
     <Select
       style={{ width: "100%" }}
       value={item.selectedLabels.map((l) => l._value)}
-      multiple={item.choice === "multiple"}
+      mode={item.choice === "multiple" ? "multiple" : ""}
       disabled={item.isReadOnly()}
       onChange={(val) => {
         if (Array.isArray(val)) {
@@ -284,8 +272,15 @@ const ChoicesSelectLayout = observer(({ item }) => {
           }
         }
       }}
-      options={options}
-    />
+    >
+      {item.tiedChildren.map((i) => (
+        <Option key={i._value} value={i._value}>
+          <HintTooltip title={i.hint} wrapper="div">
+            {i._value}
+          </HintTooltip>
+        </Option>
+      ))}
+    </Select>
   );
 });
 
diff --git a/web/libs/editor/src/tags/control/DateTime.jsx b/web/libs/editor/src/tags/control/DateTime.jsx
index 0bb17e550a3d..8c627ffc0f8f 100644
--- a/web/libs/editor/src/tags/control/DateTime.jsx
+++ b/web/libs/editor/src/tags/control/DateTime.jsx
@@ -15,7 +15,6 @@ import { ReadOnlyControlMixin } from "../../mixins/ReadOnlyMixin";
 import ClassificationBase from "./ClassificationBase";
 import PerItemMixin from "../../mixins/PerItem";
 import { FF_LSDV_4583, isFF } from "../../utils/feature-flags";
-import { Select } from "@humansignal/ui";
 
 const FORMAT_FULL = "%Y-%m-%dT%H:%M";
 const FORMAT_DATE = "%Y-%m-%d";
@@ -177,7 +176,7 @@ const Model = types
     const date = new Date();
     const getYear = (minmax) => {
       if (minmax === "current") return date.getFullYear();
-      if (minmax.length === 4) return Number.parseInt(minmax);
+      if (minmax.length === 4) return minmax;
       return self.parseDateTime(minmax)?.getFullYear();
     };
     const minYear = getYear(self.min ?? "2000");
@@ -254,13 +253,13 @@ const Model = types
       }
     },
 
-    onMonthChange(val) {
-      self.month = +val || undefined;
+    onMonthChange(e) {
+      self.month = +e.target.value || undefined;
       self.updateResult();
     },
 
-    onYearChange(val) {
-      self.year = +val || undefined;
+    onYearChange(e) {
+      self.year = +e.target.value || undefined;
       self.updateResult();
     },
 
@@ -339,6 +338,7 @@ const HtxDateTime = inject("store")(
     const visibleStyle = item.perRegionVisible() ? { margin: "0 0 1em" } : { display: "none" };
     const visual = {
       style: { width: "auto", marginRight: "4px", borderColor: item.isValid ? undefined : "red" },
+      className: "ant-input",
     };
     const [minTime, maxTime] = [item.min, item.max].map((s) => s?.match(/\d?\d:\d\d/)?.[0]);
     const [dateInputValue, setDateInputValue] = useState("");
@@ -367,28 +367,36 @@ const HtxDateTime = inject("store")(
     return (
       <div className="htx-datetime" style={visibleStyle} ref={item.elementRef}>
         {item.showMonth && (
-          <Select
+          <select
             {...visual}
             name={`${item.name}-date`}
             disabled={disabled}
             value={item.month}
-            placeholder="Month..."
-            onChange={(val) => (disabled ? undefined : item.onMonthChange(val))}
-            options={item.months.map((month, index) => ({ value: index + 1, label: month }))}
-            isInline={true}
-          />
+            onChange={disabled ? undefined : item.onMonthChange}
+          >
+            <option value="">Month...</option>
+            {item.months.map((month, index) => (
+              <option key={month} value={index + 1}>
+                {month}
+              </option>
+            ))}
+          </select>
         )}
         {item.showYear && (
-          <Select
+          <select
             {...visual}
             name={`${item.name}-year`}
             disabled={disabled}
             value={item.year || ""}
-            placeholder="Year..."
-            onChange={(val) => (disabled ? undefined : item.onYearChange(val))}
-            options={item.years}
-            isInline={true}
-          />
+            onChange={disabled ? undefined : item.onYearChange}
+          >
+            <option value="">Year...</option>
+            {item.years.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
         )}
         {item.showDate && (
           <input
diff --git a/web/libs/editor/src/tags/object/Paragraphs/AuthorFilter.jsx b/web/libs/editor/src/tags/object/Paragraphs/AuthorFilter.jsx
index f5c8b0886fdc..e23ca85b5548 100644
--- a/web/libs/editor/src/tags/object/Paragraphs/AuthorFilter.jsx
+++ b/web/libs/editor/src/tags/object/Paragraphs/AuthorFilter.jsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { useCallback, useMemo } from "react";
-import { Select } from "@humansignal/ui";
+import { Select } from "../../../common/Select/Select";
 import ColorScheme from "pleasejs";
 import Utils from "../../../utils";
 import styles from "./Paragraphs.module.scss";
@@ -8,10 +8,6 @@ import styles from "./Paragraphs.module.scss";
 const AuthorTag = ({ name, selected }) => {
   const itemStyle = { border: `2px solid ${Utils.Colors.convertToRGBA(ColorScheme.make_color({ seed: name })[0])}` };
 
-  if (name === "all") {
-    return <>Show all authors</>;
-  }
-
   return (
     <span
       className={[styles.authorFilter__select__item, selected && styles.authorFilter__select__item_selected].join(" ")}
@@ -36,26 +32,21 @@ const renderMultipleSelected = (selected) => {
 
 export const AuthorFilter = observer(({ item, onChange }) => {
   const placeholder = useMemo(() => <span className={styles.authorFilter__placeholder}>Show all authors</span>, []);
-  const initialValue = "all";
-  const options = useMemo(() => {
-    const authorOptions = item._value
-      .reduce((all, v) => (all.includes(v[item.namekey]) ? all : [...all, v[item.namekey]]), [])
-      .sort()
-      .map((name) => ({
-        value: name,
-        label: <AuthorTag name={name} />,
-      }));
-    return [{ value: initialValue, label: <AuthorTag name={initialValue} />, children: authorOptions }];
-  }, [item._value, item.namekey, initialValue]);
-
+  const value = item.filterByAuthor;
+  const options = useMemo(
+    () => item._value.reduce((all, v) => (all.includes(v[item.namekey]) ? all : [...all, v[item.namekey]]), []).sort(),
+    [item._value, item.namekey],
+  );
+  const filteredOptions = item.searchAuthor
+    ? options.filter((o) => o.toLowerCase().includes(item.searchAuthor.toLowerCase()))
+    : options;
   const onFilterChange = useCallback(
     (next) => {
-      const nextVal = next?.value ?? next;
       // ensure this is cleared if any action promoting an empty value change is made
-      if (!nextVal || nextVal?.includes("all")) {
+      if (!next || next?.includes(null)) {
         item.setAuthorFilter([]);
-      } else if (nextVal) {
-        item.setAuthorFilter(nextVal);
+      } else {
+        item.setAuthorFilter(next);
       }
 
       onChange?.();
@@ -67,12 +58,33 @@ export const AuthorFilter = observer(({ item, onChange }) => {
     <div className={styles.authorFilter}>
       <Select
         placeholder={placeholder}
+        value={value}
         options={options}
         onChange={onFilterChange}
+        renderMultipleSelected={renderMultipleSelected}
         size="compact"
-        multiple={true}
-        searchable={true}
-      />
+        variant="rounded"
+        surface="emphasis"
+        multiple
+      >
+        <div className={styles.authorFilter__search}>
+          <input
+            autoComplete="off"
+            className={styles.authorFilter__search__input}
+            name="search_author"
+            placeholder="Search"
+            onInput={(e) => item.setAuthorSearch(e.target.value)}
+          />
+        </div>
+        <Select.Option value={null} key="showAllAuthors" exclude>
+          <span className={styles.authorFilter__showall}>Show all authors</span>
+        </Select.Option>
+        {filteredOptions.map((name) => (
+          <Select.Option value={name} key={name}>
+            <AuthorTag name={name} selected={false} />
+          </Select.Option>
+        ))}
+      </Select>
     </div>
   );
 });
diff --git a/web/libs/editor/src/utils/__tests__/date.test.js b/web/libs/editor/src/utils/__tests__/date.test.js
index 5f981467aec4..233b2429cc33 100644
--- a/web/libs/editor/src/utils/__tests__/date.test.js
+++ b/web/libs/editor/src/utils/__tests__/date.test.js
@@ -9,32 +9,28 @@ describe("Helper function prettyDate", () => {
   });
 
   test("Yesterday", () => {
-    const today = new Date();
-    const testing = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
+    const testing = new Date();
     const resultDate = new Date(testing.setDate(testing.getDate() - 1));
 
     expect(prettyDate(resultDate.toISOString())).toBe("Yesterday");
   });
 
   test("2 days ago", () => {
-    const today = new Date();
-    const testing = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
+    const testing = new Date();
     const resultDate = new Date(testing.setDate(testing.getDate() - 2));
 
     expect(prettyDate(resultDate.toISOString())).toBe("2 days ago");
   });
 
   test("2 weeks ago", () => {
-    const today = new Date();
-    const testing = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
+    const testing = new Date();
     const resultDate = new Date(testing.setDate(testing.getDate() - 14));
 
     expect(prettyDate(resultDate.toISOString())).toBe("2 weeks ago");
   });
 
   test("100 days ago", () => {
-    const today = new Date();
-    const testing = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
+    const testing = new Date();
     const resultDate = new Date(testing.setDate(testing.getDate() - 100));
 
     expect(prettyDate(resultDate.toISOString())).toBe("100 days ago");
diff --git a/web/libs/editor/tests/e2e/fragments/AtParagraphs.js b/web/libs/editor/tests/e2e/fragments/AtParagraphs.js
index 85f3be3e8eea..9a89ba2e6cab 100644
--- a/web/libs/editor/tests/e2e/fragments/AtParagraphs.js
+++ b/web/libs/editor/tests/e2e/fragments/AtParagraphs.js
@@ -3,7 +3,7 @@ const Helpers = require("../tests/helpers");
 
 module.exports = {
   _rootSelector: ".lsf-paragraphs",
-  _filterSelector: "button[data-testid*='select-trigger']",
+  _filterSelector: ".lsf-select__value",
   _phraseSelector: "[class^='phrase--']",
   _phraseDialoguetextSelector: "[class^='dialoguetext--']",
 
@@ -36,30 +36,11 @@ module.exports = {
   },
 
   clickFilter(...authors) {
-    // Open dropdown and wait for it to appear
-    I.click(locate(this._filterSelector));
-    I.wait(0.5);
-    // For the new select component, we need to select each author
-    // and the dropdown is managed automatically
+    I.click(this.locate(this._filterSelector));
     for (const author of authors) {
-      // We may or may not have a search field depending on number of options
-      const hasSearchField = I.executeScript(() => {
-        return !!document.querySelector("input[data-testid='select-search-field']");
-      });
-
-      if (hasSearchField) {
-        // Try to search if field is available
-        I.fillField(locate("input[data-testid='select-search-field']"), author);
-        I.wait(0.5);
-      }
-
-      // Select the author option
-      I.click(locate(`div[data-testid='select-option-${author}']`));
-      I.wait(0.5);
+      I.fillField("search_author", author);
+      I.click(locate(".lsf-select__option").withText(author));
     }
-
-    // Close any open dropdown
-    I.pressKey("Escape");
-    I.wait(1); // Wait for UI to update after filter change
+    I.click(this.locate(this._filterSelector));
   },
 };
diff --git a/web/libs/editor/tests/e2e/tests/date-time.test.js b/web/libs/editor/tests/e2e/tests/date-time.test.js
index 8f678c16b429..fe7b88b63377 100644
--- a/web/libs/editor/tests/e2e/tests/date-time.test.js
+++ b/web/libs/editor/tests/e2e/tests/date-time.test.js
@@ -5,11 +5,6 @@ const { serialize, selectText } = require("./helpers");
 Feature("Date Time");
 
 const config = `<View>
-<style>
-[data-radix-popper-content-wrapper] {
-  z-index: 9999 !important;
-}
-</style>
 <Header>Select text to see related smaller DateTime controls for every region</Header>
 <Labels name="label" toName="text">
   <Label value="birth" background="green"/>
@@ -140,13 +135,13 @@ Scenario(
 
     AtOutliner.clickRegion(regions[0].text);
     // less than min
-    I.click(locate("[data-testid*=select-trigger][data-name=year-year]"));
-    I.dontSee("1999");
-    // less than max
-    I.dontSee("2023");
-    I.see("2022");
+    I.selectOption("select[name=year-year]", "1999");
+    assert.strictEqual("", await I.grabValueFrom("select[name=year-year]"));
+    // more than max
+    I.selectOption("select[name=year-year]", "2023");
+    assert.strictEqual("", await I.grabValueFrom("select[name=year-year]"));
     // exactly the same as max, should be correct
-    I.click("div[data-testid='select-option-2022']");
+    I.selectOption("select[name=year-year]", "2022");
     assert.strictEqual("2022", await I.grabValueFrom("select[name=year-year]"));
     I.pressKey("Escape");
 
diff --git a/web/libs/editor/tests/e2e/tests/paragraphs-filter.test.js b/web/libs/editor/tests/e2e/tests/paragraphs-filter.test.js
index 8c15e923dc08..c7a6143087a0 100644
--- a/web/libs/editor/tests/e2e/tests/paragraphs-filter.test.js
+++ b/web/libs/editor/tests/e2e/tests/paragraphs-filter.test.js
@@ -60,11 +60,6 @@ const DATA = {
 
 const CONFIG = `
 <View>
-  <style>
-    [data-radix-popper-content-wrapper] {
-      z-index: 9999 !important;
-    }
-  </style>
   <ParagraphLabels name="ner" toName="text">
     <Label value="Important Stuff"></Label>
     <Label value="Random talk"></Label>
@@ -534,7 +529,7 @@ Scenario(
     AtOutliner.seeRegions(0);
 
     I.say("Select 2 regions in the consecutive phrases of the one person");
-    AtParagraphs.clickFilter("Vincent Vega:");
+    AtParagraphs.clickFilter("Vincent Vega");
     AtLabels.clickLabel("Random talk");
     AtParagraphs.setSelection(
       AtParagraphs.locateText("Hate what?2"),
diff --git a/web/libs/editor/tests/integration/e2e/control_tags/choice.cy.ts b/web/libs/editor/tests/integration/e2e/control_tags/choice.cy.ts
index 345070a48875..7c5877b6c9cf 100644
--- a/web/libs/editor/tests/integration/e2e/control_tags/choice.cy.ts
+++ b/web/libs/editor/tests/integration/e2e/control_tags/choice.cy.ts
@@ -31,7 +31,7 @@ describe("Control Tags - Choice", () => {
       LabelStudio.params().config(choicesSelectLayoutConfig).data(simpleData).withResult([]).init();
 
       Choices.toggleSelect();
-      Choices.findOption("Choice 2").trigger("mouseover", { force: true });
+      Choices.findOption("Choice 2").trigger("mouseover");
       Tooltip.hasText("A hint for Choice 2");
     });
   });
diff --git a/web/libs/editor/tests/integration/e2e/control_tags/classification/taxonomy-mig-per-item.cy.ts b/web/libs/editor/tests/integration/e2e/control_tags/classification/taxonomy-mig-per-item.cy.ts
index a4243400409b..73acea7c024d 100644
--- a/web/libs/editor/tests/integration/e2e/control_tags/classification/taxonomy-mig-per-item.cy.ts
+++ b/web/libs/editor/tests/integration/e2e/control_tags/classification/taxonomy-mig-per-item.cy.ts
@@ -55,7 +55,6 @@ describe("Control Tags - MIG perItem - Taxonomy", () => {
     ImageView.waitForImage();
 
     Taxonomy.open();
-    ImageView.waitForImage();
     Taxonomy.findItem("Choice 1").click();
 
     LabelStudio.serialize().then((result) => {
diff --git a/web/libs/frontend-test/src/helpers/LSF/Choices.ts b/web/libs/frontend-test/src/helpers/LSF/Choices.ts
index f22e15f32525..ab7a12757fa1 100644
--- a/web/libs/frontend-test/src/helpers/LSF/Choices.ts
+++ b/web/libs/frontend-test/src/helpers/LSF/Choices.ts
@@ -20,7 +20,7 @@ class ChoicesHelper {
   }
 
   get select() {
-    return this.root.find("[data-testid*=select-trigger]");
+    return this.root.find(".ant-select");
   }
 
   findChoice(text: string) {
@@ -40,8 +40,7 @@ class ChoicesHelper {
   }
 
   findOption(text: string) {
-    const option = cy.get(`[data-testid*='select-option'][data-value="${text}"] [data-testid=choiceOptionText]`);
-    return option;
+    return cy.get(".ant-select-dropdown").find(".ant-select-item-option").contains(text);
   }
 }
 
diff --git a/web/libs/storybook/select/select.stories.tsx b/web/libs/storybook/select/select.stories.tsx
index 941974cfb4b3..a581f1d51141 100644
--- a/web/libs/storybook/select/select.stories.tsx
+++ b/web/libs/storybook/select/select.stories.tsx
@@ -1,149 +1,34 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Select } from "@humansignal/ui";
-import { useMemo } from "react";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectGroup,
+} from "../../ui/src/shad/components/ui/select.tsx";
 
 const meta: Meta<typeof Select> = {
   title: "UI/Select",
   component: Select,
   render: ({ form, ...args }) => {
-    const thousandOptions = useMemo(() => {
-      return Array.from({ length: 1000 }, (_, i) => `Option ${i}`);
-    }, []);
     return (
-      <>
-        <div>
-          <Select
-            placeholder="Select a fruit"
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            label="default"
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            placeholder="searchable select"
-            searchable={true}
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            placeholder="inline select"
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            isInline={true}
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            placeholder="Select a fruit"
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            label="required"
-            required={true}
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            placeholder="Select a fruit"
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            label="disabled select"
-            disabled={true}
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            placeholder="Select a fruit"
-            value="Blueberry"
-            searchable={true}
-            options={[
-              {
-                value: "Apple",
-                disabled: true,
-              },
-              {
-                value: "Banana",
-                label: (
-                  <>
-                    <span>Banana</span>
-                    <span className="text-sm"> - 10</span>
-                    <span className="text-lg"> other element</span>
-                  </>
-                ),
-              },
-              {
-                value: "Blueberry",
-                label: (
-                  <>
-                    <span>Blueberry</span>
-                    <span className="text-sm"> - 15</span>
-                  </>
-                ),
-                disabled: true,
-              },
-              "Grapes",
-              "Pineapple",
-            ]}
-            label="Fancy option"
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            placeholder="custom testid"
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            data-testid="my-select"
-            {...args}
-          />
-        </div>
-        <div>
-          <Select options={thousandOptions} label="Thousand options" {...args} />
-        </div>
-        <div>
-          <Select
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            label="In progress"
-            isLoading={true}
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            placeholder="Multiple Selector"
-            options={[
-              "Apple",
-              "Banana",
-              "Blueberry",
-              { label: "Grapes", children: ["Small", "Large", "Green", "Red"] },
-              "Pineapple",
-            ]}
-            multiple={true}
-            searchable={true}
-            {...args}
-          />
-        </div>
-        <div>
-          <Select
-            value={["Blueberry", "Banana"]}
-            options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-            multiple={true}
-            {...args}
-          />
-        </div>
-
-        <div>
-          <Select
-            options={[
-              { label: "Yes", value: true },
-              { label: "No", value: false },
-            ]}
-            label="Boolean values"
-            {...args}
-          />
-        </div>
-      </>
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="grapes">Grapes</SelectItem>
+            <SelectItem value="pineapple">Pineapple</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
     );
   },
 };
@@ -152,5 +37,7 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 
 export const Primary: Story = {
-  args: {},
+  args: {
+    value: "Apple",
+  },
 };
diff --git a/web/libs/ui/package.json b/web/libs/ui/package.json
index b6869fccf570..84568aa1eae4 100644
--- a/web/libs/ui/package.json
+++ b/web/libs/ui/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
+  "dependencies": {},
   "main": "src/index.ts",
   "files": ["src/tailwind.css", "src/shad/components", "src/ui/assets", "src/ui/typography"]
 }
diff --git a/web/libs/ui/src/assets/icons/search.svg b/web/libs/ui/src/assets/icons/search.svg
index 84b0c11aff50..31cd0b8d53d8 100644
--- a/web/libs/ui/src/assets/icons/search.svg
+++ b/web/libs/ui/src/assets/icons/search.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.7549 14.255H14.9649L14.6849 13.985C15.6649 12.845 16.2549 11.365 16.2549 9.755C16.2549 6.165 13.3449 3.255 9.75488 3.255C6.16488 3.255 3.25488 6.165 3.25488 9.755C3.25488 13.345 6.16488 16.255 9.75488 16.255C11.3649 16.255 12.8449 15.665 13.9849 14.685L14.2549 14.965V15.755L19.2549 20.745L20.7449 19.255L15.7549 14.255ZM9.75488 14.255C7.26488 14.255 5.25488 12.245 5.25488 9.755C5.25488 7.26501 7.26488 5.255 9.75488 5.255C12.2449 5.255 14.2549 7.26501 14.2549 9.755C14.2549 12.245 12.2449 14.255 9.75488 14.255Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z" fill="currentColor"/>
+</svg>
diff --git a/web/libs/ui/src/index.ts b/web/libs/ui/src/index.ts
index 98a03ceb2fd8..1143344ad137 100644
--- a/web/libs/ui/src/index.ts
+++ b/web/libs/ui/src/index.ts
@@ -7,7 +7,6 @@ export * from "./lib/InputFile/InputFile";
 export * from "./lib/label/label";
 export * from "./lib/toast/toast";
 export * from "./lib/toggle/toggle";
-export * from "./lib/select/select";
 export * from "./lib/Tooltip/Tooltip";
 export * from "./lib/Userpic/Userpic";
 
diff --git a/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss b/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss
index 2b09041f500e..e47c62382117 100644
--- a/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss
+++ b/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss
@@ -10,7 +10,7 @@
   left: -1000px;
   color: var(--sand_0);
   display: none;
-  z-index: 99999;
+  z-index: 10000;
   padding: 4px 10px;
   font-size: 14px;
   line-height: 24px;
diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss
index b27bc0b4f6e2..63c8ed20f316 100644
--- a/web/libs/ui/src/lib/label/label.module.scss
+++ b/web/libs/ui/src/lib/label/label.module.scss
@@ -2,6 +2,7 @@
   margin-bottom: 0;
 
   &__text {
+    padding: 0 16px;
     height: 22px;
     display: flex;
     margin-bottom: 4px;
@@ -23,7 +24,7 @@
   }
 
   &_size_small &__text {
-    font-size: 14px;
+    font-size: 10px;
     margin: 0;
     height: 14px;
     line-height: 14px;
@@ -56,12 +57,10 @@
   &_placement_right {
     display: inline-flex;
     flex-direction: row-reverse;
-    gap: var(--spacing-small-x, 4px);
   }
 
   &_placement_left {
     display: inline-flex;
-    gap: var(--spacing-small-x, 4px);
   }
 
   &_empty &__text,
diff --git a/web/libs/ui/src/lib/select/select.module.scss b/web/libs/ui/src/lib/select/select.module.scss
deleted file mode 100644
index 854910bb0f3f..000000000000
--- a/web/libs/ui/src/lib/select/select.module.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.selectTrigger {
-  --select-trigger-height: 40px;
-  --select-trigger-font-size: 1rem;
-
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-base);
-  gap: var(--spacing-small);
-  flex: 1 0 0;
-  overflow: hidden;
-  color: var(--color-neutral-content-subtler);
-  text-overflow: ellipsis;
-  height: var(--select-trigger-height);
-  width: 100%;
-
-  /* body/medium */
-  font-size: var(--select-trigger-font-size);
-  font-style: normal;
-  font-weight: var(--font-weight-400);
-  line-height: var(--line-height-24); /* 150% */
-  letter-spacing: var(--letter-spacing-base);
-  border-radius: var(--corner-radius-smaller);
-  border: 1px solid var(--color-neutral-border);
-  max-width: 100%;
-
-  &:hover:not(.isDisabled) {
-    border: 1px solid var(--color-neutral-border-bold);
-  }
-
-  &:focus {
-    background: var(--color-neutral-surface-hover);
-    box-shadow: 0 1px 2px 1px rgb(0 0 0 / 6%) inset;
-    color: var(--color-neutral-content);
-    outline: none;
-  }
-
-  &.isOpen {
-    border: 1px solid var(--color-neutral-border-bold);
-    background: var(--color-neutral-surface-active);
-    box-shadow: 0 1px 2px 1px rgb(0 0 0 / 6%) inset;
-    color: var(--color-neutral-content);
-  }
-
-  &.isDisabled {
-    color: var(--color-neutral-content-subtlest);
-    background: var(--color-neutral-surface);
-    box-shadow: 0 1px 2px 1px rgb(0 0 0 / 6%) inset;
-    filter: none;
-    cursor: not-allowed;
-  }
-
-  &.sizeSmall {
-    --select-trigger-height: 24px;
-    --select-trigger-font-size: var(--font-size-12);
-  }
-
-  &.sizeLarge {
-    --select-trigger-height: 60px;
-    --select-trigger-font-size: var(--font-size-20);
-  }
-
-  &.isInline {
-    display: inline-flex;
-    width: auto;
-  }
-}
-
-.selectLoading {
-  &:focus {
-    outline: none;
-    padding: var(--spacing-small);
-
-  }
-}
-
-.valueInput {
-  display: none !important;
-}
-
-[data-radix-popper-content-wrapper] {
-  min-width: var(--radix-popper-anchor-width) !important;
-  max-width: var(--radix-popper-available-width);
-}
\ No newline at end of file
diff --git a/web/libs/ui/src/lib/select/select.tsx b/web/libs/ui/src/lib/select/select.tsx
deleted file mode 100644
index e41d1aab3b39..000000000000
--- a/web/libs/ui/src/lib/select/select.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import React, { type ForwardedRef, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@humansignal/shad/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@humansignal/shad/components/ui/popover";
-import type { SelectOption, OptionProps, SelectProps } from "./types.ts";
-import { Checkbox, Label } from "@humansignal/ui";
-import { isDefined } from "@humansignal/core/lib/utils/helpers";
-import { IconChevron, IconChevronDown } from "@humansignal/icons";
-import clsx from "clsx";
-import styles from "./select.module.scss";
-
-export const Select = forwardRef(
-  <T, A extends SelectOption<T>[]>(
-    {
-      label,
-      description,
-      options = [],
-      validate,
-      required,
-      skip,
-      labelProps,
-      defaultValue,
-      searchable,
-      searchPlaceholder,
-      value: externalValue,
-      disabled = false,
-      multiple = false,
-      isInline = false,
-      isLoading = false,
-      triggerProps,
-      className,
-      size,
-      searchFilter,
-      onSearch,
-      selectedValueRenderer,
-      ...props
-    }: SelectProps<T, A>,
-    _ref: ForwardedRef<HTMLSelectElement>,
-  ) => {
-    const ref = _ref ?? useRef<HTMLSelectElement>();
-    const triggerRef = useRef<HTMLDivElement>();
-    const [query, setQuery] = useState<string>("");
-    const valueRef = useRef<any>();
-    let initialValue = defaultValue?.value ?? defaultValue ?? externalValue?.value ?? externalValue;
-
-    if (multiple) {
-      initialValue = initialValue ? (Array.isArray(initialValue) ? (initialValue ?? []) : [initialValue]) : [];
-    } else if (Array.isArray(initialValue)) {
-      initialValue = initialValue[0];
-    }
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [value, setValue] = useState<any>(initialValue);
-
-    valueRef.current = value;
-    useEffect(() => {
-      if (!isDefined(externalValue)) return;
-      let val = externalValue?.value ?? externalValue;
-      if (multiple && !Array.isArray(val)) {
-        val = [val];
-      } else if (!multiple && Array.isArray(val)) {
-        val = val[0];
-      }
-      setValue(val);
-    }, [externalValue, multiple]);
-
-    useEffect(() => {
-      if (!isOpen) setQuery("");
-    }, [isOpen]);
-    const _onChange = useCallback(
-      (val: string, isSelected: boolean) => {
-        if (disabled) return;
-
-        if (multiple) {
-          valueRef.current = isSelected
-            ? [...(valueRef.current ?? []).filter((v) => v !== val)]
-            : [...(valueRef.current ?? []), val];
-          setValue(valueRef.current);
-        } else {
-          valueRef.current = val;
-          setValue(val);
-        }
-        !multiple && setIsOpen(false);
-        props?.onChange?.(valueRef.current);
-        setTimeout(() => {
-          const changeEvent = new Event("change", {
-            bubbles: true,
-            target: { ...ref?.current, value: valueRef.current },
-            currentTarget: { ...ref?.current, value: valueRef.current },
-          });
-          ref?.current?.dispatchEvent?.(changeEvent);
-        }, 0);
-      },
-      [props?.onChange, multiple, disabled],
-    );
-
-    const flatOptions = useMemo(() => {
-      return options.flatMap((option) => option?.children ?? option);
-    }, [options]);
-
-    const _options = useMemo(() => {
-      if (!searchable || !query.trim()) return options;
-
-      const filterHandler = (option: any, queryString: string) => {
-        const value = option?.value ?? option;
-        const label = option?.label ?? option?.value ?? option;
-        return (
-          label?.toString()?.toLowerCase().includes(queryString.toLowerCase()) ||
-          value?.toString()?.toLowerCase().includes(queryString.toLowerCase())
-        );
-      };
-      return flatOptions.filter((option) => (searchFilter ?? filterHandler)(option, query));
-    }, [options, flatOptions, searchable, query, searchFilter]);
-
-    const isSelected = useCallback(
-      (val: any) => {
-        if (multiple) {
-          return value.includes(val?.value ?? val);
-        }
-        return (value?.value ?? value) === (val?.value ?? val);
-      },
-      [value, multiple],
-    );
-
-    const selectedOptions = useMemo(() => {
-      return flatOptions.filter((option) => isSelected(option));
-    }, [flatOptions, isSelected, value, multiple]);
-
-    const onSearchInputHandler = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        const val = e.target.value;
-        setQuery(val);
-        onSearch?.(val);
-      },
-      [setQuery, onSearch],
-    );
-
-    const combobox = (
-      <Popover open={isOpen} onOpenChange={setIsOpen}>
-        <PopoverTrigger asChild={true} disabled={disabled}>
-          <button
-            variant="outline"
-            aria-expanded={isOpen}
-            className={clsx(className ?? "", styles.selectTrigger, {
-              [styles.isInline]: isInline,
-              [styles.isOpen]: isOpen,
-              [styles.isDisabled]: disabled,
-              [styles.sizeSmall]: size === "small",
-              [styles.sizeMedium]: size === "medium",
-              [styles.sizeLarge]: size === "large",
-            })}
-            type="button"
-            data-testid={
-              props?.dataTestid ??
-              `select-trigger${props?.name ? `-${props?.name?.replace?.(/\s/g, "-")}` : ""}${value ? `-${value}` : ""}`
-            }
-            ref={triggerRef}
-            data-name={props?.name}
-            data-value={value ?? ""}
-            {...triggerProps}
-          >
-            <span
-              className="flex flex-1 text-left gap-2 max-w-full w-[calc(100%-1rem-0.5rem)]"
-              data-testid="select-display-value"
-            >
-              {selectedOptions?.length ? (
-                <>
-                  {selectedOptions?.map((option, index) => {
-                    if (selectedValueRenderer) {
-                      return (
-                        <React.Fragment key={`${option?.value}_${index}`}>
-                          {selectedValueRenderer(option)}
-                        </React.Fragment>
-                      );
-                    }
-                    const optionValue = option?.value ?? option;
-                    return (
-                      <span key={`${optionValue}_${index}`} className="truncate only:w-full">
-                        {option?.label ?? optionValue}
-                      </span>
-                    );
-                  })}
-                </>
-              ) : (
-                <span className="truncate w-full">{props?.placeholder ?? ""}</span>
-              )}
-            </span>
-            {isOpen ? (
-              <IconChevron className="h-4 w-4 shrink-0 opacity-50 pointer-events-none" />
-            ) : (
-              <IconChevronDown className="h-4 w-4 shrink-0 opacity-50 pointer-events-none" />
-            )}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent align="start" data-testid="select-popup">
-          {isLoading ? (
-            <span className={styles.selectLoading} tabIndex={-1}>
-              Loading...
-            </span>
-          ) : (
-            <Command shouldFilter={false}>
-              {searchable && (
-                <CommandInput
-                  placeholder={searchPlaceholder ?? "Search"}
-                  onChangeCapture={onSearchInputHandler}
-                  data-testid="select-search-field"
-                />
-              )}
-              <CommandList
-                label="Select an option"
-                className={
-                  searchable ? "shadow-inner shadow-neutral-surface-inset border-t border-neutral-border shadow-" : ""
-                }
-              >
-                <CommandEmpty>{searchable ? "No results found." : ""}</CommandEmpty>
-                <CommandGroup>
-                  {props.header ? props.header : null}
-                  {_options.map((option, index) => {
-                    const optionValue = option?.value ?? option;
-                    const label = option?.label ?? optionValue;
-                    const children = option?.children;
-                    const isIndeterminate = multiple && children?.some((child) => isSelected(child));
-                    const isOptionSelected =
-                      multiple && children ? children?.every((child) => isSelected(child)) : isSelected(optionValue);
-
-                    if (children) {
-                      return (
-                        <CommandGroup key={index}>
-                          {multiple ? (
-                            <Option
-                              multiple={multiple}
-                              label={label}
-                              isIndeterminate={!isOptionSelected && isIndeterminate}
-                              isOptionSelected={isOptionSelected}
-                              onSelect={() => {
-                                children.forEach((child: SelectOption<T>) => {
-                                  const childVal = child?.value ?? child;
-                                  isOptionSelected ? _onChange(childVal, true) : _onChange(childVal, false);
-                                });
-                              }}
-                            />
-                          ) : (
-                            <div className="pl-3 font-bold text-neutral-content-subtler pt-2">{label}</div>
-                          )}
-                          <div className="pl-2">
-                            {children.map((item, i) => {
-                              const val = item?.value ?? item;
-                              const lab = item?.label ?? val;
-                              const isChildOptionSelected = isSelected(val);
-                              return (
-                                <Option
-                                  key={`${val}_${i}`}
-                                  value={val}
-                                  label={lab}
-                                  isOptionSelected={isChildOptionSelected}
-                                  disabled={item?.disabled}
-                                  style={item?.style}
-                                  multiple={multiple}
-                                  onSelect={() => {
-                                    _onChange(val, isChildOptionSelected);
-                                  }}
-                                />
-                              );
-                            })}
-                          </div>
-                        </CommandGroup>
-                      );
-                    }
-                    return (
-                      <Option
-                        key={`${optionValue}_${index}`}
-                        value={optionValue}
-                        label={label}
-                        isOptionSelected={isOptionSelected}
-                        disabled={option?.disabled}
-                        style={option?.style}
-                        multiple={multiple}
-                        onSelect={() => {
-                          _onChange(optionValue, isOptionSelected);
-                        }}
-                      />
-                    );
-                  })}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          )}
-        </PopoverContent>
-        <select
-          name={props?.name}
-          value={selectedOptions.join(",") ?? ""}
-          ref={ref}
-          disabled={disabled}
-          className={styles.valueInput}
-        >
-          {selectedOptions?.map((option, index) => (
-            <option key={`${option?.value}_${index}`} value={option?.value ?? option} selected />
-          ))}
-        </select>
-      </Popover>
-    );
-
-    if (label) {
-      return (
-        <Label required={required} description={description} text={label} {...labelProps}>
-          {combobox}
-        </Label>
-      );
-    }
-    return combobox;
-  },
-);
-
-const Option = ({
-  value,
-  label,
-  isOptionSelected,
-  isIndeterminate,
-  disabled,
-  style,
-  onSelect,
-  multiple,
-  className,
-}: OptionProps) => {
-  const keyDownHandler = useCallback(
-    (e: any) => {
-      if (["Enter", " "].includes(e.key)) {
-        e.preventDefault();
-        e.stopPropagation();
-        onSelect?.(value);
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        e.stopPropagation();
-        const nextElement = e.currentTarget.nextElementSibling;
-        if (nextElement) {
-          nextElement.focus();
-        }
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        e.stopPropagation();
-        const prevElement = e.currentTarget.previousElementSibling;
-        if (prevElement) {
-          prevElement.focus();
-        }
-      }
-    },
-    [onSelect, value],
-  );
-  return (
-    <CommandItem
-      value={value}
-      onSelect={onSelect}
-      disabled={disabled}
-      {...(style ? { style } : {})}
-      data-value={value}
-      data-selected={isOptionSelected}
-      data-testid={`select-option-${value}`}
-      tabIndex={disabled ? -1 : 0}
-      onKeyDown={keyDownHandler}
-      className={clsx(
-        className,
-        [
-          "rounded-4",
-          "text-neutral-content-subtle",
-          "[&_[cmdk-group-heading]]:text-muted-foreground",
-          "overflow-hidden",
-          "p-1",
-          "[&_[cmdk-group-heading]]:text-xs",
-          "[&_[cmdk-group-heading]]:font-medium",
-          "outline-none",
-          "group",
-          "duration-150 ease-out",
-        ],
-        [
-          "data-[disabled=true]:opacity-50",
-          "data-[disabled=true]:cursor-not-allowed",
-          "data-[disabled=true]:bg-transparent",
-        ],
-      )}
-    >
-      <div
-        className={clsx(
-          [
-            "flex",
-            "gap-2",
-            "w-full",
-            multiple ? "pl-2 pr-4" : "px-4",
-            "py-1",
-            "hover:bg-primary-emphasis-subtle",
-            "hover:cursor-pointer",
-            "group-focus-within:bg-primary-emphasis-subtle",
-            "rounded-4",
-            "hover:data-[disabled=true]:bg-transparent",
-            "hover:data-[disabled=true]:cursor-not-allowed",
-            "duration-150 ease-out",
-          ],
-          isOptionSelected && ["bg-primary-emphasis"],
-        )}
-        data-disabled={disabled}
-      >
-        {multiple && <Checkbox tabIndex={-1} checked={isOptionSelected} indeterminate={isIndeterminate} readOnly />}
-        <div data-testid="select-option-label" className="w-full truncate">
-          {label}
-        </div>
-      </div>
-    </CommandItem>
-  );
-};
-
-Select.displayName = "Select";
diff --git a/web/libs/ui/src/lib/select/types.ts b/web/libs/ui/src/lib/select/types.ts
deleted file mode 100644
index d5a6ffd59322..000000000000
--- a/web/libs/ui/src/lib/select/types.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { FC, ReactNode } from "react";
-
-export type SelectOptionData<T = any> = {
-  value: T;
-  label?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  children?: SelectOptionData<T>[];
-};
-
-export type SelectOption<T> = string | number | SelectOptionData<T>;
-
-export type OptionProps = {
-  value: any;
-  label?: string;
-  isOptionSelected?: boolean;
-  disabled?: boolean;
-  style?: any;
-  multiple?: boolean;
-  onSelect?: () => void;
-  isIndeterminate?: boolean;
-  className?: string;
-};
-
-type ExtractStructOption<T> = T extends SelectOptionData ? T["value"] : never;
-type ExtractPrimitiveOption<T> = T extends string | number ? T : never;
-export type ExtractOption<T> = T extends SelectOption<any>
-  ? T extends SelectOptionData<any>
-    ? ExtractStructOption<T>
-    : ExtractPrimitiveOption<T>
-  : never;
-
-export type ExtractValue<T, A extends SelectOption<T>[]> = A[number] extends { value: infer U } ? U : A[number];
-
-export type SelectProps<T, A extends SelectOption<T>[]> = {
-  label?: string;
-  description?: string;
-  options: A[];
-  value?: ExtractOption<A[number]> | null;
-  defaultValue?: ExtractOption<A[number]> | null;
-  validate?: any;
-  required?: boolean;
-  skip?: boolean;
-  labelProps?: any;
-  placeholder?: ReactNode;
-  className?: string;
-  ghost?: boolean;
-  width?: string;
-  icon?: any;
-  fieldProps?: any;
-  error?: boolean;
-  autoSelectFirst?: boolean;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  ref?: React.Ref<HTMLSelectElement>;
-  selectedValueRenderer?: FC<{ option: A[number]; index: number }>;
-  optionRenderer?: FC<{ option: A[number]; index: number }>;
-  dropdown?: any;
-  testId?: string;
-  searchFilter?: (option: any, queryString: string) => boolean;
-  onChange?: (value: any) => void | false;
-  setValue?: (value: ExtractOption<A>) => void;
-  header?: string | FC | JSX.Element;
-  multiple?: boolean;
-  disabled?: boolean;
-  triggerProps?: any;
-  isInline?: boolean;
-  isInProgress?: boolean;
-  dataTestid?: string;
-  size?: "small" | "medium" | "large";
-  onSearch?: (value: string) => void;
-} & SelectVirtualizedProps &
-  Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "value" | "placeholder">;
-
-type ToNever<T> = {
-  [key in keyof T]?: never;
-};
-
-type VirtualizedProps = {
-  overscan?: number;
-  estimateSize?: number;
-  virtualizedTotal?: number;
-  rootMargin?: string;
-  onBottomReached?: () => void;
-  onTopReached?: () => void;
-};
-
-type SelectVirtualizedProps =
-  | ({
-      virtualized?: false;
-    } & ToNever<VirtualizedProps>)
-  | ({
-      virtualized: true;
-    } & VirtualizedProps);
diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index a05f7673bcd8..c3d1b5a90cb3 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -69,14 +69,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
     );
 
     return label ? (
-      <Label
-        placement="right"
-        required={required}
-        text={label}
-        description={description}
-        className="gap-2"
-        {...(labelProps ?? {})}
-      >
+      <Label placement="right" required={required} text={label} description={description} {...(labelProps ?? {})}>
         {formField}
       </Label>
     ) : (
diff --git a/web/libs/ui/src/shad/components/ui/command.tsx b/web/libs/ui/src/shad/components/ui/command.tsx
deleted file mode 100644
index 89a83cea6c54..000000000000
--- a/web/libs/ui/src/shad/components/ui/command.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { IconSearch } from "@humansignal/icons";
-
-import { cn } from "@humansignal/shad/utils";
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-neutral-background border-neutral-border border text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  const ref = React.useRef<HTMLInputElement>(null);
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex items-center gap-2 h-8 px-2 m-1 focus-within:border-neutral-border-bold border outline-none border-neutral-border rounded-smaller hover:border-neutral-border-bold shadow-inner box-border"
-      ref={ref}
-    >
-      <IconSearch className="text-neutral-content-subtlest w-6 h-6 flex-none" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-neutral-content-subtler flex h-8 w-full rounded-md bg-transparent py-3 outline-hidden disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none border-0",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn("max-h-[300px] scroll-py-2 overflow-x-hidden overflow-y-auto", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />;
-}
-
-function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return <CommandPrimitive.Group data-slot="command-group" className={cn(className)} {...props} />;
-}
-
-function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return <CommandPrimitive.Item data-slot="command-item" className={cn(className)} {...props} />;
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
diff --git a/web/libs/ui/src/shad/components/ui/dialog.tsx b/web/libs/ui/src/shad/components/ui/dialog.tsx
deleted file mode 100644
index 4fb344674cdb..000000000000
--- a/web/libs/ui/src/shad/components/ui/dialog.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client";
-
-import type * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { IconClose } from "@humansignal/icons";
-
-import { cn } from "@humansignal/shad/utils";
-
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <IconClose />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
diff --git a/web/libs/ui/src/shad/components/ui/popover.tsx b/web/libs/ui/src/shad/components/ui/popover.tsx
deleted file mode 100644
index f8164829b109..000000000000
--- a/web/libs/ui/src/shad/components/ui/popover.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@humansignal/shad/utils";
-
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-99999 origin-(--radix-popover-content-transform-origin) rounded-md shadow-md outline-hidden min-w-full",
-          className,
-        )}
-        tabIndex={-1}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}
-
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/web/libs/ui/src/shad/components/ui/select.tsx b/web/libs/ui/src/shad/components/ui/select.tsx
new file mode 100644
index 000000000000..cf17b70b4f2f
--- /dev/null
+++ b/web/libs/ui/src/shad/components/ui/select.tsx
@@ -0,0 +1,150 @@
+import type * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronsUpDown, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@humansignal/shad/utils";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronsUpDown className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/web/package.json b/web/package.json
index 93a73d3576ec..3086712ec97e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -45,8 +45,7 @@
   "private": true,
   "dependencies": {
     "@martel/audio-file-decoder": "^2.3.15",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/query-core": "^5.66.0",
@@ -56,7 +55,6 @@
     "chroma-js": "^2.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
     "codemirror": "^5.59.4",
     "d3": "^5.16.0",
     "d3-color": "3.1.0",
@@ -74,6 +72,7 @@
     "lodash.get": "^4.4.0",
     "lodash.ismatch": "^4.4.0",
     "lodash.throttle": "^4.1.1",
+    "lucide-react": "^0.468.0",
     "mobx": "^5.15.4",
     "mobx-react": "^6",
     "mobx-state-tree": "^3.16.0",
diff --git a/web/yarn.lock b/web/yarn.lock
index 255142185576..2d2f7d8faa4a 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -4250,6 +4250,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/number@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46"
+  integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==
+
 "@radix-ui/primitive@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
@@ -4270,12 +4275,12 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-arrow@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz#30c0d574d7bb10eed55cd7007b92d38b03c6b2ab"
-  integrity sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==
+"@radix-ui/react-arrow@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz#2103721933a8bfc6e53bbfbdc1aaad5fc8ba0dd7"
+  integrity sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==
   dependencies:
-    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-primitive" "2.0.1"
 
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
@@ -4288,6 +4293,16 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-collection@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.1.tgz#be2c7e01d3508e6d4b6d838f492e7d182f17d3b0"
+  integrity sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-slot" "1.1.1"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -4295,7 +4310,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-compose-refs@1.1.1", "@radix-ui/react-compose-refs@^1.1.1":
+"@radix-ui/react-compose-refs@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
   integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
@@ -4312,26 +4327,6 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
   integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
-"@radix-ui/react-dialog@^1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz#65b4465e99ad900f28a98eed9a94bb21ec644bf7"
-  integrity sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==
-  dependencies:
-    "@radix-ui/primitive" "1.1.1"
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-dismissable-layer" "1.1.5"
-    "@radix-ui/react-focus-guards" "1.1.1"
-    "@radix-ui/react-focus-scope" "1.1.2"
-    "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-portal" "1.1.4"
-    "@radix-ui/react-presence" "1.1.2"
-    "@radix-ui/react-primitive" "2.0.2"
-    "@radix-ui/react-slot" "1.1.2"
-    "@radix-ui/react-use-controllable-state" "1.1.0"
-    aria-hidden "^1.2.4"
-    react-remove-scroll "^2.6.3"
-
 "@radix-ui/react-direction@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
@@ -4339,6 +4334,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-direction@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
+
 "@radix-ui/react-dismissable-layer@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
@@ -4363,14 +4363,14 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
-"@radix-ui/react-dismissable-layer@1.1.5":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz#96dde2be078c694a621e55e047406c58cd5fe774"
-  integrity sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==
+"@radix-ui/react-dismissable-layer@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.3.tgz#4ee0f0f82d53bf5bd9db21665799bb0d1bad5ed8"
+  integrity sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==
   dependencies:
     "@radix-ui/primitive" "1.1.1"
     "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-primitive" "2.0.1"
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
@@ -4396,13 +4396,13 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
-"@radix-ui/react-focus-scope@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz#c0a4519cd95c772606a82fc5b96226cd7fdd2602"
-  integrity sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==
+"@radix-ui/react-focus-scope@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz#5c602115d1db1c4fcfa0fae4c3b09bb8919853cb"
+  integrity sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-primitive" "2.0.1"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
 "@radix-ui/react-id@1.0.1":
@@ -4413,34 +4413,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
-"@radix-ui/react-id@1.1.0", "@radix-ui/react-id@^1.1.0":
+"@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
   integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-popover@^1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.6.tgz#699634dbc7899429f657bb590d71fb3ca0904087"
-  integrity sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==
-  dependencies:
-    "@radix-ui/primitive" "1.1.1"
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-dismissable-layer" "1.1.5"
-    "@radix-ui/react-focus-guards" "1.1.1"
-    "@radix-ui/react-focus-scope" "1.1.2"
-    "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-popper" "1.2.2"
-    "@radix-ui/react-portal" "1.1.4"
-    "@radix-ui/react-presence" "1.1.2"
-    "@radix-ui/react-primitive" "2.0.2"
-    "@radix-ui/react-slot" "1.1.2"
-    "@radix-ui/react-use-controllable-state" "1.1.0"
-    aria-hidden "^1.2.4"
-    react-remove-scroll "^2.6.3"
-
 "@radix-ui/react-popper@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9"
@@ -4458,16 +4437,16 @@
     "@radix-ui/react-use-size" "1.0.1"
     "@radix-ui/rect" "1.0.1"
 
-"@radix-ui/react-popper@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.2.tgz#d2e1ee5a9b24419c5936a1b7f6f472b7b412b029"
-  integrity sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==
+"@radix-ui/react-popper@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.1.tgz#2fc66cfc34f95f00d858924e3bee54beae2dff0a"
+  integrity sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==
   dependencies:
     "@floating-ui/react-dom" "^2.0.0"
-    "@radix-ui/react-arrow" "1.1.2"
+    "@radix-ui/react-arrow" "1.1.1"
     "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-primitive" "2.0.1"
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
     "@radix-ui/react-use-rect" "1.1.0"
@@ -4490,12 +4469,12 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-portal@1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.4.tgz#ff5401ff63c8a825c46eea96d3aef66074b8c0c8"
-  integrity sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==
+"@radix-ui/react-portal@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.3.tgz#b0ea5141103a1671b715481b13440763d2ac4440"
+  integrity sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==
   dependencies:
-    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-primitive" "2.0.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
 "@radix-ui/react-presence@1.0.1":
@@ -4507,14 +4486,6 @@
     "@radix-ui/react-compose-refs" "1.0.1"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
-"@radix-ui/react-presence@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.2.tgz#bb764ed8a9118b7ec4512da5ece306ded8703cdc"
-  integrity sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-use-layout-effect" "1.1.0"
-
 "@radix-ui/react-primitive@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
@@ -4523,12 +4494,12 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
-"@radix-ui/react-primitive@2.0.2", "@radix-ui/react-primitive@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef"
-  integrity sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==
+"@radix-ui/react-primitive@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz#6d9efc550f7520135366f333d1e820cf225fad9e"
+  integrity sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==
   dependencies:
-    "@radix-ui/react-slot" "1.1.2"
+    "@radix-ui/react-slot" "1.1.1"
 
 "@radix-ui/react-roving-focus@1.0.4":
   version "1.0.4"
@@ -4574,6 +4545,33 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-select@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.1.4.tgz#8957050203640b668a883a225260c403514b3772"
+  integrity sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ==
+  dependencies:
+    "@radix-ui/number" "1.1.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-collection" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.3"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.1"
+    "@radix-ui/react-portal" "1.1.3"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-slot" "1.1.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.6.1"
+
 "@radix-ui/react-separator@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
@@ -4590,14 +4588,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
-"@radix-ui/react-slot@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"
-  integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.1"
-
-"@radix-ui/react-slot@^1.1.1":
+"@radix-ui/react-slot@1.1.1", "@radix-ui/react-slot@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz#ab9a0ffae4027db7dc2af503c223c978706affc3"
   integrity sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==
@@ -4722,6 +4713,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
+
 "@radix-ui/react-use-rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
@@ -4760,6 +4756,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-visually-hidden@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.1.tgz#f7b48c1af50dfdc366e92726aee6d591996c5752"
+  integrity sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.1"
+
 "@radix-ui/rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@@ -7494,13 +7497,6 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
-aria-hidden@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
-  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
-  dependencies:
-    tslib "^2.0.0"
-
 aria-query@5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
@@ -9326,16 +9322,6 @@ clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-cmdk@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.1.1.tgz#b8524272699ccaa37aaf07f36850b376bf3d58e5"
-  integrity sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==
-  dependencies:
-    "@radix-ui/react-compose-refs" "^1.1.1"
-    "@radix-ui/react-dialog" "^1.1.6"
-    "@radix-ui/react-id" "^1.1.0"
-    "@radix-ui/react-primitive" "^2.0.2"
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -15744,6 +15730,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide-react@^0.468.0:
+  version "0.468.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.468.0.tgz#830c1bfd905575ddd23b832baa420c87db166910"
+  integrity sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==
+
 lusca@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/lusca/-/lusca-1.6.1.tgz#f7445e50c720030f5ee53d1336e9e53d1786c34f"
@@ -18713,16 +18704,16 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-remove-scroll@^2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz#df02cde56d5f2731e058531f8ffd7f9adec91ac2"
-  integrity sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==
+react-remove-scroll@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz#2518d2c5112e71ea8928f1082a58459b5c7a2a97"
+  integrity sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==
   dependencies:
     react-remove-scroll-bar "^2.3.7"
-    react-style-singleton "^2.2.3"
+    react-style-singleton "^2.2.1"
     tslib "^2.1.0"
     use-callback-ref "^1.3.3"
-    use-sidecar "^1.1.3"
+    use-sidecar "^1.1.2"
 
 react-router-dom@^5.2.0:
   version "5.3.4"
@@ -18766,7 +18757,7 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+react-style-singleton@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
   integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
@@ -20257,7 +20248,16 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20371,7 +20371,7 @@ stringify-object@^5.0.0:
     is-obj "^3.0.0"
     is-regexp "^3.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20385,6 +20385,13 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -21696,14 +21703,6 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sidecar@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
-  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
-  dependencies:
-    detect-node-es "^1.1.0"
-    tslib "^2.0.0"
-
 use-sync-external-store@^1.2.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
@@ -22263,7 +22262,7 @@ workerpool@6.2.0:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.0.tgz#827d93c9ba23ee2019c3ffaff5c27fccea289e8b"
   integrity sha512-Rsk5qQHJ9eowMH28Jwhe8HEbmdYDX4lwoMWshiCXugjtHqMD9ZbiqSDLxcsfdqsETPzVUtX5s1Z5kStiIM6l4A==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -22281,6 +22280,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"