diff --git a/packages/editor/src/lib/close-dark.svg b/packages/editor/src/lib/close-dark.svg
new file mode 100644
index 0000000000..46bd16cf54
--- /dev/null
+++ b/packages/editor/src/lib/close-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
diff --git a/packages/editor/src/lib/close-light.svg b/packages/editor/src/lib/close-light.svg
new file mode 100644
index 0000000000..a9d4a2c049
--- /dev/null
+++ b/packages/editor/src/lib/close-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index f8504a81ae..da56caaa70 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -124,7 +124,8 @@
 	}
 
 	.cm-panels {
-		background: var(--sk-bg-4);
+		font: var(--sk-font-ui-small);
+		background: var(--sk-bg-2);
 		color: var(--sk-fg-1);
 
 		&.cm-panels-top,
@@ -132,26 +133,74 @@
 			border-top: 1px solid var(--sk-border-medium);
 			border-bottom: 1px solid var(--sk-border-medium);
 		}
-	}
 
-	.cm-button {
-		background: var(--sk-bg-5);
-		border: 2px solid transparent;
-	}
+		.cm-panel {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+			padding: 0.5rem 4.2rem 0.5rem 0.5rem;
 
-	.cm-textfield {
-		background: var(--sk-bg-1);
-		color: var(--sk-fg-1);
-		border: 2px solid transparent;
-	}
+			.cm-button,
+			button[aria-label='close'] {
+				margin: 0;
+				font: inherit;
+				background: inherit;
+				height: 3.2rem;
+				padding: 0 0.8rem;
+				border-style: solid;
+				border-width: var(--sk-raised-width);
+				border-color: var(--sk-raised-color);
+				border-radius: var(--sk-border-radius);
 
-	.cm-search button:focus-visible,
-	.cm-search input:focus-visible {
-		border: 2px solid var(--flash);
-	}
+				&:hover {
+					border-color: var(--sk-raised-hover-color);
+				}
+
+				&:active {
+					border-color: var(--sk-raised-active-color);
+					border-width: var(--sk-raised-active-width);
+				}
+			}
+
+			button[aria-label='close'] {
+				aspect-ratio: 1;
+				top: 0.5rem;
+				right: 0.5rem;
+				color: transparent;
+				background: url(./close-light.svg) 50% 50% no-repeat;
+				background-size: 1.8rem;
 
-	.cm-search input[type='checkbox']:focus-visible {
-		outline: 2px solid var(--flash);
+				:root.dark & {
+					background-image: url(./close-dark.svg);
+				}
+			}
+
+			.cm-textfield {
+				font: inherit;
+				background: inherit;
+				color: var(--sk-fg-1);
+				border: 1px solid var(--sk-border-medium);
+				border-radius: var(--sk-border-radius);
+				margin: 0;
+			}
+
+			.cm-search button:focus-visible,
+			.cm-search input:focus-visible {
+				border: 2px solid var(--flash);
+			}
+
+			.cm-search input[type='checkbox']:focus-visible {
+				outline: 2px solid var(--flash);
+			}
+
+			label {
+				font: inherit;
+				display: inline-flex;
+				gap: 0.5rem;
+				align-items: center;
+				margin: 0 0 0 0.5rem;
+			}
+		}
 	}
 
 	.cm-searchMatch.cm-searchMatch-selected {