diff --git a/src/edit.tsx b/src/edit.tsx
index 0c06d7f..086802e 100644
--- a/src/edit.tsx
+++ b/src/edit.tsx
@@ -9,7 +9,6 @@ import {
 	PanelRow,
 	ExternalLink,
 	Button,
-	Icon,
 } from '@wordpress/components';
 import { edit, external } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
@@ -75,19 +74,29 @@ const Edit: React.FC<BlockEditProps<IBlockAttributes>> = ( { attributes, setAttr
 					/>
 				</div>
 				:
-				// No form has been selected yet, so render the placeholder
+				// No form has been selected yet, so render the placeholder.
 				<div>
 					<Placeholder
 						icon={ CogIcon }
 						label="Cognito Forms"
 						instructions="Choose an existing form to embed or create a new one."
 					>
-						<div>
-							<Button isPrimary onClick={ () => setSelectDialogOpen( true ) }>
+						<div style={ { display: 'flex' } }>
+							<Button
+								variant="primary"
+								onClick={ () => setSelectDialogOpen( true ) }
+							>
 								Select Form
 							</Button>
-							<Button isTertiary href={ `${ baseUrl }/forms/new` } target="_blank">
-								New Form&thinsp;<Icon icon={ external } size={ 16 }></Icon>
+							<Button
+								href={ `${ baseUrl }/forms/new` }
+								target="_blank"
+								icon={ external }
+								iconPosition="right"
+								iconSize={ 16 }
+								variant="secondary"
+							>
+								New Form
 							</Button>
 						</div>
 					</Placeholder>