diff --git a/how-to/use-window-options/client/src/app.ts b/how-to/use-window-options/client/src/app.ts
index 9c63b81c..53f87c5e 100644
--- a/how-to/use-window-options/client/src/app.ts
+++ b/how-to/use-window-options/client/src/app.ts
@@ -2,12 +2,12 @@ import type OpenFin from "@openfin/core";
 
 const defaultCommonOptions: OpenFin.WindowCreationOptions = {
 	name: "test-child",
-	url: "./preview.html",
+	url: window.location.href.replace("app.html", "preview.html"),
 	icon: undefined,
 	autoShow: true,
 	alwaysOnTop: false,
 	opacity: 1,
-	contextMenu: true,
+	contextMenuOptions: { enabled: true },
 	showTaskbarIcon: true,
 	resizable: true,
 	minimizable: true,
@@ -106,11 +106,6 @@ async function initDom(): Promise<void> {
 	const btnPreview = document.querySelector("#btnPreview");
 	if (btnPreview) {
 		btnPreview.addEventListener("click", async () => {
-			if (previewWindow) {
-				await previewWindow.removeAllListeners();
-				await previewWindow.close(true);
-				previewWindow = undefined;
-			}
 			const previewOptions: OpenFin.WindowCreationOptions = {
 				...finalizeWindowOptions(),
 				saveWindowState: false
diff --git a/how-to/use-window-options/public/html/app.html b/how-to/use-window-options/public/html/app.html
index 5fcefe98..197060a2 100644
--- a/how-to/use-window-options/public/html/app.html
+++ b/how-to/use-window-options/public/html/app.html
@@ -5,7 +5,7 @@
 		<title>Window Options Builder</title>
 		<meta name="description" content="" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="/common/style/app.css" />
+		<link rel="stylesheet" href="../common/style/app.css" />
 		<script src="../js/app.bundle.js"></script>
 	</head>
 
@@ -16,7 +16,7 @@ <h1>Window Options Builder</h1>
 				<h1 class="tag">Demonstrate the customization options available for opening windows.</h1>
 			</div>
 			<div class="row middle gap10">
-				<image src="/common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
+				<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
 			</div>
 		</header>
 		<main class="row fill gap20">
@@ -76,14 +76,14 @@ <h2>Common</h2>
 								<fieldset class="fill">
 									<label for="optionMinWidth">Min Width</label>
 									<div class="row gap20 middle">
-										<input type="range" id="optionMinWidth" min="600" max="1000" step="10" />
+										<input type="range" id="optionMinWidth" min="100" max="1000" step="10" />
 										<span id="optionMinWidthValue"></span>
 									</div>
 								</fieldset>
 								<fieldset class="fill">
 									<label for="optionMaxWidth">Max Width</label>
 									<div class="row gap20 middle">
-										<input type="range" id="optionMaxWidth" min="600" max="2000" step="10" />
+										<input type="range" id="optionMaxWidth" min="100" max="2000" step="10" />
 										<span id="optionMaxWidthValue"></span>
 									</div>
 								</fieldset>
@@ -92,14 +92,14 @@ <h2>Common</h2>
 								<fieldset class="fill">
 									<label for="optionMinHeight">Min Height</label>
 									<div class="row gap20 middle">
-										<input type="range" id="optionMinHeight" min="600" max="1000" step="10" />
+										<input type="range" id="optionMinHeight" min="100" max="1000" step="10" />
 										<span id="optionMinHeightValue"></span>
 									</div>
 								</fieldset>
 								<fieldset class="fill">
 									<label for="optionMaxHeight">Max Height</label>
 									<div class="row gap20 middle">
-										<input type="range" id="optionMaxHeight" min="600" max="2000" step="10" />
+										<input type="range" id="optionMaxHeight" min="100" max="2000" step="10" />
 										<span id="optionMaxHeightValue"></span>
 									</div>
 								</fieldset>
@@ -234,7 +234,7 @@ <h2>Preview</h2>
 			<div class="row spread">
 				<div class="row gap10">
 					<button id="btnPreview">Preview</button>
-					<button id="btnClosePreview">Close Preview</button>
+					<button id="btnClosePreview">Close Last Preview</button>
 					<button id="btnCopy">Copy to Clipboard</button>
 					<button id="btnReset">Reset to Defaults</button>
 				</div>
diff --git a/how-to/use-window-options/public/html/preview.html b/how-to/use-window-options/public/html/preview.html
index 678ee1a1..33ca4046 100644
--- a/how-to/use-window-options/public/html/preview.html
+++ b/how-to/use-window-options/public/html/preview.html
@@ -5,113 +5,99 @@
 		<title>Window Options Preview</title>
 		<meta name="description" content="" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="/common/style/app.css" />
+		<link rel="stylesheet" href="../common/style/app.css" />
 	</head>
 
 	<body class="col fill gap20">
 		<header class="row spread middle">
 			<div class="col">
 				<h1>Window Options Preview</h1>
-				<h1 class="tag">Demonstrate the customization options available for opening windows.</h1>
+				<h1 class="tag">Demonstrate customized window.</h1>
 			</div>
 			<div class="row middle gap10">
-				<image src="/common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
+				<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
 			</div>
 		</header>
-		<main class="row fill gap20">
-			<div class="row fill spread gap20">This is the preview window.</div>
-		</main>
-		<footer>
-			<div class="column spread">
-				<button id="btnGrowVertical">+ Height</button>
-				<button id="btnShrinkVertical">- Height</button>
-				<button id="btnGrowHorizontal">+ Width</button>
-				<button id="btnShrinkHorizontal">- Width</button>
+		<main class="col gap10 scroll-horizontal">
+			<h4 id="windowName"></h4>
+			<fieldset class="row gap20 wrap" id="sizeContainer">
+				<select id="size">
+					<option selected="" value="+width">Increase Width</option>
+					<option value="-width">Decrease Width</option>
+					<option value="+height">Increase Height</option>
+					<option value="-height">Decrease Height</option>
+				</select>
+				<button id="btnApply">Apply</button>
+			</fieldset>
+			<fieldset class="row wrap">
 				<button id="btnCapture">Capture</button>
 				<button id="btnClosePreview">Close</button>
-			</div>
-		</footer>
+			</fieldset>
+		</main>
 		<script>
-			const btnGrowVertical = document.querySelector('#btnGrowVertical');
-			btnGrowVertical.addEventListener('click', async () => {
-				let options = await fin.me.getOptions();
-				let updated = false;
-				if (options.maxHeight !== -1) {
-					options.maxHeight += 100;
-					updated = true;
-				}
-				if (options.minHeight !== -1) {
-					options.minHeight += 100;
-					updated = true;
-				}
-				if (updated) {
-					await fin.me.updateOptions(options);
-				}
-				await fin.me.resizeBy(0, 100);
-			});
+			const windowName = document.querySelector('#windowName');
 			if (fin.me.isView) {
-				btnGrowVertical.style.display = 'none';
+				windowName.innerText = 'View Name: ' + fin.me.identity.name;
+				const sizeContainer = document.querySelector('#sizeContainer');
+				sizeContainer.style.display = 'none';
+			} else {
+				windowName.innerText = 'Window Name: ' + fin.me.identity.name;
 			}
-			const btnShrinkVertical = document.querySelector('#btnShrinkVertical');
-			btnShrinkVertical.addEventListener('click', async () => {
+			const size = document.querySelector('#size');
+			const btnApply = document.querySelector('#btnApply');
+			btnApply.addEventListener('click', async () => {
+				const action = size.value;
 				let options = await fin.me.getOptions();
 				let updated = false;
-				if (options.maxHeight !== -1) {
-					options.maxHeight -= 100;
-					updated = true;
-				}
-				if (options.minHeight !== -1) {
-					options.minHeight -= 100;
-					updated = true;
+				let height = 0;
+				let width = 0;
+				if (action === '+width') {
+					if (options.maxWidth !== -1) {
+						options.maxWidth += 100;
+						updated = true;
+					}
+					if (options.minWidth !== -1) {
+						options.minWidth += 100;
+						updated = true;
+					}
+					width = 100;
+				} else if (action === '-width') {
+					if (options.maxWidth !== -1) {
+						options.maxWidth -= 100;
+						updated = true;
+					}
+					if (options.minWidth !== -1) {
+						options.minWidth -= 100;
+						updated = true;
+					}
+					width = -100;
+				} else if (action === '+height') {
+					if (options.maxHeight !== -1) {
+						options.maxHeight += 100;
+						updated = true;
+					}
+					if (options.minHeight !== -1) {
+						options.minHeight += 100;
+						updated = true;
+					}
+					height = 100;
+				} else if (action === '-height') {
+					if (options.maxHeight !== -1) {
+						options.maxHeight -= 100;
+						updated = true;
+					}
+					if (options.minHeight !== -1) {
+						options.minHeight -= 100;
+						updated = true;
+					}
+					height = -100;
 				}
 				if (updated) {
 					await fin.me.updateOptions(options);
 				}
-				await fin.me.resizeBy(0, -100);
+				await fin.me.resizeBy(width, height);
 			});
-			if (fin.me.isView) {
-				btnShrinkVertical.style.display = 'none';
-			}
-			const btnGrowHorizontal = document.querySelector('#btnGrowHorizontal');
-			btnGrowHorizontal.addEventListener('click', async () => {
-				let options = await fin.me.getOptions();
-				let updated = false;
-				if (options.maxWidth !== -1) {
-					options.maxWidth += 100;
-					updated = true;
-				}
-				if (options.minWidth !== -1) {
-					options.minWidth += 100;
-					updated = true;
-				}
-				if (updated) {
-					await fin.me.updateOptions(options);
-				}
-				await fin.me.resizeBy(100, 0);
-			});
-			if (fin.me.isView) {
-				btnGrowHorizontal.style.display = 'none';
-			}
-			const btnShrinkHorizontal = document.querySelector('#btnShrinkHorizontal');
-			btnShrinkHorizontal.addEventListener('click', async () => {
-				let options = await fin.me.getOptions();
-				let updated = false;
-				if (options.maxWidth !== -1) {
-					options.maxWidth -= 100;
-					updated = true;
-				}
-				if (options.minWidth !== -1) {
-					options.minWidth -= 100;
-					updated = true;
-				}
-				if (updated) {
-					await fin.me.updateOptions(options);
-				}
-				await fin.me.resizeBy(-100, 0);
-			});
-			if (fin.me.isView) {
-				btnShrinkHorizontal.style.display = 'none';
-			}
+
 			const btnClosePreview = document.querySelector('#btnClosePreview');
 			btnClosePreview.addEventListener('click', async () => (await fin.Window.getCurrent()).close());
 			if (fin.me.isView) {
@@ -120,10 +106,9 @@ <h1 class="tag">Demonstrate the customization options available for opening wind
 			const btnCapture = document.querySelector('#btnCapture');
 			btnCapture.addEventListener('click', async () => {
 				console.log('SnapShot clicked');
-				const wnd = await fin.Window.getCurrent();
 
 				// Snapshot of a full visible window
-				let base64 = await wnd.getSnapshot();
+				let base64 = await fin.me.capturePage();
 
 				const link = document.createElement('a');
 				link.setAttribute('href', 'data:image/png;base64,' + base64);