diff --git a/custom-editor-sample/media/catScratch.css b/custom-editor-sample/media/catScratch.css
index f68f733c..69a2232c 100644
--- a/custom-editor-sample/media/catScratch.css
+++ b/custom-editor-sample/media/catScratch.css
@@ -49,10 +49,6 @@ body.vscode-dark {
 	align-items: center;
 }
 
-.add-button button {
-	background-color: var(--vscode-button-foreground);
-}
-
 .delete-button {
 	position: absolute;
 	top: 0;
@@ -66,4 +62,4 @@ body.vscode-dark {
 
 .note:hover .delete-button {
 	display: block;
-}
\ No newline at end of file
+}
diff --git a/custom-editor-sample/media/reset.css b/custom-editor-sample/media/reset.css
new file mode 100644
index 00000000..92d02910
--- /dev/null
+++ b/custom-editor-sample/media/reset.css
@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
diff --git a/custom-editor-sample/media/vscode.css b/custom-editor-sample/media/vscode.css
new file mode 100644
index 00000000..5d12b7e0
--- /dev/null
+++ b/custom-editor-sample/media/vscode.css
@@ -0,0 +1,91 @@
+:root {
+	--container-paddding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-paddding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-paddding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}
diff --git a/custom-editor-sample/src/catScratchEditor.ts b/custom-editor-sample/src/catScratchEditor.ts
index 66d700fd..3fc027e1 100644
--- a/custom-editor-sample/src/catScratchEditor.ts
+++ b/custom-editor-sample/src/catScratchEditor.ts
@@ -16,7 +16,7 @@ import { getNonce } from './util';
  */
 export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider {
 
-	public static register(context: vscode.ExtensionContext): vscode.Disposable { 
+	public static register(context: vscode.ExtensionContext): vscode.Disposable {
 		const provider = new CatScratchEditorProvider(context);
 		const providerRegistration = vscode.window.registerCustomEditorProvider(CatScratchEditorProvider.viewType, provider);
 		return providerRegistration;
@@ -96,7 +96,13 @@ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider
 		const scriptUri = webview.asWebviewUri(vscode.Uri.file(
 			path.join(this.context.extensionPath, 'media', 'catScratch.js')
 		));
-		const styleUri = webview.asWebviewUri(vscode.Uri.file(
+		const styleResetUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this.context.extensionPath, 'media', 'reset.css')
+		));
+		const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this.context.extensionPath, 'media', 'vscode.css')
+		));
+		const styleMainUri = webview.asWebviewUri(vscode.Uri.file(
 			path.join(this.context.extensionPath, 'media', 'catScratch.css')
 		));
 
@@ -117,7 +123,9 @@ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider
 
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-				<link href="${styleUri}" rel="stylesheet" />
+				<link href="${styleResetUri}" rel="stylesheet" />
+				<link href="${styleVSCodeUri}" rel="stylesheet" />
+				<link href="${styleMainUri}" rel="stylesheet" />
 
 				<title>Cat Scratch</title>
 			</head>
@@ -193,7 +201,7 @@ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider
 			document.uri,
 			new vscode.Range(0, 0, document.lineCount, 0),
 			JSON.stringify(json, null, 2));
-		
+
 		return vscode.workspace.applyEdit(edit);
 	}
 }
diff --git a/custom-editor-sample/src/pawDrawEditor.ts b/custom-editor-sample/src/pawDrawEditor.ts
index be4337db..9f8cf506 100644
--- a/custom-editor-sample/src/pawDrawEditor.ts
+++ b/custom-editor-sample/src/pawDrawEditor.ts
@@ -338,8 +338,13 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDra
 		// Local path to script and css for the webview
 		const scriptUri = webview.asWebviewUri(vscode.Uri.file(
 			path.join(this._context.extensionPath, 'media', 'pawDraw.js')
+		)); const styleResetUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this._context.extensionPath, 'media', 'reset.css')
 		));
