diff --git a/webview-ui/src/AzureServiceOperator/AzureServiceOperator.tsx b/webview-ui/src/AzureServiceOperator/AzureServiceOperator.tsx
index 347a4791d..621650290 100644
--- a/webview-ui/src/AzureServiceOperator/AzureServiceOperator.tsx
+++ b/webview-ui/src/AzureServiceOperator/AzureServiceOperator.tsx
@@ -1,4 +1,3 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import styles from "./AzureServiceOperator.module.css";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/azureServiceOperator";
 import { useEffect } from "react";
@@ -64,7 +63,7 @@ export function AzureServiceOperator(initialState: InitialState) {
             <p>
                 The Azure Service Operator helps you provision Azure resources and connect your applications to them
                 from within Kubernetes.
-                <VSCodeLink href="https://aka.ms/aks/aso">&nbsp;Learn more</VSCodeLink>
+                <a href="https://aka.ms/aks/aso">&nbsp;Learn more</a>
             </p>
             <div className={styles.content}>
                 <div className={styles.inputPane}>
diff --git a/webview-ui/src/AzureServiceOperator/Inputs.tsx b/webview-ui/src/AzureServiceOperator/Inputs.tsx
index 3a9529e2f..e45bf3f08 100644
--- a/webview-ui/src/AzureServiceOperator/Inputs.tsx
+++ b/webview-ui/src/AzureServiceOperator/Inputs.tsx
@@ -1,10 +1,3 @@
-import {
-    VSCodeButton,
-    VSCodeDropdown,
-    VSCodeLink,
-    VSCodeOption,
-    VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
 import styles from "./AzureServiceOperator.module.css";
 import { ASOState, EventDef, InstallStepStatus } from "./helpers/state";
 import { EventHandlers } from "../utilities/state";
@@ -14,6 +7,8 @@ import { MessageSink } from "../../../src/webview-contract/messaging";
 import { getRequiredInputs } from "./helpers/inputs";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { CustomDropdown } from "../components/CustomDropdown";
+import { CustomDropdownOption } from "../components/CustomDropdownOption";
 
 type ChangeEvent = Event | FormEvent<HTMLElement>;
 
@@ -45,10 +40,8 @@ export function Inputs(props: InputsProps) {
         props.handlers.onSetCheckingSP();
     }
 
-    function handleSubscriptionChanged(e: Event | FormEvent<HTMLElement>) {
-        const elem = e.target as HTMLInputElement;
-        const subscriptionId = elem.value || null;
-        props.handlers.onSetSelectedSubscriptionId(subscriptionId);
+    function handleSubscriptionChanged(value: string) {
+        props.handlers.onSetSelectedSubscriptionId(value);
     }
 
     function handleSubmit(e: FormEvent) {
@@ -74,15 +67,16 @@ export function Inputs(props: InputsProps) {
                     <FontAwesomeIcon className={styles.infoIndicator} icon={faInfoCircle} />
                     Provide the App ID and password of a Service Principal with Contributor permissions for your
                     subscription. This allows ASO to create resources in your subscription on your behalf.
-                    <VSCodeLink href="https://docs.microsoft.com/en-us/cli/azure/create-an-azure-service-principal-azure-cli">
+                    <a href="https://docs.microsoft.com/en-us/cli/azure/create-an-azure-service-principal-azure-cli">
                         &nbsp; Learn more
-                    </VSCodeLink>
+                    </a>
                 </p>
 
                 <label htmlFor="spappid" className={styles.label}>
                     Enter App ID of service principal:
                 </label>
-                <VSCodeTextField
+                <input
+                    type="text"
                     value={appId || ""}
                     readOnly={!canEditSP}
                     required
@@ -90,14 +84,13 @@ export function Inputs(props: InputsProps) {
                     onInput={handleAppIdChange}
                     className={styles.control}
                     size={50}
-                    type="text"
                     placeholder="e.g. 041ccd53-e72f-45d1-bbff-382c82f6f9a1"
                 />
 
                 <label htmlFor="spcred" className={styles.label}>
                     Enter Password of Service Principal:
                 </label>
-                <VSCodeTextField
+                <input
                     value={appSecret || ""}
                     readOnly={!canEditSP}
                     required
@@ -109,9 +102,9 @@ export function Inputs(props: InputsProps) {
                     placeholder="Service principal password"
                 />
 
-                <VSCodeButton disabled={!canCheckSP} onClick={handleCheckSPClick}>
+                <button disabled={!canCheckSP} onClick={handleCheckSPClick}>
                     Check
-                </VSCodeButton>
+                </button>
             </div>
             {canViewSubscriptions && (
                 <div className={styles.inputContainer}>
@@ -121,31 +114,28 @@ export function Inputs(props: InputsProps) {
                         The supplied service principal has some role assignments on the following subscriptions. Please
                         ensure these are adequate for the Azure resources that ASO will be creating in your selected
                         subscription.
-                        <VSCodeLink href="https://azure.github.io/azure-service-operator/#installation">
-                            &nbsp; Learn more
-                        </VSCodeLink>
+                        <a href="https://azure.github.io/azure-service-operator/#installation">&nbsp; Learn more</a>
                     </p>
 
                     <label htmlFor="sub-select" className={styles.label}>
                         Subscription for ASO resources:
                     </label>
-                    <VSCodeDropdown
+
+                    <CustomDropdown
                         id="sub-select"
                         value={selectedSubscription?.id || ""}
-                        className={styles.control}
                         disabled={!canSelectSubscription}
                         onChange={handleSubscriptionChanged}
+                        className={styles.control}
                     >
-                        {subscriptions.length !== 1 && <VSCodeOption value="">Select</VSCodeOption>}
+                        {subscriptions.length !== 1 && <CustomDropdownOption value="" label="Select" />}
                         {subscriptions.map((s) => (
-                            <VSCodeOption value={s.id} key={s.id}>
-                                {s.name}
-                            </VSCodeOption>
+                            <CustomDropdownOption value={s.id} key={s.id} label={s.name} />
                         ))}
-                    </VSCodeDropdown>
-                    <VSCodeButton disabled={!canStartInstalling} type="submit">
+                    </CustomDropdown>
+                    <button disabled={!canStartInstalling} type="submit">
                         Install
-                    </VSCodeButton>
+                    </button>
                 </div>
             )}
         </form>
diff --git a/webview-ui/src/CreateCluster/CreateCluster.tsx b/webview-ui/src/CreateCluster/CreateCluster.tsx
index 539611294..d75265898 100644
--- a/webview-ui/src/CreateCluster/CreateCluster.tsx
+++ b/webview-ui/src/CreateCluster/CreateCluster.tsx
@@ -38,10 +38,11 @@ export function CreateCluster(initialState: InitialState) {
                     />
                 );
             case Stage.Creating:
+                console.log("Creating cluster");
                 return (
                     <>
                         <h3>
-                            Creating Cluster {state.createParams!.name} in {state.createParams!.location}
+                            Creating Cluster {state.createParams?.name} in {state.createParams?.location}
                         </h3>
                         {state.deploymentPortalUrl && (
                             <p>
@@ -62,7 +63,10 @@ export function CreateCluster(initialState: InitialState) {
                 );
             case Stage.Succeeded:
                 return (
-                    <Success portalClusterUrl={state.createdCluster?.portalUrl || ""} name={state.createParams!.name} />
+                    <Success
+                        portalClusterUrl={state.createdCluster?.portalUrl || ""}
+                        name={state.createParams?.name || ""}
+                    />
                 );
             default:
                 throw new Error(`Unexpected stage ${state.stage}`);
diff --git a/webview-ui/src/CreateCluster/CreateClusterInput.tsx b/webview-ui/src/CreateCluster/CreateClusterInput.tsx
index 7fee7a644..a30492f67 100644
--- a/webview-ui/src/CreateCluster/CreateClusterInput.tsx
+++ b/webview-ui/src/CreateCluster/CreateClusterInput.tsx
@@ -1,6 +1,6 @@
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+// import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
 import { FormEvent, useState } from "react";
 import { MessageSink } from "../../../src/webview-contract/messaging";
 import {
@@ -16,9 +16,9 @@ import styles from "./CreateCluster.module.css";
 import { CreateClusterPresetInput } from "./CreateClusterPresetInput";
 import { CreateResourceGroupDialog } from "./CreateResourceGroup";
 import { EventDef } from "./helpers/state";
-
-type ChangeEvent = Event | FormEvent<HTMLElement>;
-
+import { CustomDropdown } from "../components/CustomDropdown";
+import { CustomDropdownOption } from "../components/CustomDropdownOption";
+import { MouseEvent } from "react";
 interface CreateClusterInputProps {
     locations: string[];
     resourceGroups: ResourceGroup[];
@@ -32,7 +32,7 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
     const [isNewResourceGroupDialogShown, setIsNewResourceGroupDialogShown] = useState(false);
     const [newResourceGroupName, setNewResourceGroupName] = useState<string | null>(null);
     const [presetSelected, setPresetSelected] = useState<PresetType>(PresetType.Automatic);
-    const [selectedIndex, setSelectedIndex] = useState<number>(0);
+    const [selectedResourceGroup, setSelectedResourceGroup] = useState<string>("");
     const [location, setLocation] = useState<Validatable<string>>(unset());
 
     const newResourceGroup = newResourceGroupName
@@ -51,26 +51,30 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
         setIsNewResourceGroupDialogShown(false);
         setExistingResourceGroup(valid(null));
         setNewResourceGroupName(groupName);
-        setSelectedIndex(1); // this is the index of the new resource group and the first option is "Select"
+        setSelectedResourceGroup(groupName);
     }
 
     function handlePresetSelection(presetSelected: PresetType) {
         setPresetSelected(presetSelected);
     }
 
-    function handleValidationAndIndex(e: ChangeEvent) {
-        handleExistingResourceGroupChange(e);
-        const ele = e.currentTarget as HTMLSelectElement;
-        setSelectedIndex(ele.selectedIndex);
+    function handleValidationAndIndex(value: string) {
+        handleExistingResourceGroupChange(value);
+        setSelectedResourceGroup(value);
     }
 
-    function handleExistingResourceGroupChange(e: ChangeEvent) {
-        const elem = e.currentTarget as HTMLSelectElement;
-        const resourceGroup = elem.selectedIndex <= 0 ? null : allResourceGroups[elem.selectedIndex - 1];
+    function handleExistingResourceGroupChange(value: string) {
+        const resourceGroup = value ? allResourceGroups.find((group) => group.name === value) : null;
         const validatable = resourceGroup ? valid(resourceGroup) : invalid(null, "Resource Group is required.");
         setExistingResourceGroup(validatable);
     }
 
+    const handleCreateNewRG = (event: MouseEvent<HTMLButtonElement>) => {
+        setIsNewResourceGroupDialogShown(true);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
     function getValidatedName(name: string): Validatable<string> {
         if (!name) return invalid(name, "Cluster name must be at least 1 character long.");
         if (name.length > 63) return invalid(name, "Cluster name must be at most 63 characters long.");
@@ -84,15 +88,14 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
         return valid(name);
     }
 
-    function handleNameChange(e: ChangeEvent) {
-        const name = (e.currentTarget as HTMLInputElement).value;
+    function handleNameChange(e: FormEvent<HTMLInputElement>) {
+        const name = e.currentTarget.value;
         const validated = getValidatedName(name);
         setName(validated);
     }
 
-    function handleLocationChange(e: ChangeEvent) {
-        const elem = e.currentTarget as HTMLSelectElement;
-        const location = elem.selectedIndex <= 0 ? null : props.locations[elem.selectedIndex - 1];
+    function handleLocationChange(value: string) {
+        const location = value ? props.locations.find((loc) => loc === value) : null;
         const validated = location ? valid(location) : missing<string>("Location is required.");
         setLocation(validated);
     }
@@ -139,32 +142,32 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                     <label htmlFor="cluster-details" className={styles.clusterDetailsLabel}>
                         Cluster details
                     </label>
+
                     <label htmlFor="existing-resource-group-dropdown" className={styles.label}>
                         Resource Group*
                     </label>
-                    <VSCodeDropdown
+                    <CustomDropdown
                         id="existing-resource-group-dropdown"
-                        className={styles.midControl}
-                        onBlur={handleValidationAndIndex}
+                        value={selectedResourceGroup}
                         onChange={handleValidationAndIndex}
-                        selectedIndex={selectedIndex}
+                        disabled={false}
                         aria-label="Select a resource group"
                     >
-                        <VSCodeOption selected value="">
-                            Select
-                        </VSCodeOption>
+                        <CustomDropdownOption value="" label="Select" />
                         {allResourceGroups.length > 0 ? (
                             allResourceGroups.map((group) => (
-                                <VSCodeOption key={group.name} value={group.name}>
-                                    {group === newResourceGroup ? "(New)" : ""} {group.name}
-                                </VSCodeOption>
+                                <CustomDropdownOption
+                                    key={group.name}
+                                    value={group.name}
+                                    label={`${group === newResourceGroup ? "(New) " : ""}${group.name}`}
+                                />
                             ))
                         ) : (
-                            <VSCodeOption disabled>No resource groups available</VSCodeOption>
+                            <CustomDropdownOption value="" label="No resource groups available" />
                         )}
-                    </VSCodeDropdown>
+                    </CustomDropdown>
 
-                    <button className={styles.sideControl} onClick={() => setIsNewResourceGroupDialogShown(true)}>
+                    <button className={styles.sideControl} onClick={handleCreateNewRG}>
                         Create New
                     </button>
                     {hasMessage(existingResourceGroup) && (
@@ -195,19 +198,17 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                     <label htmlFor="location-dropdown" className={styles.label}>
                         Region*
                     </label>
-                    <VSCodeDropdown
+                    <CustomDropdown
                         id="location-dropdown"
-                        className={styles.longControl}
-                        onBlur={handleLocationChange}
+                        value={isValueSet(location) ? location.value : ""}
                         onChange={handleLocationChange}
+                        disabled={false}
                     >
-                        <VSCodeOption value="">Select</VSCodeOption>
+                        <CustomDropdownOption value="" label="Select" />
                         {props.locations.map((location) => (
-                            <VSCodeOption key={location} value={location}>
-                                {location}
-                            </VSCodeOption>
+                            <CustomDropdownOption key={location} value={location} label={location} />
                         ))}
-                    </VSCodeDropdown>
+                    </CustomDropdown>
                     {hasMessage(location) && (
                         <span className={styles.validationMessage}>
                             <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
diff --git a/webview-ui/src/CreateFleet/CreateFleetInput.tsx b/webview-ui/src/CreateFleet/CreateFleetInput.tsx
index c74442bb3..ccd0c587e 100644
--- a/webview-ui/src/CreateFleet/CreateFleetInput.tsx
+++ b/webview-ui/src/CreateFleet/CreateFleetInput.tsx
@@ -5,7 +5,6 @@ import {
     ResourceGroup,
     ToVsCodeMsgDef,
 } from "../../../src/webview-contract/webviewDefinitions/createFleet";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
 import {
     hasMessage,
     invalid,
@@ -25,6 +24,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import styles from "./CreateFleet.module.css";
 import { CreateFleetModeInput } from "./CreateFleetModeInput";
+import { CustomDropdown } from "../components/CustomDropdown";
+import { CustomDropdownOption } from "../components/CustomDropdownOption";
 
 type ChangeEvent = Event | FormEvent<HTMLElement>;
 
@@ -39,22 +40,21 @@ interface CreateFleetInputProps {
 export function CreateFleetInput(props: CreateFleetInputProps) {
     const [existingResourceGroup, setExistingResourceGroup] = useState<Validatable<ResourceGroup | null>>(unset());
     const [fleetName, setFleetName] = useState<Validatable<string>>(unset());
-    const [selectedResourceGroupIndex, setselectedResourceGroupIndex] = useState<number>(0);
+    // const [selectedResourceGroupIndex, setselectedResourceGroupIndex] = useState<number>(0);
     const [location, setLocation] = useState<Validatable<string>>(unset());
     const [hubModeSelected, setHubModeSelected] = useState<HubMode>(HubMode.With);
     const [dnsPrefix, setDnsPrefix] = useState<Validatable<string>>(unset());
+    const [selectedResourceGroup, setSelectedResourceGroup] = useState<string>("");
 
     const allResourcesGroups = props.resourceGroups; // All available resource groups fetched from the portal
 
-    function handleValidationAndIndex(e: ChangeEvent) {
-        handleExistingResourceGroupChange(e);
-        const ele = e.currentTarget as HTMLSelectElement;
-        setselectedResourceGroupIndex(ele.selectedIndex);
+    function handleValidationAndIndex(value: string) {
+        handleExistingResourceGroupChange(value);
+        setSelectedResourceGroup(value);
     }
 
-    function handleExistingResourceGroupChange(e: ChangeEvent) {
-        const elem = e.currentTarget as HTMLSelectElement;
-        const resourceGroup = elem.selectedIndex <= 0 ? null : allResourcesGroups[elem.selectedIndex - 1];
+    function handleExistingResourceGroupChange(value: string) {
+        const resourceGroup = value ? allResourcesGroups.find((group) => group.name === value) : null;
         const validatable = resourceGroup ? valid(resourceGroup) : invalid(null, "Resource Group is required.");
         setExistingResourceGroup(validatable);
     }
@@ -80,9 +80,8 @@ export function CreateFleetInput(props: CreateFleetInputProps) {
         return valid(name);
     }
 
-    function handleLocationChange(e: ChangeEvent) {
-        const elem = e.currentTarget as HTMLSelectElement;
-        const location = elem.selectedIndex <= 0 ? null : props.locations[elem.selectedIndex - 1];
+    function handleLocationChange(value: string) {
+        const location = value ? props.locations.find((loc) => loc === value) : null;
         const validated = location ? valid(location) : missing<string>("Location is required.");
         setLocation(validated);
     }
@@ -151,27 +150,22 @@ export function CreateFleetInput(props: CreateFleetInputProps) {
                 <label htmlFor="resourceGroup" className={styles.label}>
                     Resource Group*
                 </label>
-                <VSCodeDropdown
+                <CustomDropdown
                     id="existing-resource-group-dropdown"
                     className={styles.longControl}
-                    onBlur={handleValidationAndIndex}
                     onChange={handleValidationAndIndex}
-                    selectedIndex={selectedResourceGroupIndex}
                     aria-label="Select a resource group"
+                    value={selectedResourceGroup}
                 >
-                    <VSCodeOption selected value="">
-                        Select
-                    </VSCodeOption>
+                    <CustomDropdownOption value="" label="Select" />
                     {allResourcesGroups.length > 0 ? (
                         allResourcesGroups.map((group) => (
-                            <VSCodeOption key={group.name} value={group.name}>
-                                {""} {group.name}
-                            </VSCodeOption>
+                            <CustomDropdownOption key={group.name} value={group.name} label={group.name} />
                         ))
                     ) : (
-                        <VSCodeOption disabled>No resource groups available</VSCodeOption>
+                        <CustomDropdownOption value="" label="No resource groups available" />
                     )}
-                </VSCodeDropdown>
+                </CustomDropdown>
                 {hasMessage(existingResourceGroup) && (
                     <span className={styles.validationMessage}>
                         <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
@@ -182,19 +176,17 @@ export function CreateFleetInput(props: CreateFleetInputProps) {
                 <label htmlFor="location-dropdown" className={styles.label}>
                     Region*
                 </label>
-                <VSCodeDropdown
+                <CustomDropdown
                     id="location-dropdown"
                     className={styles.longControl}
-                    onBlur={handleLocationChange}
                     onChange={handleLocationChange}
+                    value={isValueSet(location) ? location.value : ""}
                 >
-                    <VSCodeOption value="">Select</VSCodeOption>
+                    <CustomDropdownOption value="" label="Select" />
                     {props.locations.map((location) => (
-                        <VSCodeOption key={location} value={location}>
-                            {location}
-                        </VSCodeOption>
+                        <CustomDropdownOption key={location} value={location} label={location} />
                     ))}
-                </VSCodeDropdown>
+                </CustomDropdown>
                 {hasMessage(location) && (
                     <span className={styles.validationMessage}>
                         <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
diff --git a/webview-ui/src/Detector/Detector.tsx b/webview-ui/src/Detector/Detector.tsx
index e2bdce31c..c7f86322a 100644
--- a/webview-ui/src/Detector/Detector.tsx
+++ b/webview-ui/src/Detector/Detector.tsx
@@ -1,4 +1,3 @@
-import { VSCodeDivider, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/detector";
 import { SingleDetector } from "./SingleDetector";
 import { useStateManagement } from "../utilities/state";
@@ -11,9 +10,8 @@ export function Detector(initialState: InitialState) {
         <>
             <h2>{state.name}</h2>
             {state.description && state.description !== "test" && <p>{state.description}</p>}
-            To perform more checks on your cluster, visit{" "}
-            <VSCodeLink href={state.portalDetectorUrl}>AKS Diagnostics</VSCodeLink>.
-            <VSCodeDivider style={{ marginTop: "16px" }} />
+            To perform more checks on your cluster, visit <a href={state.portalDetectorUrl}>AKS Diagnostics</a>.
+            <hr style={{ marginTop: "16px" }} />
             {state.detectors.map((detector) => (
                 <SingleDetector key={detector.name} {...detector}></SingleDetector>
             ))}
diff --git a/webview-ui/src/InspektorGadget/GadgetSelector.tsx b/webview-ui/src/InspektorGadget/GadgetSelector.tsx
index 18f5dfa2e..a84e22b88 100644
--- a/webview-ui/src/InspektorGadget/GadgetSelector.tsx
+++ b/webview-ui/src/InspektorGadget/GadgetSelector.tsx
@@ -1,8 +1,8 @@
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
-import { FormEvent } from "react";
 import { GadgetCategory } from "./helpers/gadgets/types";
 import { configuredGadgetResources } from "./helpers/gadgets";
-
+import { CustomDropdown } from "../components/CustomDropdown";
+import { CustomDropdownOption } from "../components/CustomDropdownOption";
+import { useState } from "react";
 export interface GadgetSelectorProps {
     category: GadgetCategory;
     id: string;
@@ -12,27 +12,21 @@ export interface GadgetSelectorProps {
 }
 
 export function GadgetSelector(props: GadgetSelectorProps) {
-    function handleResourceChange(e: Event | FormEvent<HTMLElement>) {
-        const elem = e.target as HTMLInputElement;
-        const resource = elem.value ? elem.value : null;
+    function handleResourceChange(value: string) {
+        const resource = value ? value : null;
+        setSelectedNode(value);
         props.onResourceChanged(resource);
     }
 
     const configuredResources = configuredGadgetResources[props.category];
+    const [selectedNode, setSelectedNode] = useState<string>("");
 
     return (
-        <VSCodeDropdown
-            id={props.id}
-            className={props.className}
-            required={props.required}
-            onChange={handleResourceChange}
-        >
-            <VSCodeOption value="">Select</VSCodeOption>
+        <CustomDropdown id={props.id} className={props.className} value={selectedNode} onChange={handleResourceChange}>
+            <CustomDropdownOption value="" label="Select" />
             {Object.keys(configuredResources).map((resource) => (
-                <VSCodeOption key={resource} value={resource}>
-                    {configuredResources[resource]!.name}
-                </VSCodeOption>
+                <CustomDropdownOption key={resource} value={resource} label={configuredResources[resource]!.name} />
             ))}
-        </VSCodeDropdown>
+        </CustomDropdown>
     );
 }
diff --git a/webview-ui/src/InspektorGadget/Overview.tsx b/webview-ui/src/InspektorGadget/Overview.tsx
index 5febcf2c1..2f1a02778 100644
--- a/webview-ui/src/InspektorGadget/Overview.tsx
+++ b/webview-ui/src/InspektorGadget/Overview.tsx
@@ -47,7 +47,6 @@ export function Overview(props: OverviewProps) {
                     </button>
                 </>
             )}
-            <br />
             {props.version &&
                 (isVersionStringOrNull(props.version.client) || isVersionStringOrNull(props.version.server)) && (
                     <button onClick={handleDeploy}>
diff --git a/webview-ui/src/KaitoModels/KaitoModels.module.css b/webview-ui/src/KaitoModels/KaitoModels.module.css
index 0871c4a9e..7dbbe04cf 100644
--- a/webview-ui/src/KaitoModels/KaitoModels.module.css
+++ b/webview-ui/src/KaitoModels/KaitoModels.module.css
@@ -415,4 +415,5 @@
 
 .closeButton:hover {
     color: #ff6b6b;
+    background: none;
 }
diff --git a/webview-ui/src/Kubectl/CommandInput.tsx b/webview-ui/src/Kubectl/CommandInput.tsx
index a85e5de4b..d1b10541e 100644
--- a/webview-ui/src/Kubectl/CommandInput.tsx
+++ b/webview-ui/src/Kubectl/CommandInput.tsx
@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import styles from "./Kubectl.module.css";
 import { FormEvent } from "react";
 
@@ -32,7 +31,8 @@ export function CommandInput(props: CommandInputProps) {
             <label htmlFor="command-input" className={styles.label}>
                 Command
             </label>
-            <VSCodeTextField
+            <input
+                type="text"
                 id="command-input"
                 className={styles.control}
                 value={props.command}
@@ -40,10 +40,10 @@ export function CommandInput(props: CommandInputProps) {
                 onKeyUp={onKeyPress}
             />
             <div className={styles.commands}>
-                <VSCodeButton disabled={!canRun} onClick={() => props.onRunCommand(props.command)}>
+                <button disabled={!canRun} onClick={() => props.onRunCommand(props.command)}>
                     Run
-                </VSCodeButton>
-                {!props.matchesExisting && <VSCodeButton onClick={props.onSaveRequest}>Save</VSCodeButton>}
+                </button>
+                {!props.matchesExisting && <button onClick={props.onSaveRequest}>Save</button>}
             </div>
         </div>
     );
diff --git a/webview-ui/src/Kubectl/Kubectl.tsx b/webview-ui/src/Kubectl/Kubectl.tsx
index e2a81e586..847ddb5c2 100644
--- a/webview-ui/src/Kubectl/Kubectl.tsx
+++ b/webview-ui/src/Kubectl/Kubectl.tsx
@@ -1,4 +1,3 @@
-import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { CommandCategory, InitialState, PresetCommand } from "../../../src/webview-contract/webviewDefinitions/kubectl";
 import styles from "./Kubectl.module.css";
 import { CommandList } from "./CommandList";
@@ -75,7 +74,7 @@ export function Kubectl(initialState: InitialState) {
         <div className={styles.wrapper}>
             <header className={styles.mainHeading}>
                 <h2>Kubectl Command Run for {state.clusterName}</h2>
-                <VSCodeDivider />
+                <hr />
             </header>
             <nav className={styles.commandNav}>
                 <CommandList
@@ -93,7 +92,7 @@ export function Kubectl(initialState: InitialState) {
                     onRunCommand={handleRunCommand}
                     onSaveRequest={handleSaveRequest}
                 />
-                <VSCodeDivider />
+                <hr />
                 <CommandOutput
                     isCommandRunning={state.isCommandRunning}
                     output={state.output}
diff --git a/webview-ui/src/Kubectl/SaveCommandDialog.tsx b/webview-ui/src/Kubectl/SaveCommandDialog.tsx
index 1eb7e10c1..22d7e1fb2 100644
--- a/webview-ui/src/Kubectl/SaveCommandDialog.tsx
+++ b/webview-ui/src/Kubectl/SaveCommandDialog.tsx
@@ -1,6 +1,5 @@
 import { FormEvent, useState } from "react";
 import { Dialog } from "../components/Dialog";
-import { VSCodeButton, VSCodeDivider, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import styles from "./Kubectl.module.css";
 
 type ChangeEvent = Event | FormEvent<HTMLElement>;
@@ -41,13 +40,14 @@ export function SaveCommandDialog(props: SaveCommandDialogProps) {
             <h2>Save Command As</h2>
 
             <form onSubmit={handleSubmit}>
-                <VSCodeDivider />
+                <hr />
 
                 <div className={styles.inputContainer}>
                     <label htmlFor="cmd-name-input" className={styles.label}>
                         Name
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="command-input"
                         className={styles.control}
                         value={name}
@@ -55,13 +55,13 @@ export function SaveCommandDialog(props: SaveCommandDialogProps) {
                     />
                 </div>
 
-                <VSCodeDivider />
+                <hr />
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit" disabled={!canSave()}>
+                    <button type="submit" disabled={!canSave()}>
                         Ok
-                    </VSCodeButton>
-                    <VSCodeButton onClick={props.onCancel}>Cancel</VSCodeButton>
+                    </button>
+                    <button onClick={props.onCancel}>Cancel</button>
                 </div>
             </form>
         </Dialog>
diff --git a/webview-ui/src/Periscope/ErrorView.tsx b/webview-ui/src/Periscope/ErrorView.tsx
index 76278c385..394789b11 100644
--- a/webview-ui/src/Periscope/ErrorView.tsx
+++ b/webview-ui/src/Periscope/ErrorView.tsx
@@ -1,4 +1,3 @@
-import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { KustomizeConfig } from "../../../src/webview-contract/webviewDefinitions/periscope";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -15,7 +14,7 @@ export function ErrorView(props: ErrorViewProps) {
         <>
             <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
             AKS Periscope failed to run on &#39;{props.clusterName}&#39;. Please see the error below for more details.
-            <VSCodeDivider />
+            <hr />
             <h3>Periscope settings (from VS Code Configuration)</h3>
             <dl className={styles.settinglist}>
                 <dt>GitHub organisation (containing aks-periscope repo with Kustomize base)</dt>
@@ -30,7 +29,7 @@ export function ErrorView(props: ErrorViewProps) {
                 <dt>Release tag (for {props.config.repoOrg}/aks-periscope GitHub repo)</dt>
                 <dd>{props.config.releaseTag}</dd>
             </dl>
-            <VSCodeDivider />
+            <hr />
             <pre>{props.message}</pre>
         </>
     );
diff --git a/webview-ui/src/Periscope/NodeActions.tsx b/webview-ui/src/Periscope/NodeActions.tsx
index af2d27c14..90bf94e58 100644
--- a/webview-ui/src/Periscope/NodeActions.tsx
+++ b/webview-ui/src/Periscope/NodeActions.tsx
@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClone, faDownload } from "@fortawesome/free-solid-svg-icons";
 
@@ -20,16 +19,16 @@ export function NodeActions(props: NodeActionsProps) {
 
     return (
         <>
-            <VSCodeButton onClick={copyShareLink}>
+            <button onClick={copyShareLink}>
                 <FontAwesomeIcon icon={faClone} />
                 &nbsp;Copy 7-Day Shareable Link
-            </VSCodeButton>
+            </button>
             &nbsp;
             {props.isUploaded && (
-                <VSCodeLink href={shareableLink} title={shareableLink} target="_blank">
+                <a href={shareableLink} title={shareableLink} target="_blank" rel="noreferrer">
                     <FontAwesomeIcon icon={faDownload} />
                     &nbsp;Download Zip
-                </VSCodeLink>
+                </a>
             )}
         </>
     );
diff --git a/webview-ui/src/Periscope/Periscope.tsx b/webview-ui/src/Periscope/Periscope.tsx
index a6af8a7c6..286747bf9 100644
--- a/webview-ui/src/Periscope/Periscope.tsx
+++ b/webview-ui/src/Periscope/Periscope.tsx
@@ -1,4 +1,3 @@
-import { VSCodeDivider, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { useEffect } from "react";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/periscope";
 import { ErrorView } from "./ErrorView";
@@ -30,11 +29,9 @@ export function Periscope(initialState: InitialState) {
                 AKS Periscope collects and exports node and pod logs into an Azure Blob storage account to help you
                 analyse and identify potential problems or easily share the information during the troubleshooting
                 process.
-                <VSCodeLink href="https://azure.github.io/vscode-aks-tools/features/aks-periscope.html">
-                    &nbsp;Learn more
-                </VSCodeLink>
+                <a href="https://azure.github.io/vscode-aks-tools/features/aks-periscope.html">&nbsp;Learn more</a>
             </p>
-            <VSCodeDivider />
+            <hr />
             {
                 {
                     error: (
diff --git a/webview-ui/src/Periscope/SuccessView.tsx b/webview-ui/src/Periscope/SuccessView.tsx
index e38db277d..0d2b1895f 100644
--- a/webview-ui/src/Periscope/SuccessView.tsx
+++ b/webview-ui/src/Periscope/SuccessView.tsx
@@ -1,4 +1,4 @@
-import { VSCodeDivider, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { useEffect } from "react";
 import { NodeUploadStatus, PodLogs } from "../../../src/webview-contract/webviewDefinitions/periscope";
 import { NodeActions } from "./NodeActions";
@@ -87,7 +87,7 @@ export function SuccessView(props: SuccessViewProps) {
                 </tbody>
             </table>
 
-            <VSCodeDivider />
+            <hr />
 
             {props.selectedNode && props.nodePodLogs && (
                 <NodeLogs node={props.selectedNode} podLogs={props.nodePodLogs} />
diff --git a/webview-ui/src/TCPDump/CaptureFilters.tsx b/webview-ui/src/TCPDump/CaptureFilters.tsx
index b8aee0235..3998b0aab 100644
--- a/webview-ui/src/TCPDump/CaptureFilters.tsx
+++ b/webview-ui/src/TCPDump/CaptureFilters.tsx
@@ -180,7 +180,7 @@ export function CaptureFilters(props: CaptureFiltersProps) {
             <input
                 type="text"
                 id="pcap-filter-string-input"
-                className={styles.control}
+                className={styles.pcapFilterInput}
                 value={props.nodeState.currentCaptureFilters.pcapFilterString || ""}
                 onInput={handlePcapFilterStringChange}
             />
diff --git a/webview-ui/src/TCPDump/TcpDump.module.css b/webview-ui/src/TCPDump/TcpDump.module.css
index 99518972b..42424224f 100644
--- a/webview-ui/src/TCPDump/TcpDump.module.css
+++ b/webview-ui/src/TCPDump/TcpDump.module.css
@@ -68,3 +68,7 @@ table.capturelist td {
 button span {
     margin-right: 0.5rem;
 }
+
+.pcapFilterInput {
+    width: 27rem;
+}
diff --git a/webview-ui/src/TCPDump/filterScenarios/SpecificPodFilters.tsx b/webview-ui/src/TCPDump/filterScenarios/SpecificPodFilters.tsx
index 7ca7da1cd..90426f7b7 100644
--- a/webview-ui/src/TCPDump/filterScenarios/SpecificPodFilters.tsx
+++ b/webview-ui/src/TCPDump/filterScenarios/SpecificPodFilters.tsx
@@ -5,9 +5,10 @@ import { Lazy, isLoaded, newLoading } from "../../utilities/lazy";
 import styles from "../TcpDump.module.css";
 import { FilterPod, NodeName } from "../../../../src/webview-contract/webviewDefinitions/tcpDump";
 import { EventHandlerFunc, loadAllNodes, loadFilterPods } from "../state/dataLoading";
-import { FormEvent, useEffect } from "react";
+import { useEffect } from "react";
 import { getOrThrow } from "../../utilities/array";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import { CustomDropdown } from "../../components/CustomDropdown";
+import { CustomDropdownOption } from "../../components/CustomDropdownOption";
 
 export interface SpecificPodFiltersProps {
     captureNode: NodeName;
@@ -32,9 +33,9 @@ export function SpecificPodFilters(props: SpecificPodFiltersProps) {
         props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
     }
 
-    function handlePacketDirectionChange(e: Event | FormEvent<HTMLElement>) {
-        const elem = e.target as HTMLInputElement;
-        const packetDirection = elem.value as SingleEndpointPacketDirection;
+    function handlePacketDirectionChange(value: string) {
+        // const elem = e.target as HTMLInputElement;
+        const packetDirection = value as SingleEndpointPacketDirection;
         props.eventHandlers.onSetCaptureScenarioFilters({
             node: props.captureNode,
             scenario: "SpecificPod",
@@ -67,18 +68,20 @@ export function SpecificPodFilters(props: SpecificPodFiltersProps) {
             <label htmlFor="packet-direction-input" className={styles.label}>
                 Packet Direction
             </label>
-            <VSCodeDropdown
+            <CustomDropdown
                 className={styles.controlDropdown}
                 id="packet-direction-input"
                 value={props.filter.packetDirection}
                 onChange={handlePacketDirectionChange}
             >
                 {Object.keys(packetDirectionLabels).map((d) => (
-                    <VSCodeOption key={d} value={d}>
-                        {packetDirectionLabels[d as SingleEndpointPacketDirection]}
-                    </VSCodeOption>
+                    <CustomDropdownOption
+                        key={d}
+                        value={d}
+                        label={packetDirectionLabels[d as SingleEndpointPacketDirection]}
+                    />
                 ))}
-            </VSCodeDropdown>
+            </CustomDropdown>
         </>
     );
 }
diff --git a/webview-ui/src/TCPDump/filterScenarios/TwoPodsFilters.tsx b/webview-ui/src/TCPDump/filterScenarios/TwoPodsFilters.tsx
index 70456cc23..cb8b937b7 100644
--- a/webview-ui/src/TCPDump/filterScenarios/TwoPodsFilters.tsx
+++ b/webview-ui/src/TCPDump/filterScenarios/TwoPodsFilters.tsx
@@ -6,8 +6,9 @@ import styles from "../TcpDump.module.css";
 import { FilterPod, NodeName } from "../../../../src/webview-contract/webviewDefinitions/tcpDump";
 import { EventHandlerFunc, loadAllNodes, loadFilterPods } from "../state/dataLoading";
 import { getOrThrow } from "../../utilities/array";
-import { FormEvent, useEffect } from "react";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import { useEffect } from "react";
+import { CustomDropdown } from "../../components/CustomDropdown";
+import { CustomDropdownOption } from "../../components/CustomDropdownOption";
 
 export interface TwoPodsFiltersProps {
     captureNode: NodeName;
@@ -64,9 +65,9 @@ export function TwoPodsFilters(props: TwoPodsFiltersProps) {
         props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
     }
 
-    function handlePacketDirectionChange(e: Event | FormEvent<HTMLElement>) {
-        const elem = e.target as HTMLInputElement;
-        const packetDirection = elem.value as DualEndpointPacketDirection;
+    function handlePacketDirectionChange(value: string) {
+        // const elem = e.target as HTMLInputElement;
+        const packetDirection = value as DualEndpointPacketDirection;
         props.eventHandlers.onSetCaptureScenarioFilters({
             node: props.captureNode,
             scenario: "TwoPods",
@@ -137,18 +138,20 @@ export function TwoPodsFilters(props: TwoPodsFiltersProps) {
             <label htmlFor="packet-direction-input" className={styles.label}>
                 Packet Direction
             </label>
-            <VSCodeDropdown
+            <CustomDropdown
                 className={styles.controlDropdown}
                 id="packet-direction-input"
                 value={props.filter.packetDirection}
                 onChange={handlePacketDirectionChange}
             >
                 {Object.keys(packetDirectionLabels).map((d) => (
-                    <VSCodeOption key={d} value={d}>
-                        {packetDirectionLabels[d as DualEndpointPacketDirection]}
-                    </VSCodeOption>
+                    <CustomDropdownOption
+                        key={d}
+                        value={d}
+                        label={packetDirectionLabels[d as DualEndpointPacketDirection]}
+                    />
                 ))}
-            </VSCodeDropdown>
+            </CustomDropdown>
         </>
     );
 }
diff --git a/webview-ui/src/components/CustomDropdown.module.css b/webview-ui/src/components/CustomDropdown.module.css
new file mode 100644
index 000000000..62f2adaae
--- /dev/null
+++ b/webview-ui/src/components/CustomDropdown.module.css
@@ -0,0 +1,95 @@
+.control {
+    width: 100%;
+    padding: 8px;
+    font-size: 14px;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.dropdownButton {
+    width: 100%;
+    cursor: pointer;
+    text-align: left;
+    height: calc(var(--input-height) * 1px);
+    color: var(--input-foreground);
+    background-color: var(--input-background);
+    padding: 0px 2.2rem 0px 9px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    font-family: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: 1px solid var(--vscode-dropdown-border);
+}
+
+.dropdownButton:hover {
+    background-color: var(--input-background);
+    border: 1px solid var(--vscode-dropdown-border);
+}
+
+.dropdownButton:disabled {
+    cursor: not-allowed;
+    background-color: var(--input-background);
+}
+
+.dropdownButton:focus {
+    border: 1px solid var(--vscode-focusBorder);
+}
+
+.dropdownMenu {
+    position: absolute;
+    width: 100%;
+    background-color: var(--input-background);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    max-height: 10rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border: 1px solid var(--vscode-focusBorder);
+    border-radius: 2px;
+}
+
+.dropUp {
+    bottom: 100%;
+    top: auto;
+    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.2);
+    border-radius: 2px 2px 2px 2px;
+}
+
+.dropdownOption {
+    cursor: pointer;
+    background-color: var(--input-background);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 9px;
+    padding: 2px 5px 2px 5px;
+}
+
+.dropdownOption:hover {
+    background-color: var(--vscode-list-hoverBackground);
+}
+
+.dropdownOption:active {
+    background-color: var(--vscode-list-activeSelectionBackground);
+}
+
+.highlightedOption {
+    background-color: var(--vscode-list-hoverBackground);
+}
+
+.arrowIcon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
diff --git a/webview-ui/src/components/CustomDropdown.tsx b/webview-ui/src/components/CustomDropdown.tsx
new file mode 100644
index 000000000..0daeae728
--- /dev/null
+++ b/webview-ui/src/components/CustomDropdown.tsx
@@ -0,0 +1,242 @@
+import React, {
+    useState,
+    useEffect,
+    useRef,
+    ReactNode,
+    ReactElement,
+    KeyboardEvent,
+    MouseEvent as ReactMouseEvent,
+} from "react";
+import styles from "./CustomDropdown.module.css";
+
+interface CustomDropdownProps {
+    id?: string;
+    value?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    children?: ReactNode;
+    className?: string;
+}
+
+function isReactElement(child: ReactNode): child is ReactElement<{
+    value: string;
+    label: string;
+    onClick?: (value: string) => void;
+    id?: string;
+    className?: string;
+}> {
+    return React.isValidElement(child);
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const CustomDropdown: React.FC<CustomDropdownProps> = ({
+    id,
+    value,
+    disabled,
+    onChange,
+    children,
+    className,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropUp, setDropUp] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    // tracks the currently typed search term
+    const [searchTerm, setSearchTerm] = useState("");
+    const searchTimeout = useRef<number | undefined>(undefined);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLUListElement>(null);
+
+    // handle toggling of dropdown menu
+    const handleToggle = (event: ReactMouseEvent<HTMLButtonElement>) => {
+        // prevents conflicting default behaviors
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled) {
+            const childrenArray = React.Children.toArray(children).filter(isReactElement);
+            const selectedIndex = childrenArray.findIndex((child) => child.props.value === value);
+            setHighlightedIndex(selectedIndex !== -1 ? selectedIndex : 0);
+            setIsOpen(!isOpen);
+        }
+    };
+
+    // handle selection of dropdown option
+    const handleOptionClick = (optionValue: string) => {
+        onChange(optionValue);
+        setIsOpen(false);
+    };
+
+    // handle all other clicks outside the dropdown
+    const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+            setIsOpen(false);
+        }
+    };
+
+    // Cleanup the search timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+        };
+    }, []);
+
+    // handling all key inputs
+    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+        // if key is alphanumeric, update the search term
+        if (event.key.length === 1 && /^[a-z0-9]$/i.test(event.key)) {
+            const newSearchTerm = searchTerm + event.key.toLowerCase();
+            setSearchTerm(newSearchTerm);
+
+            // if a search timeout is already set, clear it
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+            // this gives the user 500ms to type the next character
+            searchTimeout.current = window.setTimeout(() => {
+                setSearchTerm("");
+            }, 500);
+
+            const childrenArray = React.Children.toArray(children).filter(isReactElement);
+            // matching for the first element that starts with the search term
+            const matchIndex = childrenArray.findIndex((child) =>
+                child.props.label.toLowerCase().startsWith(newSearchTerm),
+            );
+
+            // if match is found, update the highlighted index
+            if (matchIndex !== -1) {
+                if (isOpen) {
+                    setHighlightedIndex(matchIndex);
+                    // scrolls the matched element into view
+                    menuRef.current?.children[matchIndex]?.scrollIntoView({ block: "nearest" });
+                } else {
+                    // If dropdown is closed, update the selected value immediately
+                    onChange(childrenArray[matchIndex].props.value);
+                }
+                event.preventDefault();
+            }
+            return;
+        }
+
+        // if dropdown is closed, open it and prevent default behavior
+        if (!isOpen) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                setIsOpen(true);
+                event.preventDefault();
+            }
+            return;
+        }
+
+        // handling key inputs on open dropdown menu
+        switch (event.key) {
+            case "ArrowDown":
+                setHighlightedIndex((prevIndex) => {
+                    const newIndex = (prevIndex + 1) % React.Children.count(children);
+                    menuRef.current?.children[newIndex]?.scrollIntoView({ block: "nearest" });
+                    return newIndex;
+                });
+                event.preventDefault();
+                break;
+            case "ArrowUp":
+                setHighlightedIndex((prevIndex) => {
+                    const count = React.Children.count(children);
+                    const newIndex = (prevIndex - 1 + count) % count;
+                    menuRef.current?.children[newIndex]?.scrollIntoView({ block: "nearest" });
+                    return newIndex;
+                });
+                event.preventDefault();
+                break;
+            case "Enter": {
+                const childrenArray = React.Children.toArray(children).filter(isReactElement);
+                const selectedChild = childrenArray[highlightedIndex] as ReactElement<{
+                    value: string;
+                }>;
+                handleOptionClick(selectedChild.props.value);
+                event.preventDefault();
+                break;
+            }
+            case "Escape":
+                setIsOpen(false);
+                event.preventDefault();
+                break;
+        }
+    };
+
+    // handle clicks outside the dropdown
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside as EventListener);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside as EventListener);
+        };
+    }, []);
+
+    // handle dropdown menu positioning
+    useEffect(() => {
+        if (isOpen && dropdownRef.current && menuRef.current) {
+            const dropdownRect = dropdownRef.current.getBoundingClientRect();
+            const menuHeight = menuRef.current.offsetHeight;
+            const viewportHeight = window.innerHeight;
+
+            if (dropdownRect.bottom + menuHeight > viewportHeight) {
+                setDropUp(true);
+            } else {
+                setDropUp(false);
+            }
+        }
+    }, [isOpen]);
+
+    const childrenArray = React.Children.toArray(children).filter(isReactElement);
+    // updates visible button label based on highlighted index
+    const buttonLabel =
+        isOpen && childrenArray[highlightedIndex]
+            ? childrenArray[highlightedIndex].props.label
+            : childrenArray.find((child) => child.props.value === value)?.props.label || "Select";
+
+    // body of the dropdown component
+    return (
+        <div className={`${styles.dropdown} ${className}`} ref={dropdownRef}>
+            <button
+                id={id}
+                className={styles.dropdownButton}
+                onClick={handleToggle}
+                onKeyDown={handleKeyDown}
+                disabled={disabled}
+                aria-haspopup="listbox"
+                aria-expanded={isOpen}
+            >
+                {buttonLabel}
+                <svg
+                    className={styles.arrowIcon}
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z"
+                    ></path>
+                </svg>
+            </button>
+            {isOpen && (
+                <ul
+                    className={`${styles.dropdownMenu} ${dropUp ? styles.dropUp : ""}`}
+                    ref={menuRef}
+                    role="listbox"
+                    aria-activedescendant={`${id}-option-${highlightedIndex}`}
+                >
+                    {React.Children.map(children, (child, index) =>
+                        isReactElement(child)
+                            ? React.cloneElement(child, {
+                                  onClick: () => handleOptionClick(child.props.value),
+                                  id: `${id}-option-${index}`,
+                                  className: index === highlightedIndex ? styles.highlightedOption : "",
+                              })
+                            : child,
+                    )}
+                </ul>
+            )}
+        </div>
+    );
+};
diff --git a/webview-ui/src/components/CustomDropdownOption.tsx b/webview-ui/src/components/CustomDropdownOption.tsx
new file mode 100644
index 000000000..d8b27e4b6
--- /dev/null
+++ b/webview-ui/src/components/CustomDropdownOption.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./CustomDropdown.module.css";
+
+interface CustomDropdownOptionProps {
+    id?: string;
+    value: string;
+    label: string;
+    className?: string;
+    onClick?: (value: string) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const CustomDropdownOption: React.FC<CustomDropdownOptionProps> = ({ id, value, label, className, onClick }) => {
+    const handleClick = () => {
+        if (onClick) {
+            onClick(value);
+        }
+    };
+
+    return (
+        <li id={id} className={`${styles.dropdownOption} ${className}`} onClick={handleClick}>
+            {label}
+        </li>
+    );
+};
diff --git a/webview-ui/src/components/NodeSelector.tsx b/webview-ui/src/components/NodeSelector.tsx
index ffdaee7e6..4b3a7f224 100644
--- a/webview-ui/src/components/NodeSelector.tsx
+++ b/webview-ui/src/components/NodeSelector.tsx
@@ -1,5 +1,6 @@
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
-import { FormEvent } from "react";
+import { CustomDropdown } from "./CustomDropdown";
+import { CustomDropdownOption } from "./CustomDropdownOption";
+import { useState } from "react";
 
 export interface NodeSelectorProps {
     nodes: string[];
@@ -10,20 +11,19 @@ export interface NodeSelectorProps {
 }
 
 export function NodeSelector(props: NodeSelectorProps) {
-    function handleNodeChange(e: Event | FormEvent<HTMLElement>) {
-        const elem = e.target as HTMLInputElement;
-        const node = elem.value || null;
+    const [selectedNode, setSelectedNode] = useState<string>("");
+
+    function handleNodeChange(node: string) {
+        setSelectedNode(node);
         props.onNodeChanged(node);
     }
 
     return (
-        <VSCodeDropdown id={props.id} className={props.className} required={props.required} onChange={handleNodeChange}>
-            <VSCodeOption value="">Select</VSCodeOption>
+        <CustomDropdown id={props.id} value={selectedNode} className={props.className} onChange={handleNodeChange}>
+            <CustomDropdownOption value="" label="Select" />
             {props.nodes.map((node) => (
-                <VSCodeOption key={node} value={node}>
-                    {node}
-                </VSCodeOption>
+                <CustomDropdownOption key={node} value={node} label={node} />
             ))}
-        </VSCodeDropdown>
+        </CustomDropdown>
     );
 }
diff --git a/webview-ui/src/components/ResourceSelector.tsx b/webview-ui/src/components/ResourceSelector.tsx
index 80d7f743e..aba9e48a5 100644
--- a/webview-ui/src/components/ResourceSelector.tsx
+++ b/webview-ui/src/components/ResourceSelector.tsx
@@ -1,6 +1,7 @@
-import { FormEvent } from "react";
 import { Lazy, asLazy, isLoaded, isLoading, isNotLoaded } from "../utilities/lazy";
-import { VSCodeDropdown, VSCodeOption, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { CustomDropdown } from "./CustomDropdown";
+import { CustomDropdownOption } from "./CustomDropdownOption";
 
 export interface ResourceSelectorProps<TResource> {
     resources: Lazy<TResource[]> | TResource[];
@@ -15,12 +16,9 @@ export interface ResourceSelectorProps<TResource> {
 export function ResourceSelector<TResource>(props: ResourceSelectorProps<TResource>) {
     const resources = asLazy(props.resources);
 
-    function handleChange(e: Event | FormEvent<HTMLElement>) {
-        const elem = e.target as HTMLInputElement;
+    function handleChange(value: string) {
         const resource =
-            elem.value && isLoaded(resources)
-                ? resources.value.find((r) => props.valueGetter(r) === elem.value) || null
-                : null;
+            value && isLoaded(resources) ? resources.value.find((r) => props.valueGetter(r) === value) || null : null;
         props.onSelect(resource);
     }
 
@@ -29,22 +27,25 @@ export function ResourceSelector<TResource>(props: ResourceSelectorProps<TResour
     return (
         <>
             {isLoading(resources) && <VSCodeProgressRing style={{ height: "1rem" }} />}
-            {isNotLoaded(resources) && <VSCodeDropdown className={props.className} disabled={true} id={props.id} />}
+            {isNotLoaded(resources) && (
+                <CustomDropdown
+                    className={props.className}
+                    disabled={true}
+                    id={props.id}
+                    onChange={() => {}}
+                ></CustomDropdown>
+            )}
             {isLoaded(resources) && (
-                <VSCodeDropdown className={props.className} id={props.id} value={selectedValue} onChange={handleChange}>
-                    <VSCodeOption value="" selected={selectedValue === ""}>
-                        Select
-                    </VSCodeOption>
+                <CustomDropdown className={props.className} id={props.id} value={selectedValue} onChange={handleChange}>
+                    <CustomDropdownOption value="" label="Select" />
                     {resources.value.map((r) => (
-                        <VSCodeOption
+                        <CustomDropdownOption
                             key={props.valueGetter(r)}
                             value={props.valueGetter(r)}
-                            selected={selectedValue === props.valueGetter(r)}
-                        >
-                            {props.labelGetter(r)}
-                        </VSCodeOption>
+                            label={props.labelGetter(r)}
+                        />
                     ))}
-                </VSCodeDropdown>
+                </CustomDropdown>
             )}
         </>
     );