diff --git a/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts b/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts
index 6e85f00a94..fab3aaf1bc 100644
--- a/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts
+++ b/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts
@@ -48,25 +48,14 @@ describe("A/B Testing Evaluation workflow", () => {
             cy.clickLinkAndWait('[data-cy="new-human-eval-modal-button"]')
 
             cy.get(".ant-modal-content").should("exist")
-            cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseover")
-            cy.get(".ant-dropdown")
-                .eq(0)
-                .within(() => {
-                    cy.get('[data-cy="variant-0"]').contains("app.default").click()
-                })
-            cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseout")
+            cy.get('[data-cy="variants-dropdown-0"]').click()
+            cy.get('[data-cy="variant-0"]').contains("app.default").click()
 
-            cy.get('[data-cy="variants-dropdown-1"]').trigger("mouseover")
-            cy.get(".ant-dropdown")
-                .eq(1)
-                .within(() => {
-                    cy.get('[data-cy="variant-1"]').contains(`app.${app_v2}`).click()
-                })
-            cy.get('[data-cy="variants-dropdown-1"]').trigger("mouseout")
+            cy.get('[data-cy="variants-dropdown-1"]').click()
+            cy.get('[data-cy="variant-1"]').contains(`app.${app_v2}`).click()
 
-            cy.get('[data-cy="selected-testset"]').trigger("mouseover")
+            cy.get('[data-cy="selected-testset"]').click()
             cy.get('[data-cy^="testset"]').contains(testset_name).click()
-            cy.get('[data-cy="selected-testset"]').trigger("mouseout")
 
             cy.clickLinkAndWait('[data-cy="start-new-evaluation-button"]')
             cy.url().should("include", "/human_a_b_testing")
diff --git a/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts b/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts
index 9414bb71d6..5a702215d0 100644
--- a/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts
+++ b/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts
@@ -22,13 +22,11 @@ describe("Single Model Test workflow", () => {
 
             cy.get(".ant-modal-content").should("exist")
 
-            cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseover")
+            cy.get('[data-cy="variants-dropdown-0"]').click()
             cy.get('[data-cy="variant-0"]').click()
-            cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseout")
 
-            cy.get('[data-cy="selected-testset"]').trigger("mouseover")
+            cy.get('[data-cy="selected-testset"]').click()
             cy.get('[data-cy^="testset"]').contains(testset_name).click()
-            cy.get('[data-cy="selected-testset"]').trigger("mouseout")
 
             cy.clickLinkAndWait('[data-cy="start-new-evaluation-button"]')
             cy.url().should("include", "/single_model_test")
diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
index 084bf22fbc..b106f7bdd2 100644
--- a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
+++ b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
@@ -3,7 +3,7 @@ import {GenericObject, JSSTheme, Parameter, Variant, StyleProps} from "@/lib/Typ
 import {fetchVariants} from "@/services/api"
 import {createNewEvaluation} from "@/services/human-evaluations/api"
 import {isDemo} from "@/lib/helpers/utils"
-import {Button, Col, Dropdown, MenuProps, Modal, ModalProps, Row, Spin, message} from "antd"
+import {Button, Col, Modal, ModalProps, Row, Select, Spin, message} from "antd"
 import {getErrorMessage} from "@/lib/helpers/errorHandler"
 import {EvaluationType} from "@/lib/enums"
 import {PERMISSION_ERR_MSG} from "@/lib/helpers/axiosConfig"
@@ -14,7 +14,7 @@ import {createUseStyles} from "react-jss"
 import EvaluationErrorModal from "../Evaluations/EvaluationErrorModal"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {useLoadTestsetsList} from "@/services/testsets/api"
-import {CaretDown, Play} from "@phosphor-icons/react"
+import {Play} from "@phosphor-icons/react"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     evaluationContainer: {
@@ -45,10 +45,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         alignItems: "center",
         width: "100%",
     },
-    dropdownBtn: {
-        marginRight: 10,
-        width: "100%",
-    },
     optionSelected: {
         border: "1px solid #1668dc",
         "& .ant-select-selection-item": {
@@ -96,10 +92,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         paddingLeft: 10,
         paddingRight: 10,
     },
-    variantDropdown: {
-        marginRight: 10,
-        width: "100%",
-    },
     newCodeEval: {
         display: "flex",
         alignItems: "center",
@@ -226,28 +218,12 @@ const HumanEvaluationModal = ({
         setSelectedTestset(testsetsList[selectedTestsetIndexInTestsetsList])
     }
 
-    const getTestsetDropdownMenu = (): MenuProps => {
-        const items: MenuProps["items"] = testsetsList.map((testset, index) => {
-            return {
-                label: (
-                    <>
-                        <div data-cy={`testset-${index}`}>{testset.name}</div>
-                    </>
-                ),
-                key: `${testset.name}-${testset._id}`,
-            }
-        })
-
-        const menuProps: MenuProps = {
-            items,
-            onClick: ({key}) => {
-                const index = items.findIndex((item) => item?.key === key)
-                onTestsetSelect(index)
-            },
+    const testsetOptions = testsetsList.map((testset, index) => {
+        return {
+            label: <div data-cy={`testset-${index}`}>{testset.name}</div>,
+            value: `${testset.name}-${testset._id}`,
         }
-
-        return menuProps
-    }
+    })
 
     const handleAppVariantsMenuClick =
         (dropdownIndex: number) =>
@@ -273,40 +249,24 @@ const HumanEvaluationModal = ({
             })
         }
 
-    const getVariantsDropdownMenu = (index: number): MenuProps => {
-        const selectedVariantsNames = selectedVariants.map((variant) => variant.variantName)
-
-        const items = variants.reduce((filteredVariants, variant, idx) => {
-            const label = variant.variantName
-
-            if (!selectedVariantsNames.includes(label)) {
-                filteredVariants.push({
-                    label: (
-                        <>
-                            <div
-                                data-cy={`variant-${idx}`}
-                                className="flex items-center justify-between"
-                            >
-                                <span>{variant.variantName}</span>
-                                <span className={classes.dropdownItemLabels}>
-                                    #{variant.variantId.split("-")[0]}
-                                </span>
-                            </div>
-                        </>
-                    ),
-                    key: label,
-                })
-            }
-
-            return filteredVariants
-        }, [])
-
-        const menuProps: MenuProps = {
-            items,
-            onClick: handleAppVariantsMenuClick(index),
-        }
+    const getVariantsOptionsMenu = (index: number) => {
+        const selectedVariantNames = selectedVariants
+            .filter((_, idx) => idx !== index)
+            .map((variant) => variant?.variantName)
 
-        return menuProps
+        return variants
+            .filter((variant) => !selectedVariantNames.includes(variant.variantName))
+            .map((variant) => ({
+                label: (
+                    <div data-cy={`variant-${index}`} className="flex items-center justify-between">
+                        <span>{variant.variantName}</span>
+                        <span className={classes.dropdownItemLabels}>
+                            #{variant.variantId.split("-")[0]}
+                        </span>
+                    </div>
+                ),
+                value: variant.variantName,
+            }))
     }
 
     const onStartEvaluation = async () => {
@@ -379,17 +339,19 @@ const HumanEvaluationModal = ({
                         <div style={{display: "flex", flexDirection: "column", gap: 10}}>
                             <div>
                                 <p>Which testset you want to use?</p>
-                                <Dropdown menu={getTestsetDropdownMenu()}>
-                                    <Button
-                                        className={classes.dropdownBtn}
-                                        data-cy="selected-testset"
-                                    >
-                                        <div className={classes.dropdownStyles}>
-                                            {selectedTestset.name}
-                                            <CaretDown size={16} />
-                                        </div>
-                                    </Button>
-                                </Dropdown>
+                                <Select
+                                    showSearch
+                                    placeholder="Select a Test set"
+                                    className="w-full mb-2.5"
+                                    data-cy="selected-testset"
+                                    options={testsetOptions}
+                                    onSelect={(value) => {
+                                        const index = testsetOptions.findIndex(
+                                            (item) => item?.value === value,
+                                        )
+                                        onTestsetSelect(index)
+                                    }}
+                                />
                             </div>
 
                             <div>
@@ -397,19 +359,17 @@ const HumanEvaluationModal = ({
                                 {Array.from({
                                     length: evaluationType === "human_a_b_testing" ? 2 : 1,
                                 }).map((_, index) => (
-                                    <Dropdown key={index} menu={getVariantsDropdownMenu(index)}>
-                                        <Button
-                                            className={classes.variantDropdown}
-                                            data-cy={`variants-dropdown-${index}`}
-                                            style={{marginTop: index === 1 ? 8 : 0}}
-                                        >
-                                            <div className={classes.dropdownStyles}>
-                                                {selectedVariants[index]?.variantName ||
-                                                    "Select a variant"}
-                                                <CaretDown size={16} />
-                                            </div>
-                                        </Button>
-                                    </Dropdown>
+                                    <Select
+                                        showSearch
+                                        key={index}
+                                        placeholder="Select a Variant"
+                                        className={`w-full ${index === 1 && "mt-2"}`}
+                                        data-cy={`variants-dropdown-${index}`}
+                                        options={getVariantsOptionsMenu(index)}
+                                        onSelect={(value) =>
+                                            handleAppVariantsMenuClick(index)({key: value})
+                                        }
+                                    />
                                 ))}
                             </div>
 
diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx
index 3ed4d5b8b5..58b18e3582 100644
--- a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx
+++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx
@@ -156,11 +156,22 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
                         label="Which testset do you want to use?"
                         rules={[{required: true, message: "This field is required"}]}
                     >
-                        <Select placeholder="Select testset" data-cy="select-testset-group">
+                        <Select
+                            showSearch
+                            placeholder="Select testset"
+                            data-cy="select-testset-group"
+                            filterOption={(input, option) =>
+                                (option?.label ?? "")
+                                    .toString()
+                                    .toLowerCase()
+                                    .includes(input.toLowerCase())
+                            }
+                        >
                             {testSets.map((testSet) => (
                                 <Select.Option
                                     key={testSet._id}
                                     value={testSet._id}
+                                    label={testSet.name}
                                     data-cy="select-testset-option"
                                 >
                                     {testSet.name}
@@ -178,11 +189,18 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
                             mode="multiple"
                             placeholder="Select variants"
                             data-cy="select-variant-group"
+                            filterOption={(input, option) =>
+                                (option?.label ?? "")
+                                    .toString()
+                                    .toLowerCase()
+                                    .includes(input.toLowerCase())
+                            }
                         >
                             {variants.map((variant) => (
                                 <Select.Option
                                     key={variant.variantId}
                                     value={variant.variantId}
+                                    label={variant.variantName}
                                     data-cy="select-variant-option"
                                 >
                                     {variant.variantName}