diff --git a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
index 5aa99fe4..ca758786 100644
--- a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Field } from '../../../models';
 import { DataType } from '../../../models/DataType';
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 
 export interface IDataBlockSelectorProps {
   field: Field;
@@ -54,20 +55,20 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
   return (
     <div className='data_block__selector'>
       <h3>Block type</h3>
-      <select
+      <VSCodeDropdown
         value={selectedDataType ?? EMPTY_OPTION}
-        onChange={event => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        onChange={(event: any) => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
         style={{
           width: "100%",
           marginBottom: "1rem"
         }}>
-        <option value={EMPTY_OPTION}></option>
+        <VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
         {
           options.map((o) => (
-            <option key={o} value={o}>{o}</option>
+            <VSCodeOption key={o} value={o}>{o}</VSCodeOption>
           ))
         }
-      </select>
+      </VSCodeDropdown>
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/GlobalSettings.tsx b/src/panelWebView/components/GlobalSettings.tsx
index ddcfce9b..bcd834a2 100644
--- a/src/panelWebView/components/GlobalSettings.tsx
+++ b/src/panelWebView/components/GlobalSettings.tsx
@@ -4,8 +4,9 @@ import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { useDebounce } from '../../hooks/useDebounce';
 import { Collapsible } from './Collapsible';
-import { VsCheckbox, VsLabel } from './VscodeComponents';
+import { VsLabel } from './VscodeComponents';
 import useStartCommand from '../hooks/useStartCommand';
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 
 export interface IGlobalSettingsProps {
   settings: PanelSettings | undefined;
@@ -69,11 +70,11 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
       <Collapsible id={`${isBase ? "base_" : ""}settings`} className={`base__actions`} title="Global settings">
         <div className={`base__action`}>
           <VsLabel>Modified date</VsLabel>
-          <VsCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>Auto-update modified date</VsCheckbox>
+          <VSCodeCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>Auto-update modified date</VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VsLabel>Front Matter highlight</VsLabel>
-          <VsCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>Highlight Front Matter</VsCheckbox>
+          <VSCodeCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>Highlight Front Matter</VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VsLabel>Local preview</VsLabel>
diff --git a/src/panelWebView/components/VscodeComponents.ts b/src/panelWebView/components/VscodeComponents.ts
index 39dd67ba..cb22167b 100644
--- a/src/panelWebView/components/VscodeComponents.ts
+++ b/src/panelWebView/components/VscodeComponents.ts
@@ -8,8 +8,4 @@ export const VsTableBody = wrapWc(`vscode-table-body`);
 export const VsTableRow = wrapWc(`vscode-table-row`);
 export const VsTableCell = wrapWc(`vscode-table-cell`);
 export const VsCollapsible = wrapWc(`vscode-collapsible`);
-export const VsLabel = wrapWc(`vscode-label`);
-export const VsCheckbox = wrapWc(`vscode-checkbox`);
-
-// @vscode/webview-ui-toolkit
-// export const VsCheckbox = wrapWc(`vscode-checkbox`);
\ No newline at end of file
+export const VsLabel = wrapWc(`vscode-label`);
\ No newline at end of file
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index bd076bcc..ef242ab0 100644
--- a/src/panelWebView/index.tsx
+++ b/src/panelWebView/index.tsx
@@ -15,7 +15,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
 import '@bendera/vscode-webview-elements/dist/vscode-label.js';
-import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
+// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
 
 // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';