diff --git a/packages/playground/components/src/icons.tsx b/packages/playground/components/src/icons.tsx
index 3117abc1fc..379c01da65 100644
--- a/packages/playground/components/src/icons.tsx
+++ b/packages/playground/components/src/icons.tsx
@@ -168,7 +168,7 @@ export function SiteManagerIcon({
 				<rect
 					x="3"
 					y="3"
-					width="6"
+					width="7"
 					height="18"
 					rx="2"
 					ry="2"
diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
index 33c3ccd39a..df7b3514ab 100644
--- a/packages/playground/website/src/components/browser-chrome/index.tsx
+++ b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -57,7 +57,16 @@ export default function BrowserChrome({
 					})}
 					aria-label="Playground toolbar"
 				>
-					<div className={css.windowControls}>
+					<div className={addressBarClass}>
+						<AddressBar
+							url={url}
+							onUpdate={(newUrl) =>
+								clientInfo?.client.goTo(newUrl)
+							}
+						/>
+					</div>
+
+					<div className={css.toolbarButtons}>
 						<Button
 							variant="browser-chrome"
 							aria-label={
@@ -80,18 +89,7 @@ export default function BrowserChrome({
 								sidebarActive={siteManagerIsOpen}
 							/>
 						</Button>
-					</div>
 
-					<div className={addressBarClass}>
-						<AddressBar
-							url={url}
-							onUpdate={(newUrl) =>
-								clientInfo?.client.goTo(newUrl)
-							}
-						/>
-					</div>
-
-					<div className={css.toolbarButtons}>
 						{isMobileUi ? (
 							<>
 								<Button
@@ -100,7 +98,6 @@ export default function BrowserChrome({
 									onClick={onToggle}
 									aria-expanded={isModalOpen}
 									style={{
-										padding: '0 10px',
 										fill: '#FFF',
 										alignItems: 'center',
 										display: 'flex',
@@ -132,7 +129,6 @@ export default function BrowserChrome({
 										onClick={onToggle}
 										aria-expanded={isOpen}
 										style={{
-											padding: '0 10px',
 											fill: '#FFF',
 											alignItems: 'center',
 											display: 'flex',
diff --git a/packages/playground/website/src/components/browser-chrome/style.module.css b/packages/playground/website/src/components/browser-chrome/style.module.css
index cc850a6932..ac84a67f58 100644
--- a/packages/playground/website/src/components/browser-chrome/style.module.css
+++ b/packages/playground/website/src/components/browser-chrome/style.module.css
@@ -59,17 +59,13 @@ body.is-embedded .fake-window-wrapper {
 	padding: 0 4px;
 }
 
-.window-controls {
-	display: flex;
-}
-
 .toolbar-buttons:empty {
 	display: none;
 }
 
 .toolbar-buttons {
 	display: flex;
-	gap: 10px;
+	gap: 0;
 	color: #fff;
 }
 
diff --git a/packages/playground/website/src/components/button/style.module.css b/packages/playground/website/src/components/button/style.module.css
index c360c169bf..6d642b542a 100644
--- a/packages/playground/website/src/components/button/style.module.css
+++ b/packages/playground/website/src/components/button/style.module.css
@@ -23,6 +23,7 @@
 .button.button.button.is-browser-chrome {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	min-height: 40px;
 	min-width: 40px;
 	background: transparent;