diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0100d8dd16..c898c9f4d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,8 +185,8 @@ importers:
         specifier: ^1.20.5
         version: 1.20.5(svelte@packages+svelte)(vite@4.3.9)
       '@sveltejs/site-kit':
-        specifier: 6.0.0-next.17
-        version: 6.0.0-next.17(@sveltejs/kit@1.20.5)(svelte@packages+svelte)
+        specifier: 6.0.0-next.18
+        version: 6.0.0-next.18(@sveltejs/kit@1.20.5)(svelte@packages+svelte)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.4.2
         version: 2.4.2(svelte@packages+svelte)(vite@4.3.9)
@@ -1800,8 +1800,8 @@ packages:
       svelte-local-storage-store: 0.4.0(svelte@packages+svelte)
     dev: false
 
-  /@sveltejs/site-kit@6.0.0-next.17(@sveltejs/kit@1.20.5)(svelte@packages+svelte):
-    resolution: {integrity: sha512-+2AlkIwKtwrfcsvoxSXkRZ5EFI1Rz/8ZZVMi6qmLhPgX0CYm+yyyCslaASmAB+Ztq3JYVwNx+4eQ6Mafeitjiw==}
+  /@sveltejs/site-kit@6.0.0-next.18(@sveltejs/kit@1.20.5)(svelte@packages+svelte):
+    resolution: {integrity: sha512-8uWjP61UAkCqWf9UuQQWSCpyPNk4cqnGaQozjIr3sGbQnauTQDiS4K8AxqyBSyphEIrhxd68iYMEFQDQVAHjcg==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
       svelte: ^3.54.0 || ^4.0.0-next.1 || ^4.0.0
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 3c10ade3f6..6b5cdb6039 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -30,7 +30,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^3.0.1",
 		"@sveltejs/kit": "^1.20.5",
-		"@sveltejs/site-kit": "6.0.0-next.17",
+		"@sveltejs/site-kit": "6.0.0-next.18",
 		"@sveltejs/vite-plugin-svelte": "^2.4.2",
 		"@types/marked": "^5.0.0",
 		"@types/node": "^20.3.1",
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
index d9598518fb..9f53f2ee89 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
@@ -191,7 +191,7 @@ export default app;`
 <div class="app-controls">
 	<input bind:value={name} on:focus={(e) => e.target.select()} use:enter={(e) => e.target.blur()} />
 
-	<div style="text-align: right; margin-right:.4rem">
+	<div class="buttons">
 		<button class="icon" on:click={() => (zen_mode = !zen_mode)} title="fullscreen editor">
 			{#if zen_mode}
 				<Icon name="close" />
@@ -251,9 +251,16 @@ export default app;`
 		flex: 0;
 	}
 
+	.buttons {
+		text-align: right;
+		margin-right: 0.4rem;
+		display: flex;
+		align-items: center;
+		gap: 0.2em;
+	}
+
 	.icon {
-		position: relative;
-		top: -0.1rem;
+		transform: translateY(0.1rem);
 		display: inline-block;
 		padding: 0.2em;
 		opacity: 0.7;
@@ -261,13 +268,11 @@ export default app;`
 		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		color: var(--sk-text-1);
-		/* width: 1.6em;
-		height: 1.6em; */
 		line-height: 1;
-		margin: 0 0 0 0.2em;
 	}
 
-	.icon:hover {
+	.icon:hover,
+	.icon:focus-visible {
 		opacity: 1;
 	}
 	.icon:disabled {
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
index 74d9ab509a..5449191a30 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
-
+	import { Icon } from '@sveltejs/site-kit/components';
+	import { click_outside, focus_outside } from '@sveltejs/site-kit/actions';
 	const { logout } = getContext('app');
 
 	export let user;
@@ -11,9 +12,21 @@
 	$: name = user.github_name || user.github_login;
 </script>
 
-<div class="user" on:mouseenter={() => (showMenu = true)} on:mouseleave={() => (showMenu = false)}>
-	<span>{name}</span>
-	<img alt="{name} avatar" src={user.github_avatar_url} />
+<div
+	class="user"
+	use:focus_outside={() => (showMenu = false)}
+	use:click_outside={() => (showMenu = false)}
+>
+	<button
+		on:click={() => (showMenu = !showMenu)}
+		aria-expanded={showMenu}
+		class="trigger"
+		aria-label={name}
+	>
+		<span class="name">{name}</span>
+		<img alt="" src={user.github_avatar_url} />
+		<Icon name={showMenu ? 'chevron-up' : 'chevron-down'} />
+	</button>
 
 	{#if showMenu}
 		<div class="menu">
@@ -27,43 +40,44 @@
 	.user {
 		position: relative;
 		display: inline-block;
-		padding: 0em 1.2rem 0 1.6rem;
-		height: 0.8em;
-		line-height: 1;
+		padding: 0em 0 0 0.3rem;
 		z-index: 99;
 	}
 
-	.user::after {
-		/* embiggen hit zone, so log out menu doesn't disappear */
-		position: absolute;
-		content: '';
-		width: 100%;
-		height: 3.2rem;
-		left: 0;
-		top: 0;
+	.trigger {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		outline-offset: 2px;
+		transform: translateY(0.1rem);
+		--opacity: 0.7;
 	}
 
-	span {
-		/* position: relative; padding: 0 2em 0 0; */
+	.trigger:hover,
+	.trigger:focus-visible,
+	.trigger[aria-expanded='true'] {
+		--opacity: 1;
+	}
+
+	.name {
 		line-height: 1;
 		display: none;
 		font-family: var(--sk-font);
 		font-size: 1.6rem;
-		opacity: 0.7;
 	}
 
-	.user:hover span {
-		opacity: 1;
+	.name,
+	.trigger :global(.icon) {
+		display: none;
+		opacity: var(--opacity);
 	}
 
 	img {
-		position: absolute;
-		top: -0.05em;
-		right: 0;
 		width: 2.1rem;
 		height: 2.1rem;
 		border: 1px solid rgba(255, 255, 255, 0.3);
 		border-radius: 0.2rem;
+		transform: translateY(-0.1rem);
 	}
 
 	.menu {
@@ -95,14 +109,16 @@
 	}
 
 	.menu button:hover,
-	.menu a:hover {
+	.menu button:focus-visible,
+	.menu a:hover,
+	.menu a:focus-visible {
 		opacity: 1;
 		color: inherit;
 	}
 
 	@media (min-width: 600px) {
 		.user {
-			padding: 0em 3.2rem 0 1.6rem;
+			padding: 0em 0 0 1.6rem;
 		}
 
 		img {
@@ -110,7 +126,8 @@
 			height: 2.4rem;
 		}
 
-		span {
+		.name,
+		.trigger :global(.icon) {
 			display: inline-block;
 		}
 	}