diff --git a/docs/third-party-licenses.json b/docs/third-party-licenses.json
index 1701814d..503d61b7 100644
--- a/docs/third-party-licenses.json
+++ b/docs/third-party-licenses.json
@@ -27,13 +27,6 @@
         "url": "https://github.com/microsoft/vscode-codicons",
         "license": "https://github.com/microsoft/vscode-codicons/blob/main/LICENSE"
     },
-    {
-        "name": "@vscode/webview-ui-toolkit",
-        "version": "1.4.0",
-        "spdx": "MIT",
-        "url": "https://github.com/microsoft/vscode-webview-ui-toolkit",
-        "license": "https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/LICENSE"
-    },
     {
         "name": "async-mutex",
         "version": "0.5.0",
diff --git a/package-lock.json b/package-lock.json
index 58b862c4..36902ea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "@lydell/node-pty": "^1.1.0",
         "@microsoft/vscode-serial-monitor-api": "^0.1.7",
         "@vscode/codicons": "^0.0.44",
-        "@vscode/webview-ui-toolkit": "^1.4.0",
         "antd": "^5.29.3",
         "async-mutex": "^0.5.0",
         "eta": "^4.5.1",
@@ -5138,47 +5137,6 @@
         "win32"
       ]
     },
-    "node_modules/@microsoft/fast-element": {
-      "version": "1.14.0",
-      "integrity": "sha512-zXvuSOzvsu8zDTy9eby8ix8VqLop2rwKRgp++ZN2kTCsoB3+QJVoaGD2T/Cyso2ViZQFXNpiNCVKfnmxBvmWkQ==",
-      "license": "MIT"
-    },
-    "node_modules/@microsoft/fast-foundation": {
-      "version": "2.50.0",
-      "integrity": "sha512-8mFYG88Xea1jZf2TI9Lm/jzZ6RWR8x29r24mGuLojNYqIR2Bl8+hnswoV6laApKdCbGMPKnsAL/O68Q0sRxeVg==",
-      "license": "MIT",
-      "dependencies": {
-        "@microsoft/fast-element": "^1.14.0",
-        "@microsoft/fast-web-utilities": "^5.4.1",
-        "tabbable": "^5.2.0",
-        "tslib": "^1.13.0"
-      }
-    },
-    "node_modules/@microsoft/fast-foundation/node_modules/tslib": {
-      "version": "1.14.1",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "license": "0BSD"
-    },
-    "node_modules/@microsoft/fast-react-wrapper": {
-      "version": "0.3.25",
-      "integrity": "sha512-jKzmk2xJV93RL/jEFXEZgBvXlKIY4N4kXy3qrjmBfFpqNi3VjY+oUTWyMnHRMC5EUhIFxD+Y1VD4u9uIPX3jQw==",
-      "license": "MIT",
-      "dependencies": {
-        "@microsoft/fast-element": "^1.14.0",
-        "@microsoft/fast-foundation": "^2.50.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0"
-      }
-    },
-    "node_modules/@microsoft/fast-web-utilities": {
-      "version": "5.4.1",
-      "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
-      "license": "MIT",
-      "dependencies": {
-        "exenv-es6": "^1.1.1"
-      }
-    },
     "node_modules/@microsoft/vscode-serial-monitor-api": {
       "version": "0.1.7",
       "integrity": "sha512-ROmxRIryoE1ZKAcrO3xS9NaUcLimihjT63b6Sh3YEQ4qZ6zC5QwysP6zUDM6W0jalQxoJuDH0hac4A8TTl5quQ==",
@@ -7191,21 +7149,6 @@
         "concat-map": "0.0.1"
       }
     },
-    "node_modules/@vscode/webview-ui-toolkit": {
-      "version": "1.4.0",
-      "integrity": "sha512-modXVHQkZLsxgmd5yoP3ptRC/G8NBDD+ob+ngPiWNQdlrH6H1xR/qgOBD85bfU3BhOB5sZzFWBwwhp9/SfoHww==",
-      "deprecated": "This package has been deprecated, https://github.com/microsoft/vscode-webview-ui-toolkit/issues/561",
-      "license": "MIT",
-      "dependencies": {
-        "@microsoft/fast-element": "^1.12.0",
-        "@microsoft/fast-foundation": "^2.49.4",
-        "@microsoft/fast-react-wrapper": "^0.3.22",
-        "tslib": "^2.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
@@ -10998,11 +10941,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/exenv-es6": {
-      "version": "1.1.1",
-      "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ==",
-      "license": "MIT"
-    },
     "node_modules/exit": {
       "version": "0.1.2",
       "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
@@ -21074,11 +21012,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/tabbable": {
-      "version": "5.3.3",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
-      "license": "MIT"
-    },
     "node_modules/table": {
       "version": "6.9.0",
       "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
diff --git a/package.json b/package.json
index 7d389cb7..c3cce2b4 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
     "@lydell/node-pty": "^1.1.0",
     "@microsoft/vscode-serial-monitor-api": "^0.1.7",
     "@vscode/codicons": "^0.0.44",
-    "@vscode/webview-ui-toolkit": "^1.4.0",
     "antd": "^5.29.3",
     "async-mutex": "^0.5.0",
     "eta": "^4.5.1",
@@ -1553,7 +1552,7 @@
       ]
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@vscode/webview-ui-toolkit|@microsoft|exenv-es6|yaml)/)"
+      "/node_modules/(?!(@microsoft|yaml)/)"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
diff --git a/src/views/common/components/compact-dropdown.tsx b/src/views/common/components/compact-dropdown.tsx
index 91529847..f13ddb81 100644
--- a/src/views/common/components/compact-dropdown.tsx
+++ b/src/views/common/components/compact-dropdown.tsx
@@ -115,7 +115,7 @@ export const CompactDropdown = (props: CompactDropdownProps) => {
         <div className={expanded ? `${props.className} compact-dropdown expanded` : `${props.className} compact-dropdown`} style={props.style} ref={rootRef}>
             <div className='compact-dropdown-inner'>
                 {props.addonBefore && <div className="compact-dropdown-addon-before">{props.addonBefore}</div>}
-                <div className={`compact-dropdown-trigger ${props.disabled ? ' disabled' : ''}`} onClick={toggleDropdown} ref={triggerRef} title={toolTip(props.selected)} tabIndex={0}>
+                <div className={`compact-dropdown-trigger ${props.disabled ? ' disabled' : ''}`} onClick={toggleDropdown} ref={triggerRef} title={toolTip(props.selected)} tabIndex={0} role='combobox' aria-haspopup='listbox' aria-expanded={expanded} aria-controls='compact-dropdown-popover'>
                     {props.displayText ? props.displayText(props.selected) : props.selected || props.unselectedLabel} {props.tag}
                     {props.warning && <span className="codicon codicon-warning compact-dropdown-warn" title={typeof props.warning === 'string' ? props.warning : ''} />}
                     {props.available.length > 1 && <span className="fa-solid fa-angle-down compact-dropdown-caret" />}
diff --git a/src/views/common/components/file-path-picker.test.tsx b/src/views/common/components/file-path-picker.test.tsx
index 01028250..065fbb25 100644
--- a/src/views/common/components/file-path-picker.test.tsx
+++ b/src/views/common/components/file-path-picker.test.tsx
@@ -45,12 +45,15 @@ describe('FileLocationPicker', () => {
                 openFilePicker={mockOpenFilePicker}
             />);
         });
-        const browseBtn = container.querySelector('.file-location-picker vscode-button') as HTMLButtonElement;
+        const browseBtn = container.querySelector('.file-location-picker button') as HTMLButtonElement;
 
         expect(mockOpenFilePicker).toHaveBeenCalledTimes(0);
 
         React.act(() => {
-            browseBtn!.click();
+            if (!browseBtn) {
+                throw new Error('Browse button not found. Check the selector or component rendering.');
+            }
+            browseBtn.click();
         });
 
         expect(mockOpenFilePicker).toHaveBeenCalledTimes(1);
@@ -76,6 +79,6 @@ describe('FileLocationPicker', () => {
         simulateChangeEvent(inputBox, 'my-location');
 
         expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SOLUTION_LOCATION' , solutionLocation: 'my-location' });
+        expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SOLUTION_LOCATION', solutionLocation: 'my-location' });
     });
 });
diff --git a/src/views/common/components/file-path-picker.tsx b/src/views/common/components/file-path-picker.tsx
index 8cfb749b..13aa4d13 100644
--- a/src/views/common/components/file-path-picker.tsx
+++ b/src/views/common/components/file-path-picker.tsx
@@ -16,8 +16,8 @@
 
 import './file-path-picker.css';
 import * as React from 'react';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
 import { CreateSolutionAction } from '../../create-solutions/view/state/reducer';
+import { Button } from 'antd';
 
 export interface FileLocationPickerProps {
     disabled: boolean;
@@ -41,12 +41,13 @@ export const FileLocationPicker = ({ id, disabled, location, dispatch, openFileP
             })}
             value={location}
             disabled={disabled} />
-        <VSCodeButton
+        <Button
             title='Browse'
             disabled={disabled}
+            style={{ height: 'var(--arm-input-height)' }}
             onClick={() => openFilePicker()}
         >
             Browse
-        </VSCodeButton>
+        </Button>
     </div>
 );
