diff --git a/playground/src/index.js b/playground/src/index.js
index b74e30091c1739..ea5b149fedde1c 100644
--- a/playground/src/index.js
+++ b/playground/src/index.js
@@ -12,6 +12,7 @@ import {
 	ObserveTyping,
 } from '@wordpress/block-editor';
 import {
+	Button,
 	Popover,
 	SlotFillProvider,
 	DropZoneProvider,
@@ -40,6 +41,9 @@ function App() {
 		<Fragment>
 			<div className="playground__header">
 				<h1 className="playground__logo">Gutenberg Playground</h1>
+				<Button isLarge href="design-system/components" target="_blank">
+					Design System Components
+				</Button>
 			</div>
 			<div className="playground__body">
 				<SlotFillProvider>
@@ -67,7 +71,4 @@ function App() {
 }
 
 registerCoreBlocks();
-render(
-	<App />,
-	document.querySelector( '#app' )
-);
+render( <App />, document.querySelector( '#app' ) );
diff --git a/playground/src/style.scss b/playground/src/style.scss
index 63a330e00a2d6f..43d7a0460ab0e7 100644
--- a/playground/src/style.scss
+++ b/playground/src/style.scss
@@ -10,8 +10,11 @@
 
 
 .playground__header {
-	padding: 20px;
+	align-items: center;
 	border-bottom: 1px solid #ddd;
+	display: flex;
+	justify-content: space-between;
+	padding: 20px;
 }
 
 .playground__logo {