diff --git a/webview-ui/src/AttachAcrToCluster/AttachAcrToCluster.tsx b/webview-ui/src/AttachAcrToCluster/AttachAcrToCluster.tsx
index 759c05e8b..3c446f9b9 100644
--- a/webview-ui/src/AttachAcrToCluster/AttachAcrToCluster.tsx
+++ b/webview-ui/src/AttachAcrToCluster/AttachAcrToCluster.tsx
@@ -18,7 +18,6 @@ import {
 import { AttachAcrToClusterState, stateUpdater, vscode } from "./state/state";
 import { distinct } from "../utilities/array";
 import { ResourceSelector } from "../components/ResourceSelector";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { faLink, faLinkSlash } from "@fortawesome/free-solid-svg-icons";
 import { AcrRoleState } from "./state/stateTypes";
 import { InlineAction, InlineActionProps, makeFixAction, makeInlineActionProps } from "../components/InlineAction";
@@ -96,16 +95,16 @@ export function AttachAcrToCluster(initialState: InitialState) {
                 <p className={styles.fullWidth}>
                     Select a cluster and Azure Container Registry (ACR) to attach. For more information on attaching an
                     ACR to a cluster, see{" "}
-                    <VSCodeLink href="https://learn.microsoft.com/en-us/azure/aks/cluster-container-registry-integration?tabs=azure-cli#configure-acr-integration-for-an-existing-aks-cluster">
+                    <a href="https://learn.microsoft.com/en-us/azure/aks/cluster-container-registry-integration?tabs=azure-cli#configure-acr-integration-for-an-existing-aks-cluster">
                         Configure ACR integration for an existing AKS cluster
-                    </VSCodeLink>
+                    </a>
                     .
                 </p>
                 <p className={styles.fullWidth}>
                     This operation assigns the{" "}
-                    <VSCodeLink href="https://learn.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#acrpull">
+                    <a href="https://learn.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#acrpull">
                         AcrPull
-                    </VSCodeLink>{" "}
+                    </a>{" "}
                     role to the Microsoft Entra ID managed identity associated with your AKS cluster.
                 </p>
 
diff --git a/webview-ui/src/AutomatedDeployments/AutomatedDeployments.tsx b/webview-ui/src/AutomatedDeployments/AutomatedDeployments.tsx
index c03d69ceb..269a1667c 100644
--- a/webview-ui/src/AutomatedDeployments/AutomatedDeployments.tsx
+++ b/webview-ui/src/AutomatedDeployments/AutomatedDeployments.tsx
@@ -1,6 +1,5 @@
 //import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/automatedDeployments";
-//import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 //import { faFolder } from "@fortawesome/free-regular-svg-icons";
 
 import {
@@ -26,16 +25,6 @@ import {
     valid,
 } from "../utilities/validation";
 import { ResourceSelector } from "../components/ResourceSelector";
-import {
-    VSCodeButton,
-    //VSCodeButton,
-    //VSCodeLink,
-    //VSCodeRadio,
-    //VSCodeRadioGroup,
-    VSCodeTextField,
-    //VSCodeDropdown,
-    //VSCodeOption,
-} from "@vscode/webview-ui-toolkit/react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -152,7 +141,8 @@ export function AutomatedDeployments(initialState: InitialState) {
                         Workflow name *
                     </label>
 
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="workflow-name-input"
                         value={orDefault(state.selectedWorkflowName, "")}
                         className={styles.control}
@@ -218,12 +208,12 @@ export function AutomatedDeployments(initialState: InitialState) {
                         onSelect={(g) => console.log("Selected Resource Group:", g)}
                     />
 
-                    <VSCodeButton
+                    <button
                         className={styles.sideControl}
                         onClick={() => eventHandlers.onSetIsNewResourceGroupDialogShown(true)}
                     >
                         Create New Resource Group
-                    </VSCodeButton>
+                    </button>
 
                     {state.isNewResourceGroupDialogShown && (
                         <CreateResourceGroupDialog
@@ -253,9 +243,9 @@ export function AutomatedDeployments(initialState: InitialState) {
             </form>
 
             <div className={styles.buttonContainer}>
-                <VSCodeButton type="submit" onClick={handleCreateWorkflowClick}>
+                <button type="submit" onClick={handleCreateWorkflowClick}>
                     Create DevHub Workflow
-                </VSCodeButton>
+                </button>
             </div>
         </>
     );
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..ca80c1dcf 100644
--- a/webview-ui/src/AzureServiceOperator/Inputs.tsx
+++ b/webview-ui/src/AzureServiceOperator/Inputs.tsx
@@ -1,10 +1,4 @@
-import {
-    VSCodeButton,
-    VSCodeDropdown,
-    VSCodeLink,
-    VSCodeOption,
-    VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
 import styles from "./AzureServiceOperator.module.css";
 import { ASOState, EventDef, InstallStepStatus } from "./helpers/state";
 import { EventHandlers } from "../utilities/state";
@@ -74,15 +68,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 +85,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 +103,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,9 +115,7 @@ 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}>
@@ -143,9 +135,9 @@ export function Inputs(props: InputsProps) {
                             </VSCodeOption>
                         ))}
                     </VSCodeDropdown>
-                    <VSCodeButton disabled={!canStartInstalling} type="submit">
+                    <button disabled={!canStartInstalling} type="submit">
                         Install
-                    </VSCodeButton>
+                    </button>
                 </div>
             )}
         </form>
diff --git a/webview-ui/src/ClusterProperties/AgentPoolDisplay.tsx b/webview-ui/src/ClusterProperties/AgentPoolDisplay.tsx
index 5b6c46500..946387c8f 100644
--- a/webview-ui/src/ClusterProperties/AgentPoolDisplay.tsx
+++ b/webview-ui/src/ClusterProperties/AgentPoolDisplay.tsx
@@ -1,6 +1,5 @@
 import styles from "./ClusterProperties.module.css";
 import { AgentPoolProfileInfo, ClusterInfo } from "../../../src/webview-contract/webviewDefinitions/clusterProperties";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { EventDef, vscode } from "./state";
 import { EventHandlers } from "../utilities/state";
 
@@ -32,13 +31,13 @@ export function AgentPoolDisplay(props: AgentPoolDisplayProps) {
                 {showAbortButton && (
                     <>
                         &nbsp;
-                        <VSCodeButton
+                        <button
                             disabled={props.clusterOperationRequested}
                             onClick={() => handleAbortClick(props.profileInfo.name)}
-                            appearance="secondary"
+                            className="secondary-button"
                         >
                             Abort
-                        </VSCodeButton>
+                        </button>
                     </>
                 )}
             </dd>
diff --git a/webview-ui/src/ClusterProperties/ClusterDisplay.tsx b/webview-ui/src/ClusterProperties/ClusterDisplay.tsx
index 1e557182d..6ae328b0f 100644
--- a/webview-ui/src/ClusterProperties/ClusterDisplay.tsx
+++ b/webview-ui/src/ClusterProperties/ClusterDisplay.tsx
@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { ClusterInfo } from "../../../src/webview-contract/webviewDefinitions/clusterProperties";
 import { EventHandlers } from "../utilities/state";
 import styles from "./ClusterProperties.module.css";
@@ -73,25 +72,25 @@ export function ClusterDisplay(props: ClusterDisplayProps) {
                     {showAbortButton && (
                         <>
                             &nbsp;
-                            <VSCodeButton
+                            <button
                                 disabled={props.clusterOperationRequested}
                                 onClick={() => handleAbortClick()}
-                                appearance="secondary"
+                                className="secondary-button"
                             >
                                 Abort
-                            </VSCodeButton>
+                            </button>
                         </>
                     )}
                     {showReconcileButton && (
                         <>
                             &nbsp;
-                            <VSCodeButton
+                            <button
                                 disabled={props.clusterOperationRequested}
                                 onClick={() => handleReconcileClick()}
-                                appearance="secondary"
+                                className="secondary-button"
                             >
                                 Reconcile
-                            </VSCodeButton>
+                            </button>
                         </>
                     )}
                 </div>
@@ -111,31 +110,29 @@ export function ClusterDisplay(props: ClusterDisplayProps) {
                         It is important that you don&#39;t repeatedly start/stop your cluster. Repeatedly
                         starting/stopping your cluster may result in errors. Once your cluster is stopped, you should
                         wait 15-30 minutes before starting it up again. &nbsp;
-                        <VSCodeLink href="https://docs.microsoft.com/en-au/azure/aks/start-stop-cluster?tabs=azure-cli#start-an-aks-cluster">
+                        <a href="https://docs.microsoft.com/en-au/azure/aks/start-stop-cluster?tabs=azure-cli#start-an-aks-cluster">
                             Learn more
-                        </VSCodeLink>
+                        </a>
                     </span>
                 </span>
                 <div className={styles.buttonDiv}>
                     {startStopState === "Started" && (
-                        <VSCodeButton
+                        <button
                             disabled={props.clusterOperationRequested}
                             onClick={handleStopCluster}
-                            className={styles.controlButton}
-                            appearance="secondary"
+                            className={`${styles.controlButton} secondary-button`}
                         >
                             Stop Cluster
-                        </VSCodeButton>
+                        </button>
                     )}
                     {startStopState === "Stopped" && (
-                        <VSCodeButton
+                        <button
                             disabled={props.clusterOperationRequested}
                             onClick={handleStartCluster}
-                            className={styles.controlButton}
-                            appearance="secondary"
+                            className={`${styles.controlButton} secondary-button`}
                         >
                             Start Cluster
-                        </VSCodeButton>
+                        </button>
                     )}
                     {(startStopState === "Starting" || startStopState === "Stopping") && (
                         <span>{`Cluster is in ${startStopState} state`}</span>
diff --git a/webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx b/webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx
index 8da6ac810..138c0b68d 100644
--- a/webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx
+++ b/webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx
@@ -1,4 +1,3 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { ClusterInfo } from "../../../src/webview-contract/webviewDefinitions/clusterProperties";
 import styles from "./ClusterProperties.module.css";
 
@@ -42,9 +41,9 @@ export function ClusterDisplayToolTip(props: ClusterDisplayToolTipProps) {
                     <tfoot>
                         <tr>
                             <td colSpan={3} className={styles.textLeftAlign}>
-                                <VSCodeLink href="https://learn.microsoft.com/en-us/azure/aks/supported-kubernetes-versions?tabs=azure-cli#aks-kubernetes-release-calendar">
+                                <a href="https://learn.microsoft.com/en-us/azure/aks/supported-kubernetes-versions?tabs=azure-cli#aks-kubernetes-release-calendar">
                                     Learn more
-                                </VSCodeLink>
+                                </a>
                             </td>
                         </tr>
                     </tfoot>
diff --git a/webview-ui/src/CreateCluster/CreateCluster.tsx b/webview-ui/src/CreateCluster/CreateCluster.tsx
index 0c2fa4d26..539611294 100644
--- a/webview-ui/src/CreateCluster/CreateCluster.tsx
+++ b/webview-ui/src/CreateCluster/CreateCluster.tsx
@@ -3,7 +3,7 @@ import { CreateClusterInput } from "./CreateClusterInput";
 import { Success } from "./Success";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/createCluster";
 import { Stage, stateUpdater, vscode } from "./helpers/state";
-import { VSCodeLink, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { useStateManagement } from "../utilities/state";
 
 export function CreateCluster(initialState: InitialState) {
@@ -45,8 +45,8 @@ export function CreateCluster(initialState: InitialState) {
                         </h3>
                         {state.deploymentPortalUrl && (
                             <p>
-                                Click <VSCodeLink href={state.deploymentPortalUrl}>here</VSCodeLink> to view the
-                                deployment in the Azure Portal.
+                                Click <a href={state.deploymentPortalUrl}>here</a> to view the deployment in the Azure
+                                Portal.
                             </p>
                         )}
 
diff --git a/webview-ui/src/CreateCluster/CreateClusterInput.tsx b/webview-ui/src/CreateCluster/CreateClusterInput.tsx
index f5d232e10..7fee7a644 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 { VSCodeButton, VSCodeDropdown, VSCodeOption, VSCodeTextField } 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 {
@@ -164,9 +164,9 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                         )}
                     </VSCodeDropdown>
 
-                    <VSCodeButton className={styles.sideControl} onClick={() => setIsNewResourceGroupDialogShown(true)}>
+                    <button className={styles.sideControl} onClick={() => setIsNewResourceGroupDialogShown(true)}>
                         Create New
-                    </VSCodeButton>
+                    </button>
                     {hasMessage(existingResourceGroup) && (
                         <span className={styles.validationMessage}>
                             <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
@@ -177,7 +177,8 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                     <label htmlFor="name-input" className={styles.label}>
                         Cluster Name*
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="name-input"
                         value={isValueSet(name) ? name.value : ""}
                         className={`${styles.longControl} ${styles.validatable}`}
@@ -216,7 +217,7 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                 </div>
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit">Create</VSCodeButton>
+                    <button type="submit">Create</button>
                 </div>
             </form>
 
diff --git a/webview-ui/src/CreateCluster/CreateResourceGroup.tsx b/webview-ui/src/CreateCluster/CreateResourceGroup.tsx
index 0d4a99443..f7d36f25b 100644
--- a/webview-ui/src/CreateCluster/CreateResourceGroup.tsx
+++ b/webview-ui/src/CreateCluster/CreateResourceGroup.tsx
@@ -1,6 +1,5 @@
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { FormEvent, useState } from "react";
 import { Dialog } from "../components/Dialog";
 import { Validatable, hasMessage, invalid, isValid, isValueSet, unset, valid } from "../utilities/validation";
@@ -54,7 +53,8 @@ export function CreateResourceGroupDialog(props: CreateResourceGroupDialogProps)
                     <label htmlFor="rg-name-input" className={styles.label}>
                         Name*
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="rg-name-input"
                         value={isValueSet(name) ? name.value : ""}
                         className={`${styles.longControl} ${styles.validatable}`}
@@ -70,8 +70,8 @@ export function CreateResourceGroupDialog(props: CreateResourceGroupDialogProps)
                 </div>
 
                 <div className={styles.buttonContainer} style={{ justifyContent: "flex-end" }}>
-                    <VSCodeButton type="submit">Create</VSCodeButton>
-                    <VSCodeButton onClick={props.onCancel}>Cancel</VSCodeButton>
+                    <button type="submit">Create</button>
+                    <button onClick={props.onCancel}>Cancel</button>
                 </div>
             </form>
         </Dialog>
diff --git a/webview-ui/src/CreateCluster/Success.tsx b/webview-ui/src/CreateCluster/Success.tsx
index dd5f7bc71..5d84887bf 100644
--- a/webview-ui/src/CreateCluster/Success.tsx
+++ b/webview-ui/src/CreateCluster/Success.tsx
@@ -1,5 +1,3 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
-
 interface SuccessProps {
     portalClusterUrl: string;
     name: string;
@@ -10,8 +8,7 @@ export function Success(props: SuccessProps) {
         <>
             <h3>Cluster {props.name} was created successfully</h3>
             <p>
-                Click <VSCodeLink href={props.portalClusterUrl}>here</VSCodeLink> to view your cluster in the Azure
-                Portal.
+                Click <a href={props.portalClusterUrl}>here</a> to view your cluster in the Azure Portal.
             </p>
         </>
     );
diff --git a/webview-ui/src/CreateFleet/CreateFleet.tsx b/webview-ui/src/CreateFleet/CreateFleet.tsx
index a2164c4f2..c3c211473 100644
--- a/webview-ui/src/CreateFleet/CreateFleet.tsx
+++ b/webview-ui/src/CreateFleet/CreateFleet.tsx
@@ -3,7 +3,7 @@ import { InitialState } from "../../../src/webview-contract/webviewDefinitions/c
 import { CreateFleetInput } from "./CreateFleetInput";
 import { useStateManagement } from "../utilities/state";
 import { Stage, stateUpdater, vscode } from "./helpers/state";
-import { VSCodeLink, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 
 export function CreateFleet(initialState: InitialState) {
     const { state, eventHandlers } = useStateManagement(stateUpdater, initialState, vscode);
@@ -60,8 +60,8 @@ export function CreateFleet(initialState: InitialState) {
                     <>
                         <h3>Fleet {state.createParams!.name} was created successfully</h3>
                         <p>
-                            Click <VSCodeLink href={state.createdFleet?.portalUrl}>here</VSCodeLink> to view your fleet
-                            in the Azure Portal.
+                            Click <a href={state.createdFleet?.portalUrl}>here</a> to view your fleet in the Azure
+                            Portal.
                         </p>
                     </>
                 );
diff --git a/webview-ui/src/CreateFleet/CreateFleetInput.tsx b/webview-ui/src/CreateFleet/CreateFleetInput.tsx
index 862688425..c74442bb3 100644
--- a/webview-ui/src/CreateFleet/CreateFleetInput.tsx
+++ b/webview-ui/src/CreateFleet/CreateFleetInput.tsx
@@ -5,7 +5,7 @@ import {
     ResourceGroup,
     ToVsCodeMsgDef,
 } from "../../../src/webview-contract/webviewDefinitions/createFleet";
-import { VSCodeButton, VSCodeDropdown, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
 import {
     hasMessage,
     invalid,
@@ -133,7 +133,8 @@ export function CreateFleetInput(props: CreateFleetInputProps) {
                 </label>
 
                 <label className={styles.label}>Fleet Name*</label>
-                <VSCodeTextField
+                <input
+                    type="text"
                     id="name-input"
                     value={isValueSet(fleetName) ? fleetName.value : ""}
                     className={`${styles.longControl} ${styles.validatable}`}
@@ -210,7 +211,7 @@ export function CreateFleetInput(props: CreateFleetInputProps) {
             ></CreateFleetModeInput>
 
             <div className={styles.buttonContainer}>
-                <VSCodeButton type="submit">Create</VSCodeButton>
+                <button type="submit">Create</button>
             </div>
         </form>
     );
diff --git a/webview-ui/src/CreateFleet/CreateFleetModeInput.tsx b/webview-ui/src/CreateFleet/CreateFleetModeInput.tsx
index cf731cb72..aed3ccf83 100644
--- a/webview-ui/src/CreateFleet/CreateFleetModeInput.tsx
+++ b/webview-ui/src/CreateFleet/CreateFleetModeInput.tsx
@@ -1,7 +1,6 @@
 import { FormEvent } from "react";
 import { HubMode } from "../../../src/webview-contract/webviewDefinitions/createFleet";
 import { hasMessage, invalid, isValueSet, valid, Validatable } from "../utilities/validation";
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import styles from "./CreateFleet.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -79,7 +78,8 @@ export function CreateFleetModeInput(props: CreateFleetInputProps) {
                 {props.hubMode === HubMode.With && (
                     <div className={styles.inputContainer}>
                         <label className={styles.label}>DNS name prefix*</label>
-                        <VSCodeTextField
+                        <input
+                            type="text"
                             id="dns-input"
                             value={isValueSet(props.dnsPrefix) ? props.dnsPrefix.value : ""}
                             className={`${styles.longControl} ${styles.validatable}`}
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/Draft/Draft.module.css b/webview-ui/src/Draft/Draft.module.css
index 6f4396519..a5fd24d61 100644
--- a/webview-ui/src/Draft/Draft.module.css
+++ b/webview-ui/src/Draft/Draft.module.css
@@ -47,6 +47,10 @@
     color: var(--vscode-textLink-foreground);
 }
 
+.linkColor {
+    color: var(--vscode-textLink-foreground);
+}
+
 .buttonContainer {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -102,3 +106,11 @@ ul.existingFileList > li.removable {
 .nextStepsContainer h3 {
     margin-top: 0;
 }
+
+.radioLabel {
+    margin-left: 0.62rem;
+}
+
+.radioLine {
+    margin-bottom: 0.5rem;
+}
diff --git a/webview-ui/src/Draft/DraftDeployment/DraftDeployment.tsx b/webview-ui/src/Draft/DraftDeployment/DraftDeployment.tsx
index 3a7737020..2616da960 100644
--- a/webview-ui/src/Draft/DraftDeployment/DraftDeployment.tsx
+++ b/webview-ui/src/Draft/DraftDeployment/DraftDeployment.tsx
@@ -32,13 +32,6 @@ import { Lazy, map as lazyMap } from "../../utilities/lazy";
 import { ResourceSelector } from "../../components/ResourceSelector";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import {
-    VSCodeButton,
-    VSCodeLink,
-    VSCodeRadio,
-    VSCodeRadioGroup,
-    VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
 import { faFolder } from "@fortawesome/free-regular-svg-icons";
 import { distinct } from "../../utilities/array";
 import { TextWithDropdown } from "../../components/TextWithDropdown";
@@ -231,7 +224,6 @@ export function DraftDeployment(initialState: InitialState) {
         });
     }
 
-    const [manifests, helm, kustomize]: DeploymentSpecType[] = ["manifests", "helm", "kustomize"];
     const existingFiles = getExistingPaths(state.selectedDeploymentSpecType, state.existingFiles);
 
     const acrImageTooltipMessage =
@@ -372,7 +364,8 @@ export function DraftDeployment(initialState: InitialState) {
                             )}
 
                             {state.selectedAcrRepository.value.isNew && (
-                                <VSCodeTextField
+                                <input
+                                    type="text"
                                     id="acr-image-tag-input"
                                     className={styles.control}
                                     value={
@@ -436,19 +429,20 @@ export function DraftDeployment(initialState: InitialState) {
                     <label htmlFor="location-input" className={styles.label}>
                         Location *
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="location-input"
                         readOnly
                         value={`.${state.workspaceConfig.pathSeparator}${state.selectedLocation.value}`}
                         className={styles.control}
                     />
                     <div className={styles.controlSupplement}>
-                        <VSCodeButton appearance="icon" onClick={handleChooseLocationClick}>
+                        <button className="choose-location-button" onClick={handleChooseLocationClick}>
                             <span className={styles.iconButton}>
                                 <FontAwesomeIcon icon={faFolder} />
                                 &nbsp;Choose location
                             </span>
-                        </VSCodeButton>
+                        </button>
                     </div>
                     {hasMessage(state.selectedLocation) && (
                         <span className={styles.validationMessage}>
@@ -460,22 +454,45 @@ export function DraftDeployment(initialState: InitialState) {
                     <label htmlFor="deployment-type-input" className={styles.label}>
                         Deployment options *
                     </label>
-                    <VSCodeRadioGroup
-                        id="deployment-type-input"
-                        className={styles.control}
-                        value={state.selectedDeploymentSpecType}
-                        orientation="vertical"
-                        onChange={handleDeploymentSpecTypeChange}
-                    >
-                        <VSCodeRadio value={manifests}>Manifests</VSCodeRadio>
-                        <VSCodeRadio value={helm}>Helm</VSCodeRadio>
-                        <VSCodeRadio value={kustomize}>Kustomize</VSCodeRadio>
-                    </VSCodeRadioGroup>
+                    <div id="deployment-type-input" className={styles.control}>
+                        <div className={styles.radioLine}>
+                            <input
+                                type="radio"
+                                name="deployment-type"
+                                value="manifests"
+                                checked={state.selectedDeploymentSpecType === "manifests"}
+                                onChange={handleDeploymentSpecTypeChange}
+                            />
+
+                            <label className={styles.radioLabel}>Manifests</label>
+                        </div>
+                        <div className={styles.radioLine}>
+                            <input
+                                type="radio"
+                                name="deployment-type"
+                                value="helm"
+                                checked={state.selectedDeploymentSpecType === "helm"}
+                                onChange={handleDeploymentSpecTypeChange}
+                            />
+                            <label className={styles.radioLabel}>Helm</label>
+                        </div>
+                        <div className={styles.radioLine}>
+                            <input
+                                type="radio"
+                                name="deployment-type"
+                                value="kustomize"
+                                checked={state.selectedDeploymentSpecType === "kustomize"}
+                                onChange={handleDeploymentSpecTypeChange}
+                            />
+                            <label className={styles.radioLabel}>Kustomize</label>
+                        </div>
+                    </div>
 
                     <label htmlFor="app-name-input" className={styles.label}>
                         Application name *
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="app-name-input"
                         value={orDefault(state.selectedApplicationName, "")}
                         className={styles.control}
@@ -554,9 +571,9 @@ export function DraftDeployment(initialState: InitialState) {
                 </fieldset>
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
+                    <button type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
                         Create
-                    </VSCodeButton>
+                    </button>
                 </div>
 
                 {existingFiles.length > 0 && (
@@ -565,7 +582,7 @@ export function DraftDeployment(initialState: InitialState) {
                         <ul className={styles.existingFileList}>
                             {existingFiles.map((path, i) => (
                                 <li key={i}>
-                                    <VSCodeLink
+                                    <a
                                         href="#"
                                         onClick={(e) => {
                                             e.preventDefault();
@@ -573,7 +590,7 @@ export function DraftDeployment(initialState: InitialState) {
                                         }}
                                     >
                                         {path}
-                                    </VSCodeLink>
+                                    </a>
                                 </li>
                             ))}
                         </ul>
@@ -588,9 +605,9 @@ export function DraftDeployment(initialState: InitialState) {
 
                             <p>
                                 To generate a GitHub Action, you can run{" "}
-                                <VSCodeLink href="#" onClick={handleDraftWorkflowClick}>
+                                <a href="#" onClick={handleDraftWorkflowClick}>
                                     Automated Deployments: Create a GitHub workflow
-                                </VSCodeLink>
+                                </a>
                                 .
                             </p>
                         </div>
diff --git a/webview-ui/src/Draft/DraftDockerfile/DraftDockerfile.tsx b/webview-ui/src/Draft/DraftDockerfile/DraftDockerfile.tsx
index 100cc808b..dec15fc5b 100644
--- a/webview-ui/src/Draft/DraftDockerfile/DraftDockerfile.tsx
+++ b/webview-ui/src/Draft/DraftDockerfile/DraftDockerfile.tsx
@@ -4,7 +4,6 @@ import { ResourceSelector } from "../../components/ResourceSelector";
 import { useStateManagement } from "../../utilities/state";
 import styles from "../Draft.module.css";
 import { stateUpdater, vscode } from "./state";
-import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -146,19 +145,20 @@ export function DraftDockerfile(initialState: InitialState) {
                         <i className={`${styles.inlineIcon} codicon codicon-info`} />
                     </span>
                 </label>
-                <VSCodeTextField
+                <input
+                    type="text"
                     id="location-input"
                     readOnly
                     value={`.${state.workspaceConfig.pathSeparator}${state.selectedLocation.value}`}
                     className={styles.control}
                 />
                 <div className={styles.controlSupplement}>
-                    <VSCodeButton appearance="icon" onClick={handleChooseLocationClick}>
+                    <button className="choose-location-button" onClick={handleChooseLocationClick}>
                         <span className={styles.iconButton}>
                             <FontAwesomeIcon icon={faFolder} />
                             &nbsp;Choose location
                         </span>
-                    </VSCodeButton>
+                    </button>
                 </div>
                 {hasMessage(state.selectedLocation) && (
                     <span className={styles.validationMessage}>
@@ -243,15 +243,15 @@ export function DraftDockerfile(initialState: InitialState) {
 
             <div className={styles.buttonContainer}>
                 {state.status !== "Created" && (
-                    <VSCodeButton type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
+                    <button type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
                         Create
-                    </VSCodeButton>
+                    </button>
                 )}
 
                 {state.existingFiles.map((path, i) => (
-                    <VSCodeButton key={i} appearance="secondary" onClick={() => vscode.postOpenFileRequest(path)}>
+                    <button key={i} className="secondary-button" onClick={() => vscode.postOpenFileRequest(path)}>
                         Open {path}
-                    </VSCodeButton>
+                    </button>
                 ))}
             </div>
 
@@ -263,18 +263,18 @@ export function DraftDockerfile(initialState: InitialState) {
 
                         <p>
                             If you still need to generate the appropriate deployment files, you can run{" "}
-                            <VSCodeLink href="#" onClick={handleDraftDeploymentClick}>
+                            <a href="#" onClick={handleDraftDeploymentClick}>
                                 Automated Deployments: Create a deployment
-                            </VSCodeLink>{" "}
+                            </a>{" "}
                             to easily create the appropriate files.
                         </p>
 
                         <p>
                             If you already have all the files you need to deploy and would like to generate a GitHub
                             Action, you can run{" "}
-                            <VSCodeLink href="#" onClick={handleDraftWorkflowClick}>
+                            <a href="#" onClick={handleDraftWorkflowClick}>
                                 Automated Deployments: Create a GitHub workflow
-                            </VSCodeLink>
+                            </a>
                             .
                         </p>
                     </div>
diff --git a/webview-ui/src/Draft/DraftWorkflow/DraftWorkflow.tsx b/webview-ui/src/Draft/DraftWorkflow/DraftWorkflow.tsx
index aa13f33d1..4744b846d 100644
--- a/webview-ui/src/Draft/DraftWorkflow/DraftWorkflow.tsx
+++ b/webview-ui/src/Draft/DraftWorkflow/DraftWorkflow.tsx
@@ -40,13 +40,6 @@ import { useStateManagement } from "../../utilities/state";
 import styles from "../Draft.module.css";
 import { Maybe, isNothing, just, nothing } from "../../utilities/maybe";
 import { ResourceSelector } from "../../components/ResourceSelector";
-import {
-    VSCodeButton,
-    VSCodeLink,
-    VSCodeRadio,
-    VSCodeRadioGroup,
-    VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTimesCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { faFolder } from "@fortawesome/free-regular-svg-icons";
@@ -385,7 +378,6 @@ export function DraftWorkflow(initialState: InitialState) {
         vscode.postCreateWorkflowRequest(createParams.value);
     }
 
-    const [manifests, helm]: DeploymentSpecType[] = ["manifests", "helm"];
     const existingFile = getExistingFile(state, state.selectedWorkflowName);
 
     const gitHubRepoTooltipMessage =
@@ -401,13 +393,13 @@ export function DraftWorkflow(initialState: InitialState) {
                 <p className={styles.fullWidth}>
                     Generate a workflow to deploy to Azure Kubernetes Service (AKS). Before running this command, make
                     sure you have created a Dockerfile and Deployment. You can do this using the{" "}
-                    <VSCodeLink href="#" onClick={handleDraftDockerfileClick}>
+                    <a href="#" onClick={handleDraftDockerfileClick}>
                         Automated Deployments: Create a Dockerfile
-                    </VSCodeLink>{" "}
+                    </a>{" "}
                     and{" "}
-                    <VSCodeLink href="#" onClick={handleDraftDeploymentClick}>
+                    <a href="#" onClick={handleDraftDeploymentClick}>
                         Automated Deployments: Create a Deployment
-                    </VSCodeLink>{" "}
+                    </a>{" "}
                     commands.
                 </p>
 
@@ -416,7 +408,8 @@ export function DraftWorkflow(initialState: InitialState) {
                     <label htmlFor="workflow-name-input" className={styles.label}>
                         Workflow name *
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="workflow-name-input"
                         value={orDefault(state.selectedWorkflowName, "")}
                         className={styles.control}
@@ -493,7 +486,8 @@ export function DraftWorkflow(initialState: InitialState) {
                     <label htmlFor="dockerfile-input" className={styles.label}>
                         Dockerfile *
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="dockerfile-input"
                         value={
                             isValueSet(state.selectedDockerfilePath)
@@ -504,12 +498,12 @@ export function DraftWorkflow(initialState: InitialState) {
                         className={styles.control}
                     />
                     <div className={styles.controlSupplement}>
-                        <VSCodeButton appearance="icon" onClick={handleChooseDockerfileClick}>
+                        <button className="choose-location-button" onClick={handleChooseDockerfileClick}>
                             <span className={styles.iconButton}>
                                 <FontAwesomeIcon icon={faFolder} />
                                 &nbsp;Choose Dockerfile
                             </span>
-                        </VSCodeButton>
+                        </button>
                     </div>
                     {hasMessage(state.selectedDockerfilePath) && (
                         <span className={styles.validationMessage}>
@@ -521,19 +515,20 @@ export function DraftWorkflow(initialState: InitialState) {
                     <label htmlFor="build-context-input" className={styles.label}>
                         Build context *
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="build-context-input"
                         value={`.${state.workspaceConfig.pathSeparator}${state.selectedBuildContextPath}`}
                         readOnly
                         className={styles.control}
                     />
                     <div className={styles.controlSupplement}>
-                        <VSCodeButton appearance="icon" onClick={handleChooseBuildContextClick}>
+                        <button className="choose-location-button" onClick={handleChooseBuildContextClick}>
                             <span className={styles.iconButton}>
                                 <FontAwesomeIcon icon={faFolder} />
                                 &nbsp;Choose build context
                             </span>
-                        </VSCodeButton>
+                        </button>
                     </div>
 
                     {isValid(state.selectedSubscription) && (
@@ -685,16 +680,30 @@ export function DraftWorkflow(initialState: InitialState) {
                     <label htmlFor="deployment-type-input" className={styles.label}>
                         Type
                     </label>
-                    <VSCodeRadioGroup
-                        id="deployment-type-input"
-                        className={styles.control}
-                        value={state.selectedDeploymentSpecType}
-                        orientation="vertical"
-                        onChange={handleDeploymentSpecTypeChange}
-                    >
-                        <VSCodeRadio value={manifests}>Manifests</VSCodeRadio>
-                        <VSCodeRadio value={helm}>Helm</VSCodeRadio>
-                    </VSCodeRadioGroup>
+
+                    <div id="deployment-type-input" className={styles.control}>
+                        <div className={styles.radioLine}>
+                            <input
+                                type="radio"
+                                name="deployment-type"
+                                value="manifests"
+                                checked={state.selectedDeploymentSpecType === "manifests"}
+                                onChange={handleDeploymentSpecTypeChange}
+                            />
+
+                            <label className={styles.radioLabel}>Manifests</label>
+                        </div>
+                        <div className={styles.radioLine}>
+                            <input
+                                type="radio"
+                                name="deployment-type"
+                                value="helm"
+                                checked={state.selectedDeploymentSpecType === "helm"}
+                                onChange={handleDeploymentSpecTypeChange}
+                            />
+                            <label className={styles.radioLabel}>Helm</label>
+                        </div>
+                    </div>
 
                     {state.selectedDeploymentSpecType === "manifests" && (
                         <>
@@ -702,18 +711,18 @@ export function DraftWorkflow(initialState: InitialState) {
                                 Manifest file paths *
                             </label>
                             <div className={styles.control}>
-                                <VSCodeButton appearance="icon" onClick={handleChooseManifestPathsClick}>
+                                <button className="choose-location-button" onClick={handleChooseManifestPathsClick}>
                                     <span className={styles.iconButton}>
                                         <FontAwesomeIcon icon={faFolder} />
                                         &nbsp;Choose manifest file paths
                                     </span>
-                                </VSCodeButton>
+                                </button>
                             </div>
                             {isValid(state.manifestsParamsState.selectedManifestPaths) && (
                                 <ul className={`${styles.existingFileList} ${styles.control}`} id="manifest-paths">
                                     {state.manifestsParamsState.selectedManifestPaths.value.map((path, i) => (
                                         <li key={i} className={styles.removable}>
-                                            <VSCodeLink
+                                            <a
                                                 href="#"
                                                 onClick={(e) => {
                                                     e.preventDefault();
@@ -721,17 +730,15 @@ export function DraftWorkflow(initialState: InitialState) {
                                                 }}
                                             >
                                                 {path}
-                                            </VSCodeLink>
-                                            <VSCodeButton
-                                                appearance="icon"
+                                            </a>
+                                            <button
+                                                className="icon-button"
                                                 onClick={() => handleDeleteManifestPathClick(path)}
                                                 aria-label="Remove"
                                                 title="Remove"
                                             >
-                                                <span className={styles.iconButton}>
-                                                    <FontAwesomeIcon icon={faTrash} />
-                                                </span>
-                                            </VSCodeButton>
+                                                <FontAwesomeIcon className={styles.linkColor} icon={faTrash} />
+                                            </button>
                                         </li>
                                     ))}
                                 </ul>
@@ -750,7 +757,8 @@ export function DraftWorkflow(initialState: InitialState) {
                             <label htmlFor="chart-path-input" className={styles.label}>
                                 Chart path *
                             </label>
-                            <VSCodeTextField
+                            <input
+                                type="text"
                                 id="chart-path-input"
                                 value={
                                     isValid(state.helmParamsState.selectedChartPath)
@@ -761,12 +769,12 @@ export function DraftWorkflow(initialState: InitialState) {
                                 className={styles.control}
                             />
                             <div className={styles.controlSupplement}>
-                                <VSCodeButton appearance="icon" onClick={handleChooseHelmChartFolderClick}>
+                                <button className="choose-location-button" onClick={handleChooseHelmChartFolderClick}>
                                     <span className={styles.iconButton}>
                                         <FontAwesomeIcon icon={faFolder} />
                                         &nbsp;Choose Helm chart folder
                                     </span>
-                                </VSCodeButton>
+                                </button>
                             </div>
                             {hasMessage(state.helmParamsState.selectedChartPath) && (
                                 <span className={styles.validationMessage}>
@@ -778,7 +786,8 @@ export function DraftWorkflow(initialState: InitialState) {
                             <label htmlFor="values-path-input" className={styles.label}>
                                 Values.yaml path *
                             </label>
-                            <VSCodeTextField
+                            <input
+                                type="text"
                                 id="values-path-input"
                                 value={
                                     isValid(state.helmParamsState.selectedValuesYamlPath)
@@ -789,12 +798,12 @@ export function DraftWorkflow(initialState: InitialState) {
                                 className={styles.control}
                             />
                             <div className={styles.controlSupplement}>
-                                <VSCodeButton appearance="icon" onClick={handleChooseHelmValuesFileClick}>
+                                <button className="choose-location-button" onClick={handleChooseHelmValuesFileClick}>
                                     <span className={styles.iconButton}>
                                         <FontAwesomeIcon icon={faFolder} />
                                         &nbsp;Choose values.yaml file
                                     </span>
-                                </VSCodeButton>
+                                </button>
                             </div>
                             {hasMessage(state.helmParamsState.selectedValuesYamlPath) && (
                                 <span className={styles.validationMessage}>
@@ -807,7 +816,8 @@ export function DraftWorkflow(initialState: InitialState) {
                             {state.helmParamsState.selectedOverrides.map((o, i) => (
                                 <>
                                     <div key={i} className={styles.control} style={{ display: "flex" }}>
-                                        <VSCodeTextField
+                                        <input
+                                            type="text"
                                             id={`override-key-input-${i}`}
                                             className={`${styles.longControl} ${styles.validatable}`}
                                             onBlur={(e) => handleOverrideKeyChange(e, o)}
@@ -815,23 +825,22 @@ export function DraftWorkflow(initialState: InitialState) {
                                             value={orDefault(o.key, "")}
                                         />
                                         =
-                                        <VSCodeTextField
+                                        <input
+                                            type="text"
                                             id={`override-value-input-${i}`}
                                             className={`${styles.longControl} ${styles.validatable}`}
                                             onBlur={(e) => handleOverrideValueChange(e, o)}
                                             onInput={(e) => handleOverrideValueChange(e, o)}
                                             value={orDefault(o.value, "")}
                                         />
-                                        <VSCodeButton
-                                            appearance="icon"
+                                        <button
+                                            className="icon-button"
                                             onClick={() => handleDeleteOverrideClick(o)}
                                             aria-label="Remove"
                                             title="Remove"
                                         >
-                                            <span className={styles.iconButton}>
-                                                <FontAwesomeIcon icon={faTrash} />
-                                            </span>
-                                        </VSCodeButton>
+                                            <FontAwesomeIcon className={styles.linkColor} icon={faTrash} />
+                                        </button>
                                     </div>
                                     {hasMessage(o.key) && (
                                         <span className={styles.validationMessage}>
@@ -854,12 +863,12 @@ export function DraftWorkflow(initialState: InitialState) {
                                         : styles.controlSupplement
                                 }
                             >
-                                <VSCodeButton appearance="icon" onClick={handleAddHelmOverrideClick}>
+                                <button className="choose-location-button" onClick={handleAddHelmOverrideClick}>
                                     <span className={styles.iconButton}>
                                         <FontAwesomeIcon icon={faPlus} />
                                         &nbsp;Add override
                                     </span>
-                                </VSCodeButton>
+                                </button>
                             </div>
                         </>
                     )}
@@ -867,15 +876,15 @@ export function DraftWorkflow(initialState: InitialState) {
 
                 <div className={styles.buttonContainer}>
                     {state.status !== "Created" && (
-                        <VSCodeButton type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
+                        <button type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
                             Create
-                        </VSCodeButton>
+                        </button>
                     )}
 
                     {existingFile && (
-                        <VSCodeButton appearance="secondary" onClick={() => vscode.postOpenFileRequest(existingFile)}>
+                        <button className="secondary-button" onClick={() => vscode.postOpenFileRequest(existingFile)}>
                             Open Workflow File
-                        </VSCodeButton>
+                        </button>
                     )}
                 </div>
 
@@ -890,9 +899,9 @@ export function DraftWorkflow(initialState: InitialState) {
                                 <ul>
                                     <li>
                                         The ACR {isValueSet(state.selectedAcr) ? `(${state.selectedAcr.value})` : ""}{" "}
-                                        <VSCodeLink href="#" onClick={handleLaunchAttachAcrToClusterClick}>
+                                        <a href="#" onClick={handleLaunchAttachAcrToClusterClick}>
                                             is attached
-                                        </VSCodeLink>{" "}
+                                        </a>{" "}
                                         to the cluster{" "}
                                         {isValueSet(state.selectedCluster) ? `(${state.selectedCluster.value})` : ""}.
                                         You can follow for guidance.
@@ -902,9 +911,9 @@ export function DraftWorkflow(initialState: InitialState) {
                                         {isValueSet(state.selectedGitHubRepo)
                                             ? `(${state.selectedGitHubRepo.value.gitHubRepoOwner}/${state.selectedGitHubRepo.value.gitHubRepoName})`
                                             : ""}{" "}
-                                        <VSCodeLink href="https://learn.microsoft.com/en-us/azure/developer/github/connect-from-azure">
+                                        <a href="https://learn.microsoft.com/en-us/azure/developer/github/connect-from-azure">
                                             is configured
-                                        </VSCodeLink>{" "}
+                                        </a>{" "}
                                         to access the ACR and cluster.
                                     </li>
                                 </ul>
diff --git a/webview-ui/src/InspektorGadget/InspektorGadget.module.css b/webview-ui/src/InspektorGadget/InspektorGadget.module.css
index 10671784b..00b729b8d 100644
--- a/webview-ui/src/InspektorGadget/InspektorGadget.module.css
+++ b/webview-ui/src/InspektorGadget/InspektorGadget.module.css
@@ -33,6 +33,7 @@ table.tracelist th {
 
 table.tracelist td {
     padding: 5px;
+    text-align: left;
 }
 
 table.tracelist td > * {
@@ -127,3 +128,31 @@ ul.hierarchyList li * {
 .panelContent .main {
     grid-column: 2 / 3;
 }
+
+.displayCheckbox {
+    display: inline;
+}
+
+.displayLabel {
+    display: inline;
+    position: relative;
+    top: -0.3rem;
+    margin-left: 0.1rem;
+}
+
+.tableData {
+    text-align: left;
+}
+
+.checkBoxLabel {
+    position: relative;
+    top: -0.05rem;
+}
+
+.radioLabel {
+    margin-left: 0.62rem;
+}
+
+.radioLine {
+    margin-bottom: 0.3rem;
+}
diff --git a/webview-ui/src/InspektorGadget/InspektorGadget.tsx b/webview-ui/src/InspektorGadget/InspektorGadget.tsx
index 4a95cdd4d..9ef7a2087 100644
--- a/webview-ui/src/InspektorGadget/InspektorGadget.tsx
+++ b/webview-ui/src/InspektorGadget/InspektorGadget.tsx
@@ -1,4 +1,4 @@
-import { VSCodeLink, VSCodePanelTab, VSCodePanelView, VSCodePanels } from "@vscode/webview-ui-toolkit/react";
+import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from "@vscode/webview-ui-toolkit/react";
 import { Overview } from "./Overview";
 import { Traces, TracesProps } from "./Traces";
 import styles from "./InspektorGadget.module.css";
@@ -53,7 +53,7 @@ export function InspektorGadget(initialState: InitialState) {
             <h2>Inspektor Gadget</h2>
             <p>
                 Inspektor Gadget provides a wide selection of BPF tools to dig deep into your Kubernetes cluster.
-                <VSCodeLink href="https://www.inspektor-gadget.io/">&nbsp;Learn more</VSCodeLink>
+                <a href="https://www.inspektor-gadget.io/">&nbsp;Learn more</a>
             </p>
 
             <VSCodePanels aria-label="Inspektory Gadget functions">
diff --git a/webview-ui/src/InspektorGadget/NewTraceDialog.tsx b/webview-ui/src/InspektorGadget/NewTraceDialog.tsx
index 0a212c4d7..27c3d8232 100644
--- a/webview-ui/src/InspektorGadget/NewTraceDialog.tsx
+++ b/webview-ui/src/InspektorGadget/NewTraceDialog.tsx
@@ -1,4 +1,4 @@
-import { VSCodeButton, VSCodeCheckbox, VSCodeDivider, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import styles from "./InspektorGadget.module.css";
 import { Dialog } from "../components/Dialog";
 import { FormEvent, useEffect, useState, ChangeEvent as InputChangeEvent } from "react";
@@ -146,7 +146,7 @@ export function NewTraceDialog(props: NewTraceDialogProps) {
             <h2>New Trace</h2>
 
             <form onSubmit={handleSubmit}>
-                <VSCodeDivider />
+                <hr />
 
                 <div className={styles.inputContainer}>
                     <label htmlFor="gadget-dropdown" className={styles.label}>
@@ -227,12 +227,14 @@ export function NewTraceDialog(props: NewTraceDialogProps) {
                     )}
 
                     {extraProperties.threadExclusionAllowed && (
-                        <VSCodeCheckbox
-                            checked={traceConfig.excludeThreads === false}
-                            onChange={handleDisplayThreadsChange}
-                        >
-                            Display threads
-                        </VSCodeCheckbox>
+                        <div>
+                            <input
+                                className={styles.displayCheckbox}
+                                type="checkbox"
+                                onChange={handleDisplayThreadsChange}
+                            />
+                            <label className={styles.displayLabel}>Display Threads</label>
+                        </div>
                     )}
 
                     {extraProperties.requiresTimeout && (
@@ -254,13 +256,13 @@ export function NewTraceDialog(props: NewTraceDialogProps) {
                     )}
                 </div>
 
-                <VSCodeDivider />
+                <hr />
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit" disabled={!canCreate()}>
+                    <button type="submit" disabled={!canCreate()}>
                         Ok
-                    </VSCodeButton>
-                    <VSCodeButton onClick={props.onCancel}>Cancel</VSCodeButton>
+                    </button>
+                    <button onClick={props.onCancel}>Cancel</button>
                 </div>
             </form>
         </Dialog>
diff --git a/webview-ui/src/InspektorGadget/Overview.tsx b/webview-ui/src/InspektorGadget/Overview.tsx
index 4cd430b9b..915c2fffe 100644
--- a/webview-ui/src/InspektorGadget/Overview.tsx
+++ b/webview-ui/src/InspektorGadget/Overview.tsx
@@ -1,4 +1,3 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEraser, faRocket } from "@fortawesome/free-solid-svg-icons";
 import styles from "./InspektorGadget.module.css";
@@ -35,17 +34,17 @@ export function Overview(props: OverviewProps) {
                         <dd>{props.version.server}</dd>
                     </dl>
                     <br />
-                    <VSCodeButton onClick={handleUndeploy}>
+                    <button onClick={handleUndeploy}>
                         <FontAwesomeIcon icon={faEraser} />
                         &nbsp;Undeploy
-                    </VSCodeButton>
+                    </button>
                 </>
             )}
             {props.version && !props.version.server && (
-                <VSCodeButton onClick={handleDeploy}>
+                <button onClick={handleDeploy}>
                     <FontAwesomeIcon icon={faRocket} />
                     &nbsp;Deploy
-                </VSCodeButton>
+                </button>
             )}
         </>
     );
diff --git a/webview-ui/src/InspektorGadget/ResourceSelector.tsx b/webview-ui/src/InspektorGadget/ResourceSelector.tsx
index af36fbc7a..7de74cea3 100644
--- a/webview-ui/src/InspektorGadget/ResourceSelector.tsx
+++ b/webview-ui/src/InspektorGadget/ResourceSelector.tsx
@@ -4,7 +4,7 @@ import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons
 import styles from "./InspektorGadget.module.css";
 import { NamespaceResources, PodResources } from "./helpers/clusterResources";
 import { Lazy, isLoaded, isNotLoaded, map as lazyMap, orDefault } from "../utilities/lazy";
-import { VSCodeProgressRing, VSCodeRadio } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { Lookup, asLookup, exclude, intersection } from "../utilities/array";
 import { EventHandlers } from "../utilities/state";
 import { EventDef, vscode } from "./helpers/state";
@@ -109,9 +109,14 @@ export function ResourceSelector(props: ResourceSelectorProps) {
             className={props.className ? `${props.className} ${styles.hierarchyList}` : styles.hierarchyList}
         >
             <li>
-                <VSCodeRadio onChange={handleNoResourceChange} checked={isNoResource(selectedResource)}>
-                    All
-                </VSCodeRadio>
+                <div className={styles.radioLine}>
+                    <input
+                        type="radio"
+                        onChange={handleNoResourceChange}
+                        checked={isNoResource(selectedResource)}
+                    ></input>
+                    <label className={styles.radioLabel}>All</label>
+                </div>
             </li>
             {renderNamespaceItems(props.resources, updatedStatus)}
         </ul>
@@ -125,13 +130,15 @@ export function ResourceSelector(props: ResourceSelectorProps) {
                     onClick={() => toggleNamespaceExpanded(item.name)}
                     icon={status[item.name].isExpanded ? faChevronDown : faChevronRight}
                 />
-                <VSCodeRadio
-                    className={styles.selector}
-                    onChange={(e) => handleNamespaceChange(e, item.name)}
-                    checked={isNamespaceResource(selectedResource) && selectedResource.namespace === item.name}
-                >
-                    {item.name}
-                </VSCodeRadio>
+                <div className={styles.radioLine}>
+                    <input
+                        type="radio"
+                        className={styles.selector}
+                        onChange={(e) => handleNamespaceChange(e, item.name)}
+                        checked={isNamespaceResource(selectedResource) && selectedResource.namespace === item.name}
+                    ></input>
+                    <label className={styles.radioLabel}>{item.name}</label>
+                </div>
                 {status[item.name].isExpanded && (
                     <ul className={styles.hierarchyList}>
                         {isLoaded(item.children) ? (
@@ -153,16 +160,19 @@ export function ResourceSelector(props: ResourceSelectorProps) {
                     onClick={() => togglePodExpanded(namespace, item.name)}
                     icon={status[item.name].isExpanded ? faChevronDown : faChevronRight}
                 />
-                <VSCodeRadio
-                    onChange={(e) => handlePodChange(e, namespace, item.name)}
-                    checked={
-                        isPodResource(selectedResource) &&
-                        selectedResource.namespace === namespace &&
-                        selectedResource.podName === item.name
-                    }
-                >
-                    {item.name}
-                </VSCodeRadio>
+                <div className={styles.radioLine}>
+                    <input
+                        type="radio"
+                        onChange={(e) => handlePodChange(e, namespace, item.name)}
+                        checked={
+                            isPodResource(selectedResource) &&
+                            selectedResource.namespace === namespace &&
+                            selectedResource.podName === item.name
+                        }
+                    ></input>
+
+                    <label className={styles.radioLabel}>{item.name}</label>
+                </div>
                 {status[item.name].isExpanded && (
                     <ul className={styles.hierarchyList}>
                         {isLoaded(item.children) ? (
@@ -179,17 +189,19 @@ export function ResourceSelector(props: ResourceSelectorProps) {
     function renderContainerItems(namespace: string, podName: string, containerNames: string[]) {
         return containerNames.map((c) => (
             <li key={c}>
-                <VSCodeRadio
-                    onChange={(e) => handleContainerChange(e, namespace, podName, c)}
-                    checked={
-                        isContainerResource(selectedResource) &&
-                        selectedResource.namespace === namespace &&
-                        selectedResource.podName === podName &&
-                        selectedResource.container === c
-                    }
-                >
-                    {c}
-                </VSCodeRadio>
+                <div className={styles.radioLine}>
+                    <input
+                        type="radio"
+                        onChange={(e) => handleContainerChange(e, namespace, podName, c)}
+                        checked={
+                            isContainerResource(selectedResource) &&
+                            selectedResource.namespace === namespace &&
+                            selectedResource.podName === podName &&
+                            selectedResource.container === c
+                        }
+                    ></input>
+                    <label className={styles.radioLabel}>{c}</label>
+                </div>
             </li>
         ));
     }
diff --git a/webview-ui/src/InspektorGadget/TraceItemSortSelector.tsx b/webview-ui/src/InspektorGadget/TraceItemSortSelector.tsx
index 4afc954d9..c2a7ba943 100644
--- a/webview-ui/src/InspektorGadget/TraceItemSortSelector.tsx
+++ b/webview-ui/src/InspektorGadget/TraceItemSortSelector.tsx
@@ -1,4 +1,3 @@
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { FormEvent } from "react";
 import { ItemProperty, SortSpecifier, fromSortString, toSortString } from "./helpers/gadgets/types";
 
@@ -24,13 +23,14 @@ export function TraceItemSortSelector(props: TraceItemSortSelectorProps) {
     const allowedIdentifiers = props.allProperties.map((p) => p.identifier).sort();
     const title = `Allowed properties:\n${allowedIdentifiers.join("\n")}`;
     return (
-        <VSCodeTextField
+        <input
+            type="text"
             title={title}
             id={props.id}
             className={props.className}
             required={props.required}
             value={sortString}
             onInput={handleSortStringChange}
-        ></VSCodeTextField>
+        ></input>
     );
 }
diff --git a/webview-ui/src/InspektorGadget/Traces.tsx b/webview-ui/src/InspektorGadget/Traces.tsx
index aad1ad84f..083dd71bd 100644
--- a/webview-ui/src/InspektorGadget/Traces.tsx
+++ b/webview-ui/src/InspektorGadget/Traces.tsx
@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeCheckbox, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTrashCan, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import styles from "./InspektorGadget.module.css";
@@ -35,7 +34,6 @@ export function Traces(props: TracesProps) {
     }
 
     function ignoreClick(e: Event | FormEvent<HTMLElement>) {
-        e.preventDefault();
         e.stopPropagation();
     }
 
@@ -140,13 +138,15 @@ export function Traces(props: TracesProps) {
                                 className={getTraceRowClassNames(trace.traceId)}
                             >
                                 <td>
-                                    <VSCodeCheckbox
-                                        checked={checkedTraceIds.includes(trace.traceId)}
+                                    <input
+                                        type="checkbox"
                                         onClick={ignoreClick}
                                         onChange={() => toggleCheckedTraceId(trace.traceId)}
-                                        style={{ margin: "0", paddingRight: "0.5rem" }}
+                                        style={{ margin: "0 0.5rem 0 0" }}
                                     />
-                                    {getGadgetMetadata(trace.category, trace.resource)?.name}
+                                    <span className={styles.checkBoxLabel}>
+                                        {getGadgetMetadata(trace.category, trace.resource)?.name}
+                                    </span>
                                 </td>
                                 <td>{getNamespaceText(trace.filters.namespace)}</td>
                                 <td>{trace.filters.nodeName}</td>
@@ -159,19 +159,19 @@ export function Traces(props: TracesProps) {
             )}
 
             <div className={styles.buttonContainer}>
-                <VSCodeButton onClick={handleAdd}>
+                <button onClick={handleAdd}>
                     <FontAwesomeIcon icon={faPlus} />
                     &nbsp;Add
-                </VSCodeButton>
+                </button>
                 {checkedTraceIds.length > 0 && (
-                    <VSCodeButton onClick={handleDelete}>
+                    <button onClick={handleDelete}>
                         <FontAwesomeIcon icon={faTrashCan} />
                         &nbsp;Delete
-                    </VSCodeButton>
+                    </button>
                 )}
             </div>
 
-            <VSCodeDivider />
+            <hr />
 
             {selectedTrace && (
                 <>
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/RetinaCapture/DeleteNodeExplorerDialog.tsx b/webview-ui/src/RetinaCapture/DeleteNodeExplorerDialog.tsx
index 5417bf80c..61986fdb7 100644
--- a/webview-ui/src/RetinaCapture/DeleteNodeExplorerDialog.tsx
+++ b/webview-ui/src/RetinaCapture/DeleteNodeExplorerDialog.tsx
@@ -1,4 +1,3 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { Dialog } from "../components/Dialog";
 import styles from "./RetinaCapture.module.css";
 
@@ -29,8 +28,8 @@ export function DeleteNodeExplorerDialog(props: DeleteNodeExplorerDialogProps) {
                 </div>
 
                 <div className={styles.buttonContainer} style={{ justifyContent: "flex-end" }}>
-                    <VSCodeButton onClick={handleYes}>Yes</VSCodeButton>
-                    <VSCodeButton onClick={handleNo}>No</VSCodeButton>
+                    <button onClick={handleYes}>Yes</button>
+                    <button onClick={handleNo}>No</button>
                 </div>
             </form>
         </Dialog>
diff --git a/webview-ui/src/RetinaCapture/RetinaCapture.tsx b/webview-ui/src/RetinaCapture/RetinaCapture.tsx
index 0648365e5..208d408fc 100644
--- a/webview-ui/src/RetinaCapture/RetinaCapture.tsx
+++ b/webview-ui/src/RetinaCapture/RetinaCapture.tsx
@@ -1,6 +1,5 @@
 import { faInfoCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VSCodeButton, VSCodeCheckbox, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { FormEvent, useState } from "react";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/retinaCapture";
 import { useStateManagement } from "../utilities/state";
@@ -43,44 +42,52 @@ export function RetinaCapture(initialState: InitialState) {
                 <h2>Retina Distributed Capture for {state.clusterName}</h2>
             </header>
 
-            <VSCodeDivider style={{ marginBottom: "1rem" }} />
+            <hr style={{ marginBottom: "1rem" }} />
             <div>
                 <FontAwesomeIcon icon={faInfoCircle} /> Retina capture command allows the user to capture network
                 traffic and metadata for the capture target, and then send the capture file to the location by Output
                 Configuration. More info:{" "}
                 <a href="https://retina.sh/docs/captures/cli/#output-configurationrequired">Retina Capture Command</a>
             </div>
-            <VSCodeDivider style={{ marginBottom: "1rem" }} />
+            <hr style={{ marginBottom: "1rem" }} />
             <h3>Retina Output</h3>
             <div>{state.retinaOutput}</div>
 
-            <VSCodeDivider style={{ marginTop: "1rem" }} />
+            <hr style={{ marginTop: "1rem" }} />
             <h3>Retina Distributed Capture is Successfully Completed for this Cluster</h3>
 
             <div className={styles.content}>
                 <div style={{ flexDirection: "row", width: "31.25rem" }}>
                     {state.allNodes.map((node) => (
                         <div key={node}>
-                            <VSCodeCheckbox onChange={(e) => onSelectNode(e, node)} checked={isNodeSelected(node)}>
-                                {node}
-                            </VSCodeCheckbox>
+                            <input
+                                onChange={(e) => onSelectNode(e, node)}
+                                checked={isNodeSelected(node)}
+                                type="checkbox"
+                                style={{
+                                    margin: "0rem 0.5rem 0.5rem 0",
+                                    position: "relative",
+                                    top: ".125rem",
+                                }}
+                            />
+                            <span style={{ position: "relative", top: "-.2rem" }}>{node}</span>
                         </div>
                     ))}
-                    <div style={{ display: "flex" }}>
-                        <VSCodeButton
+                    <div style={{ display: "flex", marginTop: ".5rem" }}>
+                        <button
                             type="submit"
                             style={{ marginRight: "0.625rem" }}
                             onClick={() => handleCaptureFileDownload()}
                         >
                             Download Retina Logs to Host Machine.
-                        </VSCodeButton>
+                        </button>
                         {state.isNodeExplorerPodExists && (
-                            <VSCodeButton appearance="secondary" onClick={() => handleDeleteExplorerPod()}>
-                                <span slot="start">
+                            <>
+                                <button className="secondary-button" onClick={() => handleDeleteExplorerPod()}>
                                     <FontAwesomeIcon icon={faTrash} />
-                                </span>
-                                Delete Node Explorer Pod
-                            </VSCodeButton>
+                                    &nbsp;Delete Node Explorer Pod
+                                </button>
+                            </>
                         )}
                     </div>
                 </div>
diff --git a/webview-ui/src/TCPDump/CaptureFilters.tsx b/webview-ui/src/TCPDump/CaptureFilters.tsx
index 8f25c27c9..b8aee0235 100644
--- a/webview-ui/src/TCPDump/CaptureFilters.tsx
+++ b/webview-ui/src/TCPDump/CaptureFilters.tsx
@@ -8,7 +8,6 @@ import { SpecificPodFilters } from "./filterScenarios/SpecificPodFilters";
 import { TwoPodsFilters } from "./filterScenarios/TwoPodsFilters";
 import { CaptureScenario, EventDef, NodeState, ReferenceData } from "./state";
 import { EventHandlerFunc, loadCaptureInterfaces } from "./state/dataLoading";
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import {
     ApplicationLayerProtocol,
     TransportLayerProtocol,
@@ -178,7 +177,8 @@ export function CaptureFilters(props: CaptureFiltersProps) {
             <label htmlFor="pcap-filter-string-input" className={styles.label}>
                 Pcap Filter
             </label>
-            <VSCodeTextField
+            <input
+                type="text"
                 id="pcap-filter-string-input"
                 className={styles.control}
                 value={props.nodeState.currentCaptureFilters.pcapFilterString || ""}
diff --git a/webview-ui/src/TCPDump/TcpDump.module.css b/webview-ui/src/TCPDump/TcpDump.module.css
index c4fe2d47c..99518972b 100644
--- a/webview-ui/src/TCPDump/TcpDump.module.css
+++ b/webview-ui/src/TCPDump/TcpDump.module.css
@@ -62,4 +62,9 @@ table.capturelist th {
 
 table.capturelist td {
     padding: 5px;
+    text-align: left;
+}
+
+button span {
+    margin-right: 0.5rem;
 }
diff --git a/webview-ui/src/TCPDump/TcpDump.tsx b/webview-ui/src/TCPDump/TcpDump.tsx
index c12e0c5b6..ff2276d27 100644
--- a/webview-ui/src/TCPDump/TcpDump.tsx
+++ b/webview-ui/src/TCPDump/TcpDump.tsx
@@ -1,7 +1,7 @@
 import { CaptureName, InitialState } from "../../../src/webview-contract/webviewDefinitions/tcpDump";
 import styles from "./TcpDump.module.css";
 import { useEffect } from "react";
-import { VSCodeButton, VSCodeDivider, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { useStateManagement } from "../utilities/state";
 import { CaptureStatus, NodeState, NodeStatus, TcpDumpState, stateUpdater, vscode } from "./state";
 import { NodeSelector } from "../components/NodeSelector";
@@ -93,7 +93,7 @@ export function TcpDump(initialState: InitialState) {
                 <h2>TCP Capture on {state.clusterName}</h2>
             </header>
 
-            <VSCodeDivider style={{ marginBottom: "1rem" }} />
+            <hr style={{ marginBottom: "1rem" }} />
 
             <div className={styles.content}>
                 <label htmlFor="node-dropdown" className={styles.label}>
@@ -115,7 +115,7 @@ export function TcpDump(initialState: InitialState) {
 
                 <label className={styles.label}>Debug Pod</label>
                 {hasStatus(NodeStatus.Clean, NodeStatus.CreatingDebugPod) && (
-                    <VSCodeButton
+                    <button
                         onClick={handleCreateDebugPod}
                         disabled={!hasStatus(NodeStatus.Clean)}
                         className={styles.controlButton}
@@ -131,7 +131,7 @@ export function TcpDump(initialState: InitialState) {
                             </span>
                         )}
                         Create
-                    </VSCodeButton>
+                    </button>
                 )}
                 {hasStatus(
                     NodeStatus.DebugPodRunning,
@@ -140,11 +140,10 @@ export function TcpDump(initialState: InitialState) {
                     NodeStatus.CaptureRunning,
                     NodeStatus.CaptureStopping,
                 ) && (
-                    <VSCodeButton
+                    <button
                         onClick={handleRemoveDebugPod}
                         disabled={!hasStatus(NodeStatus.DebugPodRunning)}
-                        className={styles.controlButton}
-                        appearance="secondary"
+                        className={`${styles.controlButton} secondary-button`}
                     >
                         {hasStatus(NodeStatus.DeletingDebugPod) && (
                             <span slot="start">
@@ -157,7 +156,7 @@ export function TcpDump(initialState: InitialState) {
                             </span>
                         )}
                         Delete
-                    </VSCodeButton>
+                    </button>
                 )}
 
                 {state.selectedNode &&
@@ -176,7 +175,7 @@ export function TcpDump(initialState: InitialState) {
 
                 <label className={styles.label}>Capture</label>
                 {hasStatus(NodeStatus.DebugPodRunning, NodeStatus.CaptureStarting) && (
-                    <VSCodeButton
+                    <button
                         onClick={handleStartCapture}
                         disabled={!hasStatus(NodeStatus.DebugPodRunning)}
                         className={styles.controlButton}
@@ -192,10 +191,10 @@ export function TcpDump(initialState: InitialState) {
                             </span>
                         )}
                         Start
-                    </VSCodeButton>
+                    </button>
                 )}
                 {hasStatus(NodeStatus.CaptureRunning, NodeStatus.CaptureStopping) && (
-                    <VSCodeButton
+                    <button
                         onClick={handleStopCapture}
                         disabled={!hasStatus(NodeStatus.CaptureRunning)}
                         className={styles.controlButton}
@@ -211,10 +210,10 @@ export function TcpDump(initialState: InitialState) {
                             </span>
                         )}
                         Stop
-                    </VSCodeButton>
+                    </button>
                 )}
             </div>
-            <VSCodeDivider style={{ marginTop: "1rem" }} />
+            <hr style={{ marginTop: "1rem" }} />
             <h3>Completed Captures</h3>
             {hasStatus(
                 NodeStatus.DebugPodRunning,
@@ -239,10 +238,10 @@ export function TcpDump(initialState: InitialState) {
                                     <td>{c.sizeInKB}</td>
                                     <td>
                                         {!c.downloadedFilePath && (
-                                            <VSCodeButton
+                                            <button
                                                 onClick={() => handleStartDownload(c.name)}
                                                 disabled={c.status !== CaptureStatus.Completed}
-                                                appearance="secondary"
+                                                className="secondary-button"
                                             >
                                                 {c.status === CaptureStatus.Downloading && (
                                                     <span slot="start">
@@ -255,27 +254,27 @@ export function TcpDump(initialState: InitialState) {
                                                     </span>
                                                 )}
                                                 Download
-                                            </VSCodeButton>
+                                            </button>
                                         )}
 
                                         {c.downloadedFilePath && (
                                             <div style={{ display: "flex" }}>
                                                 <span>{c.downloadedFilePath}</span>
                                                 &nbsp;
-                                                <VSCodeButton appearance="icon" title="Copy Path">
+                                                <button className="icon-button" title="Copy Path">
                                                     <FontAwesomeIcon
                                                         icon={faCopy}
                                                         onClick={() =>
                                                             handleCopyDownloadPathClick(c.downloadedFilePath!)
                                                         }
                                                     />
-                                                </VSCodeButton>
-                                                <VSCodeButton appearance="icon" title="Open Folder">
+                                                </button>
+                                                <button className="icon-button" title="Open Folder">
                                                     <FontAwesomeIcon
                                                         icon={faFolderOpen}
                                                         onClick={() => handleOpenFolderClick(c.downloadedFilePath!)}
                                                     />
-                                                </VSCodeButton>
+                                                </button>
                                             </div>
                                         )}
                                     </td>
diff --git a/webview-ui/src/components/InlineAction.tsx b/webview-ui/src/components/InlineAction.tsx
index 0210dbf88..ff3463ea4 100644
--- a/webview-ui/src/components/InlineAction.tsx
+++ b/webview-ui/src/components/InlineAction.tsx
@@ -1,7 +1,6 @@
 import { IconDefinition, faCheckCircle, faClock } from "@fortawesome/free-solid-svg-icons";
 import styles from "./InlineAction.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 
 export function makeFixAction(
     icon: IconDefinition,
@@ -60,9 +59,9 @@ export function InlineAction(props: InlineActionProps) {
             </div>
             <div className={styles.actionButtons}>
                 {props.actions.map((action, i) => (
-                    <VSCodeButton
+                    <button
                         key={i}
-                        appearance={action.isPrimary ? "primary" : "secondary"}
+                        className={action.isPrimary ? "" : "secondary-button"}
                         onClick={action.action}
                         disabled={!action.canPerformAction}
                     >
@@ -70,7 +69,7 @@ export function InlineAction(props: InlineActionProps) {
                             <FontAwesomeIcon icon={action.icon} />
                         </span>{" "}
                         {action.name}
-                    </VSCodeButton>
+                    </button>
                 ))}
             </div>
         </div>
diff --git a/webview-ui/src/components/TextWithDropdown.module.css b/webview-ui/src/components/TextWithDropdown.module.css
index dbad0529e..ac5bbf359 100644
--- a/webview-ui/src/components/TextWithDropdown.module.css
+++ b/webview-ui/src/components/TextWithDropdown.module.css
@@ -1,8 +1,3 @@
-.selectedValue {
-    display: inline; /* Prevents a small gap between text input and listbox options */
-    width: 100%;
-}
-
 .indicator {
     cursor: pointer;
     margin-right: -2px;
@@ -42,3 +37,40 @@
 .listboxItem.selected {
     background: var(--vscode-list-activeSelectionBackground);
 }
+
+/* .inputField {
+    position: absolute;
+}
+
+.dropDownButton {
+    position: relative;
+}
+
+.selectedValue {
+    width: 100%;
+    position: relative;
+} */
+
+.inputField {
+    position: relative; /* Container becomes the reference for absolute positioning */
+    width: 100%; /* Adjust as needed */
+}
+
+.selectedValue {
+    width: 100%;
+    padding-right: 1.8rem !important; /* Space for the icon so text doesn't overlap */
+    box-sizing: border-box;
+}
+.selectedValue:hover {
+    cursor: pointer;
+}
+
+.dropDownButton {
+    position: absolute;
+    right: 8px; /* Distance from the right edge (adjust as needed) */
+    top: 50%; /* Vertically center the icon */
+    transform: translateY(-50%);
+    pointer-events: none; /* Allows clicks to pass through to the input if needed */
+    /* background-color: var(--input-background); */
+    /* background-color: red; */
+}
diff --git a/webview-ui/src/components/TextWithDropdown.tsx b/webview-ui/src/components/TextWithDropdown.tsx
index b0b9b2f07..297097c34 100644
--- a/webview-ui/src/components/TextWithDropdown.tsx
+++ b/webview-ui/src/components/TextWithDropdown.tsx
@@ -1,6 +1,6 @@
 import { FormEvent, HTMLAttributes, useEffect, useRef, useState } from "react";
 import styles from "./TextWithDropdown.module.css";
-import { VSCodeProgressRing, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { Lazy, asLazy, isLoaded, isLoading, isNotLoaded, orDefault } from "../utilities/lazy";
 
 type AvailableHtmlAttributes = Pick<HTMLAttributes<HTMLElement>, "className" | "id">;
@@ -59,7 +59,9 @@ function TextOnly(props: TextOnlyProps) {
         props.onSelect(newText, true);
     }
 
-    return <VSCodeTextField className={props.className} onInput={handleTextChange} value={props.selectedItem || ""} />;
+    return (
+        <input type="text" className={props.className} onInput={handleTextChange} value={props.selectedItem || ""} />
+    );
 }
 
 type NonLazyTextWithDropdownProps = Omit<TextWithDropdownProps, "items"> & { items: string[] };
@@ -100,13 +102,6 @@ function NonLazyTextWithDropdown(props: NonLazyTextWithDropdownProps) {
         setIsExpanded(!isExpanded);
     }
 
-    function handleDropDownButtonClick(e: React.MouseEvent) {
-        // Don't propagate because the containing element (the text field) has its own click handler
-        // which will itself toggle the expanded state.
-        e.stopPropagation();
-        setIsExpanded(!isExpanded);
-    }
-
     function handleFocus() {
         // Work around the fact that focus events are fired before click events.
         // If we don't delay the expansion, the dropdown will be expanded and then immediately collapsed
@@ -204,32 +199,29 @@ function NonLazyTextWithDropdown(props: NonLazyTextWithDropdownProps) {
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
         >
-            <VSCodeTextField
-                className={styles.selectedValue}
-                onInput={handleTextChange}
-                value={inputText}
-                onClick={handleTextFieldClick}
-            >
-                <span slot="end" className={styles.indicator} onClick={handleDropDownButtonClick} tabIndex={-1}>
-                    {/* 
-                    See: 
-                    https://github.com/microsoft/vscode-webview-ui-toolkit/blob/a1f078e963969ad3f6d5932f96874f1a41cda919/src/dropdown/index.ts#L43-L57
-                    */}
-                    <svg
-                        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>
-                </span>
-            </VSCodeTextField>
+            <div className={styles.inputField}>
+                <input
+                    type="text"
+                    className={styles.selectedValue}
+                    onInput={handleTextChange}
+                    value={inputText}
+                    onClick={handleTextFieldClick}
+                ></input>
+                <svg
+                    className={styles.dropDownButton}
+                    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>
+            </div>
 
             <ol
                 className={`${styles.listbox} ${displayListbox ? "" : styles.hidden}`}
diff --git a/webview-ui/src/main.css b/webview-ui/src/main.css
index c93ec0243..e00b99b67 100644
--- a/webview-ui/src/main.css
+++ b/webview-ui/src/main.css
@@ -49,7 +49,7 @@ button:hover {
     cursor: pointer;
 }
 
-button:focus {
+button:focus-visible {
     outline: 1px solid var(--vscode-focusBorder);
     outline-offset: 2px;
 }
@@ -74,16 +74,42 @@ button:disabled {
     cursor: pointer;
 }
 
+.secondary-button:disabled {
+    background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
 .secondary-button:hover:disabled {
     opacity: 0.4;
     cursor: not-allowed;
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--vscode-button-secondaryHoverBackground);
 }
 
 .secondary-button code {
     color: var(--vscode-textPreformat-foreground);
 }
 
+.icon-button,
+.choose-location-button {
+    color: inherit;
+    background: none;
+    padding: 0rem 0.3rem 0rem 0.3rem;
+    border-radius: 5px;
+}
+.icon-button:hover,
+.choose-location-button:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.choose-location-button {
+    margin-top: 0.1rem;
+    padding: 0.15rem 0.3rem 0.15rem 0.1rem;
+}
+
+.icon-button:disabled,
+.choose-location-button:disabled {
+    background: none;
+}
+
 blockquote {
     background: var(--vscode-textBlockQuote-background);
     border-color: var(--vscode-textBlockQuote-border);
@@ -95,22 +121,64 @@ hr {
     margin: 4px 0 4px 0;
 }
 
-input,
-input[type="text"] {
+input[type="text"],
+input[type="password"] {
     height: calc(var(--input-height) * 1px);
     color: var(--input-foreground);
     background-color: var(--input-background);
-    border: 1px solid var(--input-border);
+    border: 1px solid var(--vscode-dropdown-border);
     padding: 0 9px;
     box-sizing: border-box;
     border-radius: 2px;
     font-family: inherit;
 }
 
-option:hover {
-    color: var(--vscode-list-focusForeground);
+input[type="text"]:read-only {
+    cursor: not-allowed;
+}
+
+input[type="checkbox"] {
+    width: 18.25px;
+    height: 18.25px;
     cursor: pointer;
-    background-color: var(--vscode-list-activeSelectionBackground);
+}
+
+input[type="radio"] {
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    margin: 0;
+    border: 2px solid var(--radio-border-color);
+    border-radius: 50%;
+    background-color: none;
+    outline: none;
+    position: relative;
+    top: 0.18rem;
+    color: white;
+}
+
+input[type="radio"] {
+    cursor: pointer;
+}
+
+select {
+    height: calc(var(--input-height) * 1px);
+    color: var(--input-foreground);
+    background-color: var(--input-background);
+    border: 1px solid var(--input-border);
+    padding: 0px 0px 0px 4px;
+    box-sizing: border-box;
+    font-family: inherit;
+    border-radius: 2px;
+}
+
+select:hover {
+    cursor: pointer;
+}
+
+option {
+    font-size: var(--vscode-font-size);
 }
 
 option:focus {
diff --git a/webview-ui/src/manualTest/components/FilePicker.module.css b/webview-ui/src/manualTest/components/FilePicker.module.css
index a8b2f5154..77a25b6ee 100644
--- a/webview-ui/src/manualTest/components/FilePicker.module.css
+++ b/webview-ui/src/manualTest/components/FilePicker.module.css
@@ -57,3 +57,12 @@ ul.nodeList > li > .item:hover {
     flex-direction: row;
     column-gap: 0.5rem;
 }
+
+.title {
+    margin: 0rem 0 0.5rem 0;
+}
+
+.itemSpan {
+    position: relative;
+    top: -0.1rem;
+}
diff --git a/webview-ui/src/manualTest/components/FilePicker.tsx b/webview-ui/src/manualTest/components/FilePicker.tsx
index 59335611c..db16d46b0 100644
--- a/webview-ui/src/manualTest/components/FilePicker.tsx
+++ b/webview-ui/src/manualTest/components/FilePicker.tsx
@@ -1,6 +1,5 @@
 import { FormEvent, useState } from "react";
 import { Dialog } from "../../components/Dialog";
-import { VSCodeButton, VSCodeCheckbox, VSCodeDivider, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import styles from "./FilePicker.module.css";
@@ -113,10 +112,10 @@ export function FilePicker(props: FilePickerProps) {
 
     return (
         <Dialog isShown={props.shown} onCancel={() => props.closeRequested(null)}>
-            <h2>{props.options.title}</h2>
+            <h2 className={styles.title}>{props.options.title}</h2>
 
             <form onSubmit={handleSubmit}>
-                <VSCodeDivider />
+                <hr style={{ marginBottom: "0.5rem" }} />
                 <FileSystemNodes
                     items={[props.rootDir]}
                     filters={props.options.filters || {}}
@@ -131,7 +130,8 @@ export function FilePicker(props: FilePickerProps) {
                         {isDirectory ? "Directory:" : "File:"}
                     </label>
                     {(!canSelectMany || selectedItems.length <= 1) && (
-                        <VSCodeTextField
+                        <input
+                            type="text"
                             id="filename-input"
                             className={styles.control}
                             value={selectedItems.length === 1 ? selectedItems[0].name : ""}
@@ -142,12 +142,12 @@ export function FilePicker(props: FilePickerProps) {
                 </div>
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit" disabled={isNothing(validate())}>
+                    <button type="submit" disabled={isNothing(validate())}>
                         {props.options.buttonLabel || "Select"}
-                    </VSCodeButton>
-                    <VSCodeButton appearance="secondary" onClick={() => props.closeRequested(null)}>
+                    </button>
+                    <button className="secondary-button" onClick={() => props.closeRequested(null)}>
                         Cancel
-                    </VSCodeButton>
+                    </button>
                 </div>
             </form>
         </Dialog>
@@ -235,12 +235,10 @@ function FileSystemNode(props: FileSystemNodeProps) {
     }
 
     function ignoreClick(e: Event | FormEvent<HTMLElement>) {
-        e.preventDefault();
         e.stopPropagation();
     }
 
     const isSelected = props.selectedItems.includes(props.item);
-    const itemClassNames = [styles.item, isSelected ? styles.selected : ""].filter((n) => !!n).join(" ");
 
     return (
         <>
@@ -253,14 +251,20 @@ function FileSystemNode(props: FileSystemNodeProps) {
                     />
                 )}
                 {props.canSelectMany && !isDirectory(props.item) && (
-                    <VSCodeCheckbox
+                    <input
+                        type="checkbox"
                         checked={isSelected}
                         onClick={ignoreClick}
                         onChange={() => props.handleItemSelectionChange(props.item)}
-                        style={{ margin: "0", paddingRight: "0.5rem" }}
+                        style={{
+                            margin: "0rem 0.5rem 0rem .5rem",
+                            position: "relative",
+                            top: ".125rem",
+                            display: "inline",
+                        }}
                     />
                 )}
-                <span onClick={() => props.handleItemSelectionChange(props.item)} className={itemClassNames}>
+                <span onClick={() => props.handleItemSelectionChange(props.item)} className={styles.itemSpan}>
                     {props.item.name}
                 </span>
                 {expanded && isDirectory(props.item) && (