diff --git a/webview-ui/src/components/common/SettingsButton.tsx b/webview-ui/src/components/common/SettingsButton.tsx
new file mode 100644
index 0000000000..2f63240c71
--- /dev/null
+++ b/webview-ui/src/components/common/SettingsButton.tsx
@@ -0,0 +1,36 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import styled from "styled-components"
+
+const StyledButton = styled(VSCodeButton)`
+	--settings-button-bg: var(--vscode-button-secondaryBackground);
+	--settings-button-hover: var(--vscode-button-secondaryHoverBackground);
+	--settings-button-active: var(--vscode-button-secondaryBackground);
+
+	background-color: var(--settings-button-bg) !important;
+	border-color: var(--settings-button-bg) !important;
+	width: 100% !important;
+
+	&:hover {
+		background-color: var(--settings-button-hover) !important;
+		border-color: var(--settings-button-hover) !important;
+	}
+
+	&:active {
+		background-color: var(--settings-button-active) !important;
+		border-color: var(--settings-button-active) !important;
+	}
+
+	i.codicon {
+		margin-right: 6px;
+		flex-shrink: 0;
+		font-size: 16px !important;
+	}
+`
+
+interface SettingsButtonProps extends React.ComponentProps<typeof VSCodeButton> {}
+
+const SettingsButton: React.FC<SettingsButtonProps> = (props) => {
+	return <StyledButton appearance="secondary" {...props} />
+}
+
+export default SettingsButton
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 7a74be34f3..6c1daf60e0 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -4,6 +4,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
+import SettingsButton from "../common/SettingsButton"
 
 const IS_DEV = false // FIXME: use flags when packaging
 
@@ -137,16 +138,14 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						display: "flex",
 						justifyContent: "center",
 					}}>
-					<VSCodeButton
-						appearance="secondary"
+					<SettingsButton
 						onClick={() => vscode.postMessage({ type: "openExtensionSettings" })}
 						style={{
 							margin: "0 0 16px 0",
-							minWidth: "fit-content",
-							whiteSpace: "nowrap",
 						}}>
+						<i className="codicon codicon-settings-gear" />
 						Advanced Settings
-					</VSCodeButton>
+					</SettingsButton>
 				</div>
 				<div
 					style={{