-		const styleUri = webview.asWebviewUri(vscode.Uri.file(
+		const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.file(
+			path.join(this._context.extensionPath, 'media', 'vscode.css')
+		));
+		const styleMainUri = webview.asWebviewUri(vscode.Uri.file(
 			path.join(this._context.extensionPath, 'media', 'pawDraw.css')
 		));
 
@@ -360,7 +365,9 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDra
 
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-				<link href="${styleUri}" rel="stylesheet" />
+				<link href="${styleResetUri}" rel="stylesheet" />
+				<link href="${styleVSCodeUri}" rel="stylesheet" />
+				<link href="${styleMainUri}" rel="stylesheet" />
 
 				<title>Paw Draw</title>
 			</head>
diff --git a/webview-sample/media/reset.css b/webview-sample/media/reset.css
new file mode 100644
index 00000000..92d02910
--- /dev/null
+++ b/webview-sample/media/reset.css
@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
diff --git a/webview-sample/media/vscode.css b/webview-sample/media/vscode.css
new file mode 100644
index 00000000..5d12b7e0
--- /dev/null
+++ b/webview-sample/media/vscode.css
@@ -0,0 +1,91 @@
+:root {
+	--container-paddding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-paddding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-paddding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}
diff --git a/webview-sample/src/extension.ts b/webview-sample/src/extension.ts
index d4dfc1a6..81f6f1dc 100644
--- a/webview-sample/src/extension.ts
+++ b/webview-sample/src/extension.ts
@@ -167,6 +167,14 @@ class CatCodingPanel {
 		// And the uri we use to load this script in the webview
 		const scriptUri = webview.asWebviewUri(scriptPathOnDisk);
 
+		// Local path to css styles
+		const styleResetPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css');
+		const stylesPathMainPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css');
+
+		// Uri to load styles into webview
+		const stylesResetUri = webview.asWebviewUri(styleResetPath);
+		const stylesMainUri = webview.asWebviewUri(stylesPathMainPath);
+
 		// Use a nonce to only allow specific scripts to be run
 		const nonce = getNonce();
 
@@ -179,9 +187,13 @@ class CatCodingPanel {
 					Use a content security policy to only allow loading images from https or from our extension directory,
 					and only allow scripts that have a specific nonce.
 				-->
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
 
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+				<link href="${stylesResetUri}" rel="stylesheet">
+				<link href="${stylesMainUri}" rel="stylesheet">
+
 				<title>Cat Coding</title>
 			</head>
 			<body>
diff --git a/webview-view-sample/media/main.css b/webview-view-sample/media/main.css
index 26b15661..73de1146 100644
--- a/webview-view-sample/media/main.css
+++ b/webview-view-sample/media/main.css
@@ -31,12 +31,6 @@
 
 .add-color-button {
 	display: block;
-	color: var(--vscode-button-foreground);
-	background: var(--vscode-button-background);
 	border: none;
 	margin: 0 auto;
 }
-
-.add-color-button:hover {
-	background: var(--vscode-button-hoverBackground);
-}
\ No newline at end of file
diff --git a/webview-view-sample/media/reset.css b/webview-view-sample/media/reset.css
new file mode 100644
index 00000000..92d02910
--- /dev/null
+++ b/webview-view-sample/media/reset.css
@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
diff --git a/webview-view-sample/media/vscode.css b/webview-view-sample/media/vscode.css
new file mode 100644
index 00000000..5d12b7e0
--- /dev/null
+++ b/webview-view-sample/media/vscode.css
@@ -0,0 +1,91 @@
+:root {
+	--container-paddding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-paddding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-paddding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}
diff --git a/webview-view-sample/src/extension.ts b/webview-view-sample/src/extension.ts
index 13250c6e..ae933724 100644
--- a/webview-view-sample/src/extension.ts
+++ b/webview-view-sample/src/extension.ts
@@ -75,7 +75,9 @@ class ColorsViewProvider implements vscode.WebviewViewProvider {
 		const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js'));
 
 		// Do the same for the stylesheet.
-		const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
+		const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'));
+		const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css'));
+		const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
 
 		// Use a nonce to only allow a specific script to be run.
 		const nonce = getNonce();
@@ -93,7 +95,9 @@ class ColorsViewProvider implements vscode.WebviewViewProvider {
 
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-				<link href="${styleUri}" rel="stylesheet">
+				<link href="${styleResetUri}" rel="stylesheet">
+				<link href="${styleVSCodeUri}" rel="stylesheet">
+				<link href="${styleMainUri}" rel="stylesheet">
 				
 				<title>Cat Colors</title>
 			</head>