diff --git a/src/views/config-wizard/confwiz-webview-main.ts b/src/views/config-wizard/confwiz-webview-main.ts
index 8495b6c8..aa79ecec 100644
--- a/src/views/config-wizard/confwiz-webview-main.ts
+++ b/src/views/config-wizard/confwiz-webview-main.ts
@@ -152,13 +152,6 @@ export class ConfWizWebview implements vscode.CustomTextEditorProvider {
     }
 
     protected _getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri): string {
-        const toolkitUri = webview.asWebviewUri(vscode.Uri.joinPath(
-            extensionUri,
-            'dist',
-            'views',
-            'toolkit.min.js'
-        ));
-
         const mainUri = webview.asWebviewUri(vscode.Uri.joinPath(
             extensionUri,
             'dist',
@@ -194,7 +187,6 @@ export class ConfWizWebview implements vscode.CustomTextEditorProvider {
                     <meta charset='UTF-8'>
                     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                     <meta http-equiv='Content-Security-Policy' content="default-src 'none'; script-src ${cspSource}; style-src ${cspSource} 'unsafe-inline'; font-src ${cspSource};">
-                    <script type='module' src='${toolkitUri}'></script>
                     <script type='module' src='${mainUri}'></script>
                     <link rel='preload' as='style' href='${fontAwesomeUri}' >
                     <link rel='preload' as='style' href='${fontAwesomeStyleUri}' >
diff --git a/src/views/config-wizard/confwiz-webview-view-component.test.tsx b/src/views/config-wizard/confwiz-webview-view-component.test.tsx
index 7d6b344c..5b1b022e 100644
--- a/src/views/config-wizard/confwiz-webview-view-component.test.tsx
+++ b/src/views/config-wizard/confwiz-webview-view-component.test.tsx
@@ -29,6 +29,12 @@ import {
 
 const sendNotificationMock = jest.fn();
 const notificationHandlers = new Map<string, (data: unknown) => void>();
+const mockVsCodeApi = {
+    postMessage: jest.fn(),
+    setState: jest.fn(),
+    getState: jest.fn(),
+};
+const acquireVsCodeApiMock = jest.fn(() => mockVsCodeApi);
 
 const getNotificationKey = (type: unknown): string => {
     if (typeof type === 'string') {
@@ -42,13 +48,6 @@ const getNotificationKey = (type: unknown): string => {
     return String(type);
 };
 
-// Mock acquireVsCodeApi
-global.acquireVsCodeApi = jest.fn(() => ({
-    postMessage: jest.fn(),
-    setState: jest.fn(),
-    getState: jest.fn(),
-}));
-
 jest.mock('vscode-messenger-webview', () => ({
     Messenger: jest.fn().mockImplementation(() => ({
         start: jest.fn(),
@@ -59,22 +58,11 @@ jest.mock('vscode-messenger-webview', () => ({
     }))
 }));
 
-jest.mock('@vscode/webview-ui-toolkit/react', () => ({
-    VSCodeTextField: ({ children: _children, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
-        <input role="textbox" {...props} />
-    ),
-    VSCodeCheckbox: ({ onChange, onClick, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
-        <input type="checkbox" onChange={onChange ?? (() => undefined)} onClick={onClick} {...props} />
-    ),
-    VSCodeDropdown: (props: React.SelectHTMLAttributes<HTMLSelectElement>) => <select {...props} />,
-    VSCodeOption: (props: React.OptionHTMLAttributes<HTMLOptionElement>) => <option {...props} />,
-}));
-
 jest.mock('primereact/treetable', () => ({
     TreeTable: ({ value, header, children }: { value: unknown[]; header: React.ReactNode; children: React.ReactNode }) => {
         const columns = React.Children.toArray(children) as React.ReactElement[];
         return (
-            <div>
+            <>
                 {header}
                 {value?.map((node: unknown, index: number) => (
                     <div key={index} data-testid={`row-${index}`}>
@@ -83,7 +71,7 @@ jest.mock('primereact/treetable', () => ({
                         ))}
                     </div>
                 ))}
-            </div>
+            </>
         );
     },
 }));
@@ -130,10 +118,19 @@ const makeRoot = (children: TreeNodeElement[]): TreeNodeElement => ({
 
 describe('ConfWiz functional component', () => {
     beforeEach(() => {
+        (globalThis as { acquireVsCodeApi?: () => unknown }).acquireVsCodeApi = acquireVsCodeApiMock;
+        acquireVsCodeApiMock.mockClear();
         sendNotificationMock.mockClear();
+        mockVsCodeApi.postMessage.mockClear();
+        mockVsCodeApi.setState.mockClear();
+        mockVsCodeApi.getState.mockClear();
         notificationHandlers.clear();
     });
 
+    afterEach(() => {
+        delete (globalThis as { acquireVsCodeApi?: () => unknown }).acquireVsCodeApi;
+    });
+
     it('marks dirty on first edit and saves on blur', () => {
         const editElement: TreeNodeElement = {
             guiId: 1,
@@ -175,8 +172,8 @@ describe('ConfWiz functional component', () => {
         render(<ConfWiz />);
         emitWizardData({ element: makeRoot([checkboxElement]), documentPath: 'test.c', noAnnotationsFound: false });
 
-        const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
-        expect(checkbox.className).toContain('checkbox-inconsistent');
+        const checkbox = document.querySelector('input[type="checkbox"]')?.parentElement as HTMLInputElement;
+        expect(checkbox.parentElement?.className).toContain('checkbox-inconsistent');
         expect(checkbox.getAttribute('title')).toContain('Inconsistent comment state detected');
         expect(checkbox.getAttribute('title')).toContain('Original tooltip info');
     });
@@ -270,8 +267,8 @@ describe('ConfWiz dropdown overflow tooltips', () => {
         const { getByRole } = render(confWiz.getCreateCombobox(element));
         const dropdown = getByRole('combobox') as HTMLSelectElement;
 
-        expect(dropdown.title).toBe("Value '256' overflows 8 bits");
-        expect(dropdown.className).toContain('dropdown-invalid');
+        expect(dropdown.title).toBe('Value \'256\' overflows 8 bits');
+        expect(dropdown.className).toContain('compact-dropdown-trigger');
     });
 
     it('should show not-in-list tooltip when value is missing and no overflow', () => {
@@ -295,6 +292,6 @@ describe('ConfWiz dropdown overflow tooltips', () => {
         const dropdown = getByRole('combobox') as HTMLSelectElement;
 
         expect(dropdown.title).toBe("Value '0' is not in the list");
-        expect(dropdown.className).toContain('dropdown-invalid');
+        expect(dropdown.className).toContain('compact-dropdown-trigger');
     });
 });
diff --git a/src/views/config-wizard/confwiz-webview-view-component.tsx b/src/views/config-wizard/confwiz-webview-view-component.tsx
index 0b918082..378851d6 100644
--- a/src/views/config-wizard/confwiz-webview-view-component.tsx
+++ b/src/views/config-wizard/confwiz-webview-view-component.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { VSCodeCheckbox, VSCodeDropdown, VSCodeOption, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 import { Column, ColumnBodyOptions } from 'primereact/column';
 import { TreeNode } from 'primereact/treenode';
 import { TreeTable } from 'primereact/treetable';
@@ -32,8 +31,12 @@ import {
     setPanelActiveType,
     setWizardDataType
 } from './confwiz-webview-common';
+import { Input, Checkbox, ConfigProvider, theme } from 'antd';
 import { filterTree } from './../filterTree';
 import './confwiz-webview.css';
+import { CompactDropdown } from '../common/components/compact-dropdown';
+
+const { Search } = Input;
 
 // Render-only helper flag for dimming
 type DTreeNode = TreeNode & { dimmed?: boolean };
@@ -77,8 +80,8 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
     };
     protected get messenger(): Messenger {
         if (!this._messenger) {
-            const vscode = acquireVsCodeApi();
-            this._messenger = new Messenger(vscode);
+            const vscodeApi = acquireVsCodeApi();
+            this._messenger = new Messenger(vscodeApi);
             this._messenger.start();
         }
 
@@ -382,86 +385,81 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
         const errorsText = this.getErrorsText(rootNode);
 
         const header = <div className='tree-table-header'>
-            <VSCodeTextField
+            <Search
                 className='tree-table-filter'
                 placeholder='Search annotations'
-                type='text'
+                allowClear
+                onClear={(): void => {
+                    this.setState({ filter: '' });
+                }}
                 onInput={(event): void => {
                     const element = event.target as HTMLInputElement;
                     this.setState({ filter: element.value });
                 }}
-            >
-                <span slot='start' className='codicon codicon-search'></span>
-            </VSCodeTextField>
+            />
         </div>;
 
         const filteredChildren = filterTree(rootNode.children, this.state.filter);
+        const isDarkTheme = document.body.classList.contains('vscode-dark');
 
-        return <div>
-            <TreeTable
-                value={filteredChildren}
-                header={header}
-                tableStyle={{ minWidth: '30rem' }}
-                expandedKeys={this.state.expandedKeys}
-                onToggle={(event: { value: Record<string, boolean> }) => {
-                    this.pendingRefocus = true;
-                    this.pendingRefocusKey = this.state.activeKey;
-                    this.setState({ expandedKeys: event.value });
-                }}
-                // Apply dimming to the row itself; no extra wrappers in cells (keeps expanders aligned)
-                rowClassName={(node: DTreeNode) => {
-                    const key = this.getNodeKey(node);
-                    const lastTouchedKey = this.state.lastTouchedKey ?? this.state.activeKey;
-                    const isLastTouched = key !== '' && key === lastTouchedKey;
-                    const isInactive = isLastTouched && (!this.state.panelIsActive || !this.state.hasUserFocus);
-                    const isActive = key !== '' && key === this.state.activeKey && this.state.panelIsActive && this.state.hasUserFocus;
-                    return {
-                        'tree-dimmed': !!node?.dimmed,
-                        'cw-row-active': isActive,
-                        'cw-row-inactive': isInactive,
-                    };
-                }}
-            >
-                <Column
-                    header='Option'
-                    className='tree-table-column-name'
-                    style={{ width: '50%' }}
-                    expander
-                    body={(data: TreeNode, _options: ColumnBodyOptions) => {
-                        return this.createTextName(data.data as TreeNodeElement);
-                    }}
-                />
-                <Column
-                    header='Value'
-                    style={{ width: '50%' }}
-                    body={(data: TreeNode, _options: ColumnBodyOptions) => {
-                        const treeNodeData = data.data as TreeNodeElement;
-                        const isDimmed = (data as DTreeNode).dimmed || false;
-
-                        // Only disable children of unchecked checkboxes, not the unchecked checkbox itself
-                        const isUncheckedCheckbox = this.isUncheckedCheckbox(treeNodeData);
-                        const shouldDisable = isDimmed && !isUncheckedCheckbox;
-
-                        return this.createGuiElement(treeNodeData, shouldDisable);
-                    }}
-                />
-            </TreeTable>
-            {errorsText}
-        </div>;
-    }
-
-    protected getComboDropItems(element: TreeNodeElement): React.JSX.Element[] {
-        if (element.dropItems == undefined) {
-            return [];
-        }
-
-        const options: React.JSX.Element[] = [];
-        for (const val of element.dropItems) {
-            const sel = (element.value.value == val) ? true : false;
-            options.push(<VSCodeOption value={val} selected={sel}>{val}</VSCodeOption>);
-        }
-
-        return options;
+        return (
+            <ConfigProvider
+                theme={{
+                    algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
+                }}>
+                <div>
+                    <TreeTable
+                        value={filteredChildren}
+                        header={header}
+                        tableStyle={{ minWidth: '30rem' }}
+                        expandedKeys={this.state.expandedKeys}
+                        onToggle={(event: { value: Record<string, boolean> }) => {
+                            this.pendingRefocus = true;
+                            this.pendingRefocusKey = this.state.activeKey;
+                            this.setState({ expandedKeys: event.value });
+                        }}
+                        // Apply dimming to the row itself; no extra wrappers in cells (keeps expanders aligned)
+                        rowClassName={(node: DTreeNode) => {
+                            const key = this.getNodeKey(node);
+                            const lastTouchedKey = this.state.lastTouchedKey ?? this.state.activeKey;
+                            const isLastTouched = key !== '' && key === lastTouchedKey;
+                            const isInactive = isLastTouched && (!this.state.panelIsActive || !this.state.hasUserFocus);
+                            const isActive = key !== '' && key === this.state.activeKey && this.state.panelIsActive && this.state.hasUserFocus;
+                            return {
+                                'tree-dimmed': !!node?.dimmed,
+                                'cw-row-active': isActive,
+                                'cw-row-inactive': isInactive,
+                            };
+                        }}
+                    >
+                        <Column
+                            header='Option'
+                            className='tree-table-column-name'
+                            style={{ width: '50%' }}
+                            expander
+                            body={(data: TreeNode, _options: ColumnBodyOptions) => {
+                                return this.createTextName(data.data as TreeNodeElement);
+                            }}
+                        />
+                        <Column
+                            header='Value'
+                            style={{ width: '50%' }}
+                            body={(data: TreeNode, _options: ColumnBodyOptions) => {
+                                const treeNodeData = data.data as TreeNodeElement;
+                                const isDimmed = (data as DTreeNode).dimmed || false;
+
+                                // Only disable children of unchecked checkboxes, not the unchecked checkbox itself
+                                const isUncheckedCheckbox = this.isUncheckedCheckbox(treeNodeData);
+                                const shouldDisable = isDimmed && !isUncheckedCheckbox;
+
+                                return this.createGuiElement(treeNodeData, shouldDisable);
+                            }}
+                        />
+                    </TreeTable>
+                    {errorsText}
+                </div>
+            </ConfigProvider>
+        );
     }
 
     protected getInfoItems(element: TreeNodeElement): string {
@@ -475,7 +473,7 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
     }
 
     protected createCombobox(element: TreeNodeElement, shouldDisable: boolean = false): React.ReactElement {
-        const options = this.getComboDropItems(element);
+        // const options = this.getComboDropItems(element);
         const infos = this.getInfoItems(element);
         const key = this.getElementKey(element);
 
@@ -491,11 +489,11 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
 
         // If there's no matching option, inject a temporary "missing" option so the selection is visible
         if (isInvalid) {
-            options.unshift(
-                <VSCodeOption key="__missing__" value={selectedValue} selected>
-                    {`${selectedValue} (not in list)`}
-                </VSCodeOption>
-            );
+            // options.unshift(
+            //     <VSCodeOption key="__missing__" value={selectedValue} selected>
+            //         {`${selectedValue} (not in list)`}
+            //     </VSCodeOption>
+            // );
         }
 
         let tooltipMessage = infos;
@@ -509,24 +507,25 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
 
         return (
             <div ref={this.keyboardNav.registerValueRef(key)} onFocusCapture={() => this.handleUserFocus(key)}>
-                <VSCodeDropdown
-                    className={`tree-dropdown ${isInvalid || hasOverflow ? 'dropdown-invalid' : ''}`}
+                <CompactDropdown
                     disabled={element.value.readOnly || shouldDisable}
-                    value={selectedValue}
-                    onChange={(event) => {
-                        const selectElement = event.target as HTMLSelectElement;
-                        this.inputDropdown(selectElement, element);
-                    }}
-                    onKeyDown={(event) => {
-                        if (this.keyboardNav.onValueKeyDown(event, key)) {
-                            return;
-                        }
-                        this.onKeyDownFilter(event);
+                    selected={selectedValue}
+                    available={dropItems}
+                    style={{ width: '100%' }}
+                    onChange={(value) => {
+                        // const selectElement = event.target as HTMLSelectElement;
+                        // this.inputDropdown(selectElement, element);
+                        element.newValue.value = value;
+                        // Immediate local update for consistent behavior with checkbox and text field
+                        element.value.value = value;
+                        this.forceUpdate();
+                        // Toggle forceRender to trigger React re-render
+                        this.setState(prevState => ({ forceRender: !prevState.forceRender }));
+                        this.messenger.sendNotification(saveElement, HOST_EXTENSION, { documentPath: this.state.documentPath, element, noAnnotationsFound: false });
                     }}
                     title={tooltipMessage}
-                >
-                    {options}
-                </VSCodeDropdown>
+                    warning={isInvalid || hasOverflow ? tooltipMessage : undefined}
+                />
             </div>
         );
     }
@@ -553,11 +552,11 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
             : infos;
 
         const option = (
-            <VSCodeCheckbox
+            <Checkbox
                 className={isInconsistent ? 'checkbox-inconsistent' : undefined}
                 disabled={element.value.readOnly || shouldDisable}
-                onClick={(event) => {
-                    const inputElement = event.currentTarget as HTMLInputElement;
+                onChange={(event) => {
+                    const inputElement = event.target as HTMLInputElement;
                     this.toggleChecked(inputElement, element);
                 }}
                 onKeyDown={(event) => {
@@ -584,11 +583,15 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
     protected createEdit(element: TreeNodeElement, shouldDisable: boolean = false): React.ReactElement {
         const infos = this.getInfoItems(element);
         const key = this.getElementKey(element);
-        const option = <VSCodeTextField
+        const option = <Input
             value={element.value.value}
             disabled={element.value.readOnly || shouldDisable}
             readOnly={element.value.readOnly || shouldDisable}
             title={infos}
+            onChange={e => {
+                element.value.value = (e.target as HTMLInputElement).value;
+                this.forceUpdate();
+            }}
             onInput={(event) => {
                 const inputElement = event.target as HTMLInputElement;
                 // Update local state immediately for UI responsiveness
@@ -687,7 +690,7 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
         this.messenger.sendNotification(saveElement, HOST_EXTENSION, { documentPath: this.state.documentPath, element, noAnnotationsFound: false });
     }
 
-    private onEditChange(edit: HTMLInputElement, element: TreeNodeElement) {
+    private onEditChange(edit: HTMLInputElement | HTMLTextAreaElement, element: TreeNodeElement) {
         // - element.newValue.value: used for backend save logic
         element.newValue.value = edit.value;
         // - element.value.value: used for immediate UI update (VSCodeTextField value property)
@@ -695,15 +698,6 @@ export class ConfWiz extends React.Component<Record<string, unknown>, State> {
         this.messenger.sendNotification(saveElement, HOST_EXTENSION, { documentPath: this.state.documentPath, element, noAnnotationsFound: false });
     }
 
-    private inputDropdown(selected: HTMLSelectElement, element: TreeNodeElement) {
-        element.newValue.value = selected.value;
-        // Immediate local update for consistent behavior with checkbox and text field
-        element.value.value = selected.value;
-        // Toggle forceRender to trigger React re-render
-        this.setState(prevState => ({ forceRender: !prevState.forceRender }));
-        this.messenger.sendNotification(saveElement, HOST_EXTENSION, { documentPath: this.state.documentPath, element, noAnnotationsFound: false });
-    }
-
     /**
      * Filters 'keydown' event for navigation keys and stops event propagation if matches.
      * This keeps TreeTable to avoid using them for navigation through the tree while for
diff --git a/src/views/create-solutions/view/components/create-solution.test.tsx b/src/views/create-solutions/view/components/create-solution.test.tsx
index 8591e9de..e1fdfec3 100644
--- a/src/views/create-solutions/view/components/create-solution.test.tsx
+++ b/src/views/create-solutions/view/components/create-solution.test.tsx
@@ -17,7 +17,6 @@
 import 'jest';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
 import { simulateChangeEvent } from '../../../../__test__/dom-events';
 import { refAppFactory } from '../../../../core-tools/core-tools-service.factories';
 import { cSolutionExampleFactory } from '../../../../solar-search/solar-search-client.factories';
@@ -25,33 +24,36 @@ import { MockMessageHandler } from '../../../__test__/mock-message-handler';
 import { boardHardwareOptionFactory, deviceHardwareOptionFactory } from '../../cmsis-solution-types.factories';
 import { IncomingMessage, OutgoingMessage } from '../../messages';
 import { CreationActions } from '../actions';
-import { CreateSolutionState } from '../state/reducer';
 import { CreateSolution } from './create-solution';
+import { act } from 'react';
+import { CreateSolutionState } from '../state/reducer';
 
 
 
-const targetDataWindowMessage: IncomingMessage = { type: 'TARGET_DATA', data: {
-    devices: [
-        {
-            header: 'Test Header',
-            categories: [],
-            items: ['A', 'B', 'C'].map(i => ({
-                label: `Item ${i}`,
-                value: deviceHardwareOptionFactory(),
-            }))
-        }
-    ],
-    boards: [
-        {
-            header: 'Test Header',
-            categories: [],
-            items: ['A', 'B', 'C'].map(i => ({
-                label: `Item ${i}`,
-                value: boardHardwareOptionFactory(),
-            }))
-        }
-    ]
-}, errors: [] };
+const targetDataWindowMessage: IncomingMessage = {
+    type: 'TARGET_DATA', data: {
+        devices: [
+            {
+                header: 'Test Header',
+                categories: [],
+                items: ['A', 'B', 'C'].map(i => ({
+                    label: `Item ${i}`,
+                    value: deviceHardwareOptionFactory(),
+                }))
+            }
+        ],
+        boards: [
+            {
+                header: 'Test Header',
+                categories: [],
+                items: ['A', 'B', 'C'].map(i => ({
+                    label: `Item ${i}`,
+                    value: boardHardwareOptionFactory(),
+                }))
+            }
+        ]
+    }, errors: []
+};
 
 describe('CreateSolution', () => {
     let container: Element;
@@ -60,8 +62,8 @@ describe('CreateSolution', () => {
     let creationActions: { [key in keyof CreationActions]: jest.Mock<ReturnType<CreationActions[key]>, Parameters<CreationActions[key]>> };
 
     const getElements = () => ({
-        createBtn: container.querySelector('vscode-button[title="Create Solution"]') as HTMLButtonElement,
-        cancelBtn: container.querySelector('vscode-button[title="Cancel"]') as HTMLButtonElement,
+        createBtn: container.querySelector('button[title="Create Solution"]') as HTMLButtonElement,
+        cancelBtn: container.querySelector('button[title="Cancel"]') as HTMLButtonElement,
         fInput: container.querySelector('#create-solution-solution-folder') as HTMLInputElement,
         boardDropdown: container.querySelector('#create-solution-board-target') as HTMLElement,
         deviceDropdown: container.querySelector('#create-solution-device-target') as HTMLElement,
@@ -79,6 +81,11 @@ describe('CreateSolution', () => {
         await act(async () => firstOption.click());
     };
 
+    const confirmTargetSelection = async () => {
+        const selectButton = container.querySelector('button[title="Select"]:not([disabled])') as HTMLButtonElement;
+        await act(async () => selectButton.click());
+    };
+
     const selectFirstTemplate = async () => {
         const firstTemplate = container.querySelector('.template') as HTMLElement;
         await act(async () => firstTemplate.click());
@@ -94,6 +101,7 @@ describe('CreateSolution', () => {
 
         await openDropdown(elements.boardDropdown);
         await selectFirstTarget();
+        await confirmTargetSelection();
 
         await openDropdown(elements.templateDropdown);
         await selectFirstTemplate();
@@ -120,6 +128,17 @@ describe('CreateSolution', () => {
                 case 'GET_PLATFORM':
                     messageHandler.postWindowMessage({ type: 'PLATFORM', data: { name: 'vscode' } });
                     break;
+                case 'DATA_GET_BOARD_INFO':
+                    messageHandler.postWindowMessage({
+                        type: 'HARDWARE_INFO',
+                        data: {
+                            memoryInfo: {},
+                            image: '',
+                            debugInterfacesList: [],
+                            boardInfo: boardHardwareOptionFactory(),
+                        },
+                    });
+                    break;
             }
             messageHandler.postWindowMessage({ type: 'REQUEST_SUCCESSFUL', requestType: message.type });
         });
@@ -153,10 +172,10 @@ describe('CreateSolution', () => {
     it('requests closure of the webview on the cancel button', async () => {
         await renderCreateSolution();
         const expectedMessage: OutgoingMessage = { type: 'WEBVIEW_CLOSE' };
-        const cancelBtn = Array.from(container.querySelectorAll('#create-solution-form vscode-button'))
+        const cancelBtn = Array.from(container.querySelectorAll('#create-solution-form button'))
             .find(button => button.innerHTML.includes('Cancel')) as HTMLButtonElement;
 
-        await act(async() => cancelBtn!.click());
+        await act(async () => cancelBtn!.click());
 
         expect(listener).toHaveBeenLastCalledWith(expectedMessage);
     });
@@ -178,7 +197,7 @@ describe('CreateSolution', () => {
         const example = cSolutionExampleFactory();
         messageHandler.postWindowMessage({
             type: 'BOARD_EXAMPLE_DATA',
-            data: [ example ],
+            data: [example],
         });
 
         await openDropdown(getElements().templateDropdown);
@@ -239,7 +258,7 @@ describe('CreateSolution', () => {
 
     it('requests the directory path when the browse button is clicked', async () => {
         await renderCreateSolution();
-        const browseBtn = container.querySelector('#create-solution-file-locator ~ vscode-button') as HTMLButtonElement;
+        const browseBtn = container.querySelector('#create-solution-file-locator ~ button') as HTMLButtonElement;
 
         await act(async () => browseBtn!.click());
 
@@ -275,7 +294,7 @@ describe('CreateSolution', () => {
         expect(errorMessageElement.innerHTML.includes('already exists at this location'));
     });
 
-    it ('auto selects a board if it is connected', async () => {
+    it('auto selects a board if it is connected', async () => {
         const connectedBoard = targetDataWindowMessage.data.boards[0].items[1].value;
         listener.mockImplementation(async (message: OutgoingMessage) => {
             switch (message.type) {
@@ -300,7 +319,7 @@ describe('CreateSolution', () => {
 
         messageHandler.postWindowMessage({
             type: 'BOARD_EXAMPLE_DATA',
-            data: [ example ],
+            data: [example],
         });
 
         const templateDropdown = getElements().templateDropdown;
diff --git a/src/views/create-solutions/view/components/create-solution.tsx b/src/views/create-solutions/view/components/create-solution.tsx
index 1ca54222..b3d2727f 100644
--- a/src/views/create-solutions/view/components/create-solution.tsx
+++ b/src/views/create-solutions/view/components/create-solution.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { VSCodeButton, VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { FileLocationPicker } from '../../../common/components/file-path-picker';
 import { TooltipQuestion } from '../../../common/components/tooltip-question';
@@ -29,7 +28,7 @@ import { ExampleDropdownTree } from './example-dropdown-tree';
 import { HardwareRow } from './hardware-row';
 import { ProjectConfiguration } from './project-configuration';
 import { validationError } from './validation-message';
-import { ConfigProvider, theme, Tooltip } from 'antd';
+import { Button, Checkbox, ConfigProvider, theme, Tooltip } from 'antd';
 import { useVSCodeTheme } from '../../../hooks/use-vscode-theme';
 import { SettingOutlined } from '@ant-design/icons';
 
@@ -47,12 +46,12 @@ export interface CreateSolutionProps {
 
 const SettingsLink = ({ setting, children }: { setting: string, children?: React.ReactNode }) => (
     <>
-        { children }
-        <a href={ 'vscode://settings/cmsis-csolution.' + setting }
+        {children}
+        <a href={'vscode://settings/cmsis-csolution.' + setting}
             className="preferences-link"
             title='Preferences: Open Settings'
         >
-            <SettingOutlined style={{ marginLeft: '4px' }}/>
+            <SettingOutlined style={{ marginLeft: '4px' }} />
         </a>
     </>
 );
@@ -217,7 +216,7 @@ export const CreateSolution = ({ creationActions, messageHandler }: CreateSoluti
                                         <>
                                             <span style={{ width: '100%' }}>Templates, Reference Applications, and Examples</span>
                                             <span className="checkbox-field">
-                                                <VSCodeCheckbox id={'create-solution-from-all-pack-versions'} checked={state.fromAllPackVersions} onChange={() => dispatch({ type: 'TOGGLE_ALL_PACK_VERSIONS' })} disabled={disabled} />
+                                                <Checkbox id={'create-solution-from-all-pack-versions'} checked={state.fromAllPackVersions} onChange={() => dispatch({ type: 'TOGGLE_ALL_PACK_VERSIONS' })} disabled={disabled} />
                                                 <label htmlFor="create-solution-from-all-pack-versions">All pack versions</label>
                                                 <TooltipQuestion title={'Show projects from all versions instead of latest pack version only'} />
                                             </span>
@@ -283,31 +282,31 @@ export const CreateSolution = ({ creationActions, messageHandler }: CreateSoluti
                                 <div className="form-row form-row--narrow">{validationError(validationErrors.solutionLocation)}</div>
                             )}
                             <div className="checkbox-field">
-                                <VSCodeCheckbox id={'create-solution-git-init-input'} checked={state.initGit} onChange={() => dispatch({ type: 'TOGGLE_INIT_GIT' })} disabled={disabled} />
+                                <Checkbox id={'create-solution-git-init-input'} checked={state.initGit} onChange={() => dispatch({ type: 'TOGGLE_INIT_GIT' })} disabled={disabled} />
                                 <label htmlFor="create-solution-git-init-input">Initialize Git repository</label>
                                 <TooltipQuestion title={'Set up your solution for Git version control, allowing you to track changes.'} />
                             </div>
                             <div className="checkbox-field">
-                                <VSCodeCheckbox id={'create-solution-open-modal-input'} checked={state.showOpenDialog} onChange={() => dispatch({ type: 'TOGGLE_OPEN_MODAL' })} disabled={disabled} />
+                                <Checkbox id={'create-solution-open-modal-input'} checked={state.showOpenDialog} onChange={() => dispatch({ type: 'TOGGLE_OPEN_MODAL' })} disabled={disabled} />
                                 <label htmlFor="create-solution-open-modal-input">Show project opening options</label>
                                 <TooltipQuestion title={'If selected, shows project opening options dialog box. If not selected, opens the project in a new window and new workspace by default.'} />
                             </div>
                         </fieldset>
                         <footer className="create-solution-footer">
                             <div className="create-solution-button-strip">
-                                <VSCodeButton
+                                <Button
                                     title="Cancel"
-                                    appearance="secondary"
+                                    type="default"
                                     disabled={state.createProgress !== 'idle'}
                                     onClick={() => {
                                         messageHandler.push({ type: 'WEBVIEW_CLOSE' });
                                     }}
                                 >
-                                Cancel
-                                </VSCodeButton>
-                                <VSCodeButton title="Create Solution" disabled={disabled || !ready} onClick={() => creationActions.createSolution(dispatch, state, messageHandler)}>
+                                    Cancel
+                                </Button>
+                                <Button title="Create Solution" type="primary" disabled={disabled || !ready} onClick={() => creationActions.createSolution(dispatch, state, messageHandler)}>
                                     {state.createProgress === 'checking' ? 'Checking…' : state.createProgress === 'creating' ? 'Creating…' : 'Create'}
-                                </VSCodeButton>
+                                </Button>
                             </div>
                         </footer>
                     </form>
diff --git a/src/views/create-solutions/view/components/hardware-panel.test.tsx b/src/views/create-solutions/view/components/hardware-panel.test.tsx
index 0293327c..682e7daa 100644
--- a/src/views/create-solutions/view/components/hardware-panel.test.tsx
+++ b/src/views/create-solutions/view/components/hardware-panel.test.tsx
@@ -40,7 +40,7 @@ describe('Hardware Panel', () => {
     const hardwareInfo: HardwareInfo = {
         image: faker.internet.url(),
         memoryInfo: { 'IROM1': { size: 32768, count: 2 } },
-        debugInterfacesList: [{ adapter: 'JTAG', connector: '20 pin JTAG' } , { adapter: 'JTAG', connector: '30000 pin Micro USB' }],
+        debugInterfacesList: [{ adapter: 'JTAG', connector: '20 pin JTAG' }, { adapter: 'JTAG', connector: '30000 pin Micro USB' }],
     };
 
     beforeEach(() => {
@@ -69,7 +69,7 @@ describe('Hardware Panel', () => {
 
     it('render hardware info panel for the selected Board/Device', () => {
         React.act(() => {
-            createRoot(container).render(<HardwarePanel hardwareSelection={boardSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={boardSelection} dispatch={dispatch}/>);
+            createRoot(container).render(<HardwarePanel hardwareSelection={boardSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={boardSelection} dispatch={dispatch} />);
         });
         const HardwareInfoTitlesEntry = container.querySelector('.details-header-item');
         expect(HardwareInfoTitlesEntry!.querySelector('#board-device')?.innerHTML).toBe(labelForHardwareOption(boardHardwareOption));
@@ -86,7 +86,7 @@ describe('Hardware Panel', () => {
 
     it('requests board/device hardwareInfo data on startup', () => {
         React.act(() => {
-            createRoot(container).render(<HardwarePanel hardwareSelection={boardSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={boardSelection} dispatch={dispatch}/>);
+            createRoot(container).render(<HardwarePanel hardwareSelection={boardSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={boardSelection} dispatch={dispatch} />);
         });
         const expectedMessage: OutgoingMessage = { type: 'DATA_GET_BOARD_INFO', boardId: { ...boardHardwareOption.id, key: boardHardwareOption.key } };
         expect(listener).toHaveBeenCalledWith(expectedMessage);
@@ -95,9 +95,9 @@ describe('Hardware Panel', () => {
 
     it('dispatches a SET_BOARD_SELECTION action when the select button is clicked and a board is selected', () => {
         React.act(() => {
-            createRoot(container).render(<HardwarePanel hardwareSelection={boardSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={boardSelection} dispatch={dispatch}/>);
+            createRoot(container).render(<HardwarePanel hardwareSelection={boardSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={boardSelection} dispatch={dispatch} />);
         });
-        const selectBtn = container.querySelector('.select-button vscode-button') as HTMLButtonElement;
+        const selectBtn = container.querySelector('.select-button button') as HTMLButtonElement;
 
         React.act(() => {
             Simulate.click(selectBtn);
@@ -110,9 +110,9 @@ describe('Hardware Panel', () => {
         const deviceHardwareOption = deviceHardwareOptionFactory();
         const deviceSelection: HardwareSelection = { type: 'Devices', value: deviceHardwareOption };
         React.act(() => {
-            createRoot(container).render(<HardwarePanel hardwareSelection={deviceSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={deviceSelection} dispatch={dispatch}/>);
+            createRoot(container).render(<HardwarePanel hardwareSelection={deviceSelection} hardwareInfo={hardwareInfo} onClick={onClick} messageHandler={messageHandler} previewHardware={deviceSelection} dispatch={dispatch} />);
         });
-        const selectBtn = container.querySelector('.select-button vscode-button') as HTMLButtonElement;
+        const selectBtn = container.querySelector('.select-button button') as HTMLButtonElement;
 
         React.act(() => {
             Simulate.click(selectBtn);
diff --git a/src/views/create-solutions/view/components/hardware-panel.tsx b/src/views/create-solutions/view/components/hardware-panel.tsx
index f9ec5b21..eb0d854e 100644
--- a/src/views/create-solutions/view/components/hardware-panel.tsx
+++ b/src/views/create-solutions/view/components/hardware-panel.tsx
@@ -22,12 +22,12 @@ import { MessageHandler } from '../../../message-handler';
 import { IncomingMessage, OutgoingMessage } from '../../messages';
 import { formatBytes } from '../../units-conversion';
 import { HardwareSelection } from '../state/hardware-selection';
-import { VSCodeButton, VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react';
 import * as Messages from '../../messages';
 import { dedupe } from '../../../../array';
 import { DebugInterface } from '../../../../core-tools/client/packs_pb';
 import { CreateSolutionAction } from '../state/reducer';
 import { serialisePackId } from '../../../../packs/pack-id';
+import { Button, Spin } from 'antd';
 
 interface HardwarePanelProps {
     hardwareInfo: HardwareInfo | undefined;
@@ -77,7 +77,7 @@ export const HardwarePanel = (props: HardwarePanelProps) => {
             previewHardware.value.mountedDevices.flatMap(device => device.processors) :
             previewHardware.value.processors;
 
-        const coreCounts: {[key in string]: number} = {};
+        const coreCounts: { [key in string]: number } = {};
         processorList.forEach(processorInfo => {
             coreCounts[processorInfo.core] = (coreCounts[processorInfo.core] ?? 0) + 1;
         });
@@ -119,51 +119,54 @@ export const HardwarePanel = (props: HardwarePanelProps) => {
                 .map(debugInterface => debugInterface.adapter);
 
         content = (
-            <><div className='hardware-panel-header'>
-                <div className='details-header-item'>
-                    <h2 id="board-device" title={headingText}>{headingText}</h2>
-                    <p id="vendor">{previewHardware.value.id.vendor}</p>
-                    {enableWebsiteLinks && (
-                        <a href={'/add-url'}>Product page <i className='codicon codicon-link-external'></i></a>
-                    )}
+            <>
+                <div className='hardware-panel-header'>
+                    <div className='details-header-item'>
+                        <h2 id="board-device" title={headingText}>{headingText}</h2>
+                        <p id="vendor">{previewHardware.value.id.vendor}</p>
+                        {enableWebsiteLinks && (
+                            <a href={'/add-url'}>Product page <i className='codicon codicon-link-external'></i></a>
+                        )}
+                    </div>
+                    <img src={hardwareInfo?.image ?? ''} alt="hardware-image" />
+                </div>
+                <div className='details-grid'>
+                    {coreElement}
+                    {(previewHardware.type === 'Boards' && previewHardware.value.mountedDevices.length) ? (
+                        <><p className='title'>Mounted Devices</p>
+                            <ul className='hardware-grid-info mounted-dev'>{previewHardware.value.mountedDevices.map((p, i) => (
+                                <li key={i}>{p.id.name}</li>
+                            ))}</ul>
+                        </>
+                    ) : undefined}
+                    {debugAdapters?.length ? (
+                        <><p className='title'>Debug Interface</p>
+                            <ul className='hardware-grid-info debug-int'>{debugAdapters.map((adapter, i) => (
+                                <li key={i}>{adapter}</li>
+                            ))}</ul>
+                        </>
+                    ) : undefined}
+                    {memoryElement}
+                    {packInfoElement}
+                </div><div className='select-button'>
+                    <Button
+                        title="Select" disabled={false} type="primary" onClick={() => {
+                            dispatchSelect(previewHardware);
+                            onClick();
+                        }}>Select</Button>
                 </div>
-                <img src={hardwareInfo?.image ?? ''} alt="hardware-image" />
-            </div><div className='details-grid'>
-                {coreElement}
-                {(previewHardware.type === 'Boards' && previewHardware.value.mountedDevices.length) ? (
-                    <><p className='title'>Mounted Devices</p>
-                        <ul className='hardware-grid-info mounted-dev'>{previewHardware.value.mountedDevices.map((p, i) => (
-                            <li key={i}>{p.id.name}</li>
-                        ))}</ul>
-                    </>
-                ) : undefined}
-                {debugAdapters?.length ? (
-                    <><p className='title'>Debug Interface</p>
-                        <ul className='hardware-grid-info debug-int'>{debugAdapters.map((adapter, i) => (
-                            <li key={i}>{adapter}</li>
-                        ))}</ul>
-                    </>
-                ) : undefined}
-                {memoryElement}
-                {packInfoElement}
-            </div><div className='select-button'>
-                <VSCodeButton
-                    title="Select" disabled={false} onClick={() => {
-                        dispatchSelect(previewHardware);
-                        onClick();
-                    } }>Select</VSCodeButton>
-            </div></>
+            </>
         );
     } else if (previewHardware && !hardwareInfo) {
-        content = <div className='loading-spinner'><VSCodeProgressRing></VSCodeProgressRing></div>;
+        content = <div className='loading-spinner'><Spin size="large" /></div>;
     } else {
         content = (
             <div className='hardware-panel-placeholder'>
                 <p>Please select a target</p>
                 <div className='select-button'>
-                    <VSCodeButton
-                        title="Select" disabled={true} onClick={onClick}
-                    >Select</VSCodeButton>
+                    <Button
+                        title="Select" disabled={true} onClick={onClick} type="primary"
+                    >Select</Button>
                 </div>
             </div>
         );
diff --git a/src/views/create-solutions/view/components/hardware-row.test.tsx b/src/views/create-solutions/view/components/hardware-row.test.tsx
index 53f37dcc..bdcd7973 100644
--- a/src/views/create-solutions/view/components/hardware-row.test.tsx
+++ b/src/views/create-solutions/view/components/hardware-row.test.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { TextField } from '@vscode/webview-ui-toolkit';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Simulate } from 'react-dom/test-utils';
@@ -40,13 +39,13 @@ describe('HardwareRow', () => {
     const getElements = () => ({
         boardDropdown: container.querySelector('#create-solution-board-target') as HTMLElement,
         deviceDropdown: container.querySelector('#create-solution-device-target') as HTMLElement,
-        targetType: container.querySelector('#create-solution-target-type') as TextField,
+        targetType: container.querySelector('#create-solution-target-type') as HTMLInputElement,
         hardwareRowHeaders: container.querySelector('#create-solution-hardware') as HTMLElement
 
     });
 
     const makeTargetCategories = <A,>(param: A) => {
-        return   {
+        return {
             header: 'Test Header',
             categories: [],
             items: ['A', 'B', 'C'].map(i => ({
@@ -61,7 +60,7 @@ describe('HardwareRow', () => {
     const devices: TreeViewCategory<DeviceHardwareOption>[] = ([makeTargetCategories(deviceHardwareOptionFactory())]);
     const hardwareLists: AsyncStatus<HardwareLists> = asyncLoaded({ boards, devices });
 
-    beforeEach(async() => {
+    beforeEach(async () => {
         container = document.createElement('div');
         jest.clearAllMocks();
         listener = jest.fn();
@@ -85,7 +84,7 @@ describe('HardwareRow', () => {
                 validationErrors={validationErrors}
                 webServicesEnabled={state.webServicesEnabled}
                 messageHandler={messageHandler}
-                dispatch={dispatch}/>
+                dispatch={dispatch} />
         ));
 
         const input = container.querySelector('#create-solution-target-type') as HTMLElement;
@@ -101,7 +100,7 @@ describe('HardwareRow', () => {
                 validationErrors={validationErrors}
                 webServicesEnabled={state.webServicesEnabled}
                 messageHandler={messageHandler}
-                dispatch={dispatch}/>
+                dispatch={dispatch} />
         ));
 
         const elements = getElements();
@@ -120,7 +119,7 @@ describe('HardwareRow', () => {
                 validationErrors={validationErrors}
                 webServicesEnabled={state.webServicesEnabled}
                 messageHandler={messageHandler}
-                dispatch={dispatch}/>
+                dispatch={dispatch} />
         ));
 
         const elements = getElements();
@@ -140,7 +139,7 @@ describe('HardwareRow', () => {
                 validationErrors={validationErrors}
                 webServicesEnabled={state.webServicesEnabled}
                 messageHandler={messageHandler}
-                dispatch={dispatch}/>
+                dispatch={dispatch} />
         ));
         const clearButton = container.querySelector('[title="clear-selection"]') as HTMLButtonElement;
 
@@ -160,7 +159,7 @@ describe('HardwareRow', () => {
                 validationErrors={validationErrors}
                 webServicesEnabled={state.webServicesEnabled}
                 messageHandler={messageHandler}
-                dispatch={dispatch}/>
+                dispatch={dispatch} />
         ));
 
         const clearButton = container.querySelector('[title="clear-selection"]');
diff --git a/src/views/create-solutions/view/components/hardware-row.tsx b/src/views/create-solutions/view/components/hardware-row.tsx
index 3c9d80e9..a2a5f007 100644
--- a/src/views/create-solutions/view/components/hardware-row.tsx
+++ b/src/views/create-solutions/view/components/hardware-row.tsx
@@ -216,7 +216,9 @@ const HardwareDropdown = <A extends BoardHardwareOption | DeviceHardwareOption>(
                     searchValue={treeViewSearch}
                     topLevelCategories={props.treeViewList}
                     itemPredicate={itemPredicate}
-                    onSelect={item => onSelect(item.value)}
+                    onSelect={item => {
+                        onSelect(item.value);
+                    }}
                     noEntriesMessage={noEntriesMessage}
                 ></SearchableTreeView>
             </div>
diff --git a/src/views/create-solutions/view/components/project-configuration.css b/src/views/create-solutions/view/components/project-configuration.css
index ab7ebea4..308c98c7 100644
--- a/src/views/create-solutions/view/components/project-configuration.css
+++ b/src/views/create-solutions/view/components/project-configuration.css
@@ -28,3 +28,7 @@
 .add-project-config-row {
     margin-top: 5px;
 }
+
+.compact-dropdown-inner {
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/views/create-solutions/view/components/project-configuration.test.tsx b/src/views/create-solutions/view/components/project-configuration.test.tsx
index 0db289bb..3c4cf428 100644
--- a/src/views/create-solutions/view/components/project-configuration.test.tsx
+++ b/src/views/create-solutions/view/components/project-configuration.test.tsx
@@ -38,13 +38,14 @@ describe('ProjectConfiguration', () => {
     });
 
     it('renders the project configuration info for device reference', () => {
-        const projects: FieldAndInteraction<NewProject>[] =  [{
+        const projects: FieldAndInteraction<NewProject>[] = [{
             value: newProjectFactory({
                 trustzone: 'secure',
                 processorName: '',
                 name: 'IO6-Alen',
             }),
-            hadInteraction: false }
+            hadInteraction: false
+        }
         ];
         const device = {
             id: { name: 'blast-blast-2000', vendor: 'c7-mark12-intergalatic' },
@@ -137,7 +138,7 @@ describe('ProjectConfiguration', () => {
         expect(dispatch).toHaveBeenCalledWith({ type: 'MODIFY_PROJECT', request: { type: 'UPDATE_PROJECT_NAME', index: 0, name: 'NewValue' } });
     });
 
-    it('update to the core selected in the dropdown', () => {
+    it('update to the core selected in the dropdown', async () => {
         const projects = [
             { value: newProjectFactory({ name: '', processorName: 'core1' }), hadInteraction: false },
             { value: newProjectFactory(), hadInteraction: false }
@@ -159,21 +160,24 @@ describe('ProjectConfiguration', () => {
             />);
         });
 
-        const targetElement = container.querySelectorAll('.dropdownCore');
-        const dropdownList = targetElement[0].querySelectorAll('vscode-option');
+        const targetElement = container.querySelector('.dropdownCore');
+        await React.act(async () => { // Open the dropdown
+            Simulate.click(targetElement!.querySelector('.compact-dropdown-trigger')!);
+        });
 
-        React.act(() => {
+        const dropdownList = targetElement!.querySelectorAll('li');
+        await React.act(async () => { // Click the first option in the dropdown
             Simulate.click(dropdownList[0]!);
         });
 
         expect(dispatch).toHaveBeenCalledWith({ type: 'MODIFY_PROJECT', request: { type: 'UPDATE_PROJECT_CORE', index: 0, processorName: 'the-core' } });
     });
 
-    it('update to the trustzone selected in the dropdown', () => {
+    it('update to the trustzone selected in the dropdown', async () => {
         const projects = [{ value: newProjectFactory({ processorName: 'coreA', trustzone: 'secure' }), hadInteraction: false }];
         const device = deviceHardwareOptionFactory({
             id: { name: 'some-device', vendor: 'some-vendor' },
-            processors: [ { name: 'coreA', core: 'Cortex-M', tz: Tz.TZ }]
+            processors: [{ name: 'coreA', core: 'Cortex-M', tz: Tz.TZ }]
         });
 
         React.act(() => {
@@ -184,10 +188,13 @@ describe('ProjectConfiguration', () => {
                 errors={[]}
             />);
         });
-        const targetElement = container.querySelectorAll('.dropdownTrustzone');
-        const dropdownList = targetElement[0].querySelectorAll('vscode-option');
+        const targetElement = container.querySelector('.dropdownTrustzone');
+        await React.act(async () => { // Open the dropdown
+            Simulate.click(targetElement!.querySelector('.compact-dropdown-trigger')!);
+        });
 
-        React.act(() => {
+        const dropdownList = targetElement!.querySelectorAll('li');
+        await React.act(async () => { // Click the second option in the dropdown
             Simulate.click(dropdownList[1]!);
         });
 
diff --git a/src/views/create-solutions/view/components/project-configuration.tsx b/src/views/create-solutions/view/components/project-configuration.tsx
index 743c92d2..b2a46d73 100644
--- a/src/views/create-solutions/view/components/project-configuration.tsx
+++ b/src/views/create-solutions/view/components/project-configuration.tsx
@@ -17,10 +17,12 @@
 import * as React from 'react';
 import './project-configuration.css';
 import { DeviceHardwareOption, NewProject, ProcessorInfo, Trustzone, validTrustZone } from '../../cmsis-solution-types';
-import { VSCodeButton, VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 import { CreateSolutionAction } from '../state/reducer';
 import { validationError } from './validation-message';
 import { FieldAndInteraction } from '../state/field-and-interaction';
+import { Button } from 'antd';
+import { CompactDropdown } from '../../../common/components/compact-dropdown';
+import { CmsisCodicon } from '../../../common/components/cmsis-codicon';
 
 type ProjectConfigurationProps = {
     device: DeviceHardwareOption;
@@ -40,18 +42,18 @@ export const ProjectConfiguration = (props: ProjectConfigurationProps) => {
                 <div>Core</div>
                 <div>TrustZone</div>
             </div>
-            {projects.map((project, index) => <ProjectConfigurationRow key={index} index={index} rowInfo={project.value} error={errors[index]} device={device} dispatch={dispatch} removeDisabled={projects.length === 1}/>)}
-            <VSCodeButton
+            {projects.map((project, index) => <ProjectConfigurationRow key={index} index={index} rowInfo={project.value} error={errors[index]} device={device} dispatch={dispatch} removeDisabled={projects.length === 1} />)}
+            <Button
                 className='add-project-config-row button'
                 title='Add a new project configuration row'
                 onClick={() => dispatch({ type: 'MODIFY_PROJECT', request: { type: 'ADD_PROJECT' } })}
             >
-            Add Project
-            </VSCodeButton>
+                Add Project
+            </Button>
             {showTrustZoneText && (
                 <div className='trustzone-info'>
                     <span className="codicon codicon-info"></span>
-                        Some TrustZone devices will be shipped with secure firmware by the manufacturer.<br />Please check your device&apos;s specification before adding your own secure project.
+                    Some TrustZone devices will be shipped with secure firmware by the manufacturer.<br />Please check your device&apos;s specification before adding your own secure project.
                 </div>
             )}
         </React.Fragment>
@@ -76,28 +78,7 @@ const ProjectConfigurationRow = (props: ProjectConfigurationRowProps) => {
         ? ['secure', 'non-secure', 'off']
         : ['off'];
 
-    const coreDropdownOptions = device.processors.length === 1
-        ? [<VSCodeOption key={processor?.core} value={processor?.core}>{processor?.core}</VSCodeOption>]
-        : device.processors.map(processor => (
-            <VSCodeOption
-                key={processor.name}
-                value={processor.name}
-                onClick={(e) => dispatch({
-                    type: 'MODIFY_PROJECT',
-                    request: { type: 'UPDATE_PROJECT_CORE', index: index, processorName: (e.target as HTMLInputElement).value },
-                })}
-            >{processor.name}</VSCodeOption>
-        ));
-
-    const trustZoneDropdownOptions = trustzoneOptions.map(option =>
-        <VSCodeOption
-            key={`${rowInfo.name}-${option}`}
-            value={option}
-            onClick={() => dispatch({
-                type: 'MODIFY_PROJECT',
-                request: { type: 'UPDATE_PROJECT_TRUSTZONE', index: index, trustzone: option as Trustzone },
-            })}
-        >{option}</VSCodeOption>);
+    const coreDropdownOptions = device.processors.map(p => p.name);
 
     return (
         <div className='project-config-row layout-config-info'>
@@ -112,27 +93,43 @@ const ProjectConfigurationRow = (props: ProjectConfigurationRowProps) => {
                 title='Provide a descriptive name for each project contained in your solution'
             >
             </input>
-            <VSCodeDropdown
-                className='dropdownCore'
+            <CompactDropdown
                 disabled={coreDropdownOptions.length > 1 ? false : true}
                 title={coreDropdownOptions.length > 1 ? 'The Arm core that the project will run on, as determined by the cores on the selected microcontroller (MCU) device' : 'No additional core options to select from the dropdown'}
-                value={device.processors.length === 1 ? processor?.core : rowInfo.processorName}
-            >{coreDropdownOptions}</VSCodeDropdown>
-            <VSCodeDropdown
-                className='dropdownTrustzone'
+                selected={coreDropdownOptions.length === 1 ? processor?.core || '' : rowInfo.processorName}
+                available={coreDropdownOptions}
+                style={{ width: 'auto' }}
+                className='dropdownCore'
+                onChange={(option) => {
+                    dispatch({
+                        type: 'MODIFY_PROJECT',
+                        request: { type: 'UPDATE_PROJECT_CORE', index: index, processorName: option },
+                    });
+                }}
+            />
+            <CompactDropdown
                 disabled={!(trustzoneOptions.length > 1)}
-                title={trustZoneDropdownOptions.length > 1 ? 'TrustZone reduces the potential for attack by isolating the critical security firmware, assets and private information from the rest of the application' : 'No additional trustzone options to select from the dropdown'}
-                value={rowInfo.trustzone}
-            >{trustZoneDropdownOptions}</VSCodeDropdown>
-            <VSCodeButton
-                appearance="icon"
+                title={trustzoneOptions.length > 1 ? 'TrustZone reduces the potential for attack by isolating the critical security firmware, assets and private information from the rest of the application' : 'No additional trustzone options to select from the dropdown'}
+                selected={rowInfo.trustzone}
+                available={trustzoneOptions.map(option => option)}
+                style={{ width: 'auto' }}
+                className='dropdownTrustzone'
+                onChange={(option) => {
+                    dispatch({
+                        type: 'MODIFY_PROJECT',
+                        request: { type: 'UPDATE_PROJECT_TRUSTZONE', index: index, trustzone: option as Trustzone },
+                    });
+                }}
+            />
+            <Button
+                icon={<CmsisCodicon name='trash' />}
+                type="default"
+                variant="text"
                 aria-label="Delete"
                 disabled={removeDisabled}
                 onClick={() => dispatch({ type: 'MODIFY_PROJECT', request: { type: 'REMOVE_PROJECT', index: index } })}
                 title='Remove the current project configuration row'
-            >
-                <span className="codicon codicon-trash"></span>
-            </VSCodeButton>
+            />
             {validationError(error)}
         </div>
     );
diff --git a/src/views/manage-layers/manage-layers-webview-view.ts b/src/views/manage-layers/manage-layers-webview-view.ts
index 94c23569..4bc66608 100644
--- a/src/views/manage-layers/manage-layers-webview-view.ts
+++ b/src/views/manage-layers/manage-layers-webview-view.ts
@@ -18,7 +18,7 @@ import '../webpack-globals';
 import { MessageHandlerImpl } from '../message-handler';
 import * as Messages from './messages';
 
-// Const function created by webview iframe script
+// Acquire the VS Code webview API via vscode-messenger-webview.
 const api = acquireVsCodeApi();
 
 const messageHandler = new MessageHandlerImpl<Messages.IncomingMessage, Messages.OutgoingMessage>(
diff --git a/src/views/manage-layers/view/components/create-layer.tsx b/src/views/manage-layers/view/components/create-layer.tsx
index 95ea1cbb..93c550ee 100644
--- a/src/views/manage-layers/view/components/create-layer.tsx
+++ b/src/views/manage-layers/view/components/create-layer.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { ConfigurationVariable, ManageLayersAction, TargetConfiguration, VariableSet } from '../state/reducer';
 import { ValidationErrors } from '../state/validation';
 import './manage-layers.css';
 import { validationError } from './validation-message';
+import { Button } from 'antd';
 
 
 export type CreateLayerProps = {
@@ -43,7 +43,7 @@ export function CreateLayer(props: CreateLayerProps): React.ReactElement {
 
 function createVariable(curVariable: ConfigurationVariable, errStr: string, idx: number, props: CreateLayerProps): React.ReactElement {
     const settings = curVariable.settings;
-    const variableName = curVariable.variableName ;
+    const variableName = curVariable.variableName;
     const variableValue = curVariable.variableValue;
     const description = curVariable.description;
     const copyTo = curVariable.copyTo;
@@ -112,14 +112,14 @@ function createEdit(name: string, value: string, idx: number, props: CreateLayer
 
 function createDefaultSelection(idx: number, props: CreateLayerProps, disabled: boolean): React.ReactElement {
 
-    return <VSCodeButton
-        title='Set default path'
-        disabled={disabled}
-        onClick={() => {
-            props.dispatch({ type: 'CURRENT_LAYER_PATH_COPYTO_DEFAULT', variableId: idx });
-        }}
-    >
-        Default
-    </VSCodeButton>
-    ;
+    return (
+        <Button
+            title='Set default path'
+            disabled={disabled}
+            onClick={() => {
+                props.dispatch({ type: 'CURRENT_LAYER_PATH_COPYTO_DEFAULT', variableId: idx });
+            }}>
+            Default
+        </Button>
+    );
 }
diff --git a/src/views/manage-layers/view/components/manage-layers.tsx b/src/views/manage-layers/view/components/manage-layers.tsx
index d411638d..12dfa516 100644
--- a/src/views/manage-layers/view/components/manage-layers.tsx
+++ b/src/views/manage-layers/view/components/manage-layers.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { LayerErrors } from '../../../common/components/layer-errors';
 import { RadioButton } from '../../../common/components/radio-button';
@@ -25,6 +24,8 @@ import { initialState, manageLayersReducer } from '../state/reducer';
 import { hasErrors, validate } from '../state/validation';
 import { CreateLayer } from './create-layer';
 import './manage-layers.css';
+import { Button, ConfigProvider, theme } from 'antd';
+import { useVSCodeTheme } from '../../../hooks/use-vscode-theme';
 
 export interface ManageLayersProps {
     /**
@@ -57,7 +58,7 @@ export const ManageLayers = ({ changeLayerActions, messageHandler }: ManageLayer
         if (currentLayer) {
             for (let idx = 0; idx < currentLayer.variables.length; idx++) {
                 const variable = currentLayer.variables[idx];
-                if (!variable.disabled)  {
+                if (!variable.disabled) {
                     messageHandler.push({ type: 'CHECK_LAYER_DOES_NOT_EXIST', layerFolder: variable.copyTo, variableId: idx });
                 }
             }
@@ -76,128 +77,136 @@ export const ManageLayers = ({ changeLayerActions, messageHandler }: ManageLayer
     const layerErrors = state.layerErrors;
     const showLayer = !!numOfLayers || loading || !!layerErrors.length;
     const activeTargetName = state.activeTargetType?.length ? state.activeTargetType : 'unknown';
+    const isDarkTheme = useVSCodeTheme();
 
     return (
         <React.StrictMode>
-            <div className='manage-layers-frame'>
-                <form id='manage-layers-form' autoComplete='off' onSubmit={e => { e.preventDefault(); }}>
-
-                    {showLayer &&
-                    <div>
-                        <div className='manage-layers-header'>
-                            <h2>{'Add Software Layer'}</h2>
-                            <a href="https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#software-layers"
-                                className="codicon codicon-link-external">
-                            </a>
-                        </div>
-                        <div className='section-description-text'>
-                            <p>{'Reference Applications are hardware agnostic and require '}
-                                <a href='https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#software-layers'>{'software layers'}</a>
-                                {' with API drivers to connect to specific target hardware, typically an evaluation board.'}</p>
-                            <p>{'The following software layers are available in packs to complete the Reference Application.'}
-                                <br/>{'Click OK to copy these software layers to a sub-directory of the solution.'}</p>
-                        </div>
-
-                        <div>
-                            <p>{`Configuration options for Active Target: ${activeTargetName}`}</p>
-                        </div>
-
-                        {!!numOfLayers && <div className='select-layer-button-strip'>
-                            <div className='select-layer-col1'>
-                                <div className='select-layer-option-text'>
-                                    {`OPTION ${currentLayerNumber + (numOfLayers ? 1 : 0)} OF ${numOfLayers}`}
+            <ConfigProvider
+                theme={{
+                    algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
+                }}>
+                <div className='manage-layers-frame'>
+                    <form id='manage-layers-form' autoComplete='off' onSubmit={e => { e.preventDefault(); }}>
+
+                        {showLayer &&
+                            <div>
+                                <div className='manage-layers-header'>
+                                    <h2>{'Add Software Layer'}</h2>
+                                    <a href="https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#software-layers"
+                                        className="codicon codicon-link-external">
+                                    </a>
                                 </div>
-                                <div className='select-layer-buttons'>
-                                    <VSCodeButton
-                                        title='Btn_Prev'
-                                        disabled={disabled}
-                                        onClick={() => dispatch({ type: 'PREV_LAYER' })} >
-                                        {'Prev'}
-                                    </VSCodeButton>
-                                    <VSCodeButton
-                                        title='Btn_Next'
-                                        disabled={disabled}
-                                        onClick={() => dispatch({ type: 'NEXT_LAYER' })} >
-                                        {'Next'}
-                                    </VSCodeButton>
+                                <div className='section-description-text'>
+                                    <p>{'Reference Applications are hardware agnostic and require '}
+                                        <a href='https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#software-layers'>{'software layers'}</a>
+                                        {' with API drivers to connect to specific target hardware, typically an evaluation board.'}</p>
+                                    <p>{'The following software layers are available in packs to complete the Reference Application.'}
+                                        <br />{'Click OK to copy these software layers to a sub-directory of the solution.'}</p>
                                 </div>
-                            </div>
-                            <div className='select-layer-col2'>
-                                <div className='select-layer-option-description'>
-                                    {'Copy to sub-directory'}
+
+                                <div>
+                                    <p>{`Configuration options for Active Target: ${activeTargetName}`}</p>
                                 </div>
-                            </div>
-                        </div>}
-                        {currentLayer && <CreateLayer
-                            layer={currentLayer}
-                            dispatch={dispatch}
-                            errors={validation}
-                        />}
-
-                        {!numOfLayers && loading &&
-                            <div className='noLayersAvailable'>
-                                {stateText}
+
+                                {!!numOfLayers && <div className='select-layer-button-strip'>
+                                    <div className='select-layer-col1'>
+                                        <div className='select-layer-option-text'>
+                                            {`OPTION ${currentLayerNumber + (numOfLayers ? 1 : 0)} OF ${numOfLayers}`}
+                                        </div>
+                                        <div className='select-layer-buttons'>
+                                            <Button
+                                                title='Btn_Prev'
+                                                disabled={disabled}
+                                                onClick={() => dispatch({ type: 'PREV_LAYER' })} >
+                                                {'Prev'}
+                                            </Button>
+                                            <Button
+                                                title='Btn_Next'
+                                                disabled={disabled}
+                                                onClick={() => dispatch({ type: 'NEXT_LAYER' })} >
+                                                {'Next'}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                    <div className='select-layer-col2'>
+                                        <div className='select-layer-option-description'>
+                                            {'Copy to sub-directory'}
+                                        </div>
+                                    </div>
+                                </div>}
+                                {currentLayer && <CreateLayer
+                                    layer={currentLayer}
+                                    dispatch={dispatch}
+                                    errors={validation}
+                                />}
+
+                                {!numOfLayers && loading &&
+                                    <div className='noLayersAvailable'>
+                                        {stateText}
+                                    </div>}
                             </div>}
-                    </div>}
-
-                    {!!layerErrors.length && <>
-                        <div className='manage-layers-layer-errors'>
-                            <LayerErrors
-                                layerErrors={layerErrors}
-                                id='layer-errors-display'
-                            ></LayerErrors>
-
-                        </div></>
-                    }
-
-                    {!!numOfCompilers && <>
-                        <div>
-                            <div className='manage-layers-section-end'></div>
-                            <div className='select-compilers-header'>
-                                <h2>{'Select Compiler'}</h2>
-                                <a href="https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#compiler-selection"
-                                    className="codicon codicon-link-external"></a>
-                            </div>
-                            <div className='section-description-text'>
-                                {'This is a toolchain agnostic project that requires compiler selection.'}
-                            </div>
 
-                            <div className='dropdown-select-label'>
-                                <label htmlFor='manage-layer-compiler-selector'>Compiler</label>
+                        {!!layerErrors.length && <>
+                            <div className='manage-layers-layer-errors'>
+                                <LayerErrors
+                                    layerErrors={layerErrors}
+                                    id='layer-errors-display'
+                                ></LayerErrors>
+
+                            </div></>
+                        }
+
+                        {!!numOfCompilers && <>
+                            <div>
+                                <div className='manage-layers-section-end'></div>
+                                <div className='select-compilers-header'>
+                                    <h2>{'Select Compiler'}</h2>
+                                    <a href="https://open-cmsis-pack.github.io/cmsis-toolbox/build-overview/#compiler-selection"
+                                        className="codicon codicon-link-external"></a>
+                                </div>
+                                <div className='section-description-text'>
+                                    {'This is a toolchain agnostic project that requires compiler selection.'}
+                                </div>
+
+                                <div className='dropdown-select-label'>
+                                    <label htmlFor='manage-layer-compiler-selector'>Compiler</label>
+                                </div>
+                                <RadioButton
+                                    id='manage-layer-compiler-selector'
+                                    values={state.availableCompilers}
+                                    selectedValue={state.selectedCompiler}
+                                    onChange={newValue => dispatch({ type: 'SET_COMPILER', compiler: newValue })}
+                                    disabled={false}
+                                />
+                            </div></>
+                        }
+
+                        {!numOfLayers && !numOfCompilers && !loading && <>
+                            <div className='nothing-to-configure'>
+                                <p>{'Nothing to configure'}</p>
+                            </div></>
+                        }
+
+                        <footer className='manage-layers-footer'>
+                            <div className='manage-layers-button-strip'>
+                                <Button title='Cancel' disabled={state.changeLayerProgress !== 'idle'}
+                                    variant='filled'
+                                    onClick={() => { messageHandler.push({ type: 'WEBVIEW_CLOSE' }); }} >
+                                    {'Cancel'}
+                                </Button>
+
+                                <Button
+                                    title='OK'
+                                    type='primary'
+                                    disabled={disabled && !numOfCompilers && hasErrors(validation)}
+                                    onClick={() => changeLayerActions.changeLayer(dispatch, state, messageHandler)} >
+                                    {'OK'}
+                                </Button>
                             </div>
-                            <RadioButton
-                                id='manage-layer-compiler-selector'
-                                values={state.availableCompilers}
-                                selectedValue={state.selectedCompiler}
-                                onChange={newValue => dispatch({ type: 'SET_COMPILER', compiler: newValue })}
-                                disabled={false}
-                            />
-                        </div></>
-                    }
-
-                    {!numOfLayers && !numOfCompilers && !loading && <>
-                        <div className='nothing-to-configure'>
-                            <p>{'Nothing to configure'}</p>
-                        </div></>
-                    }
-
-                    <footer className='manage-layers-footer'>
-                        <div className='manage-layers-button-strip'>
-                            <VSCodeButton title='Cancel' appearance='secondary' disabled={state.changeLayerProgress !== 'idle'}
-                                onClick={() => { messageHandler.push({ type: 'WEBVIEW_CLOSE' }); }} >
-                                {'Cancel'}
-                            </VSCodeButton>
-
-                            <VSCodeButton
-                                title='OK'
-                                disabled={disabled && !numOfCompilers && hasErrors(validation) }
-                                onClick={() => changeLayerActions.changeLayer(dispatch, state, messageHandler)} >
-                                {'OK'}
-                            </VSCodeButton>
-                        </div>
-                    </footer>
-                </form>
-            </div>
+                        </footer>
+                    </form>
+                </div>
+            </ConfigProvider>
         </React.StrictMode>
     );
 };
diff --git a/src/views/vscode-webview-api.d.ts b/src/views/vscode-webview-api.d.ts
new file mode 100644
index 00000000..88d352a3
--- /dev/null
+++ b/src/views/vscode-webview-api.d.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2026 Arm Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+type VsCodeWebviewApi = {
+    postMessage: (message: unknown) => void;
+    setState: (newState: unknown) => void;
+    getState: () => unknown;
+};
+
+declare function acquireVsCodeApi(): VsCodeWebviewApi;
diff --git a/webpack.config.js b/webpack.config.js
index 31bb5125..3e9d3dca 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -86,9 +86,6 @@ module.exports = (_env, argv) => [
         plugins: [
             new copy({
                 patterns: [
-                    {
-                        from: 'node_modules/@vscode/webview-ui-toolkit/dist/toolkit.min.js'
-                    },
                     {
                         from: 'node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css',
                         to: 'css'