diff --git a/src/lib/components/common/AccessButton.svelte b/src/lib/components/common/AccessButton.svelte
index 0381323615..2377f60c7c 100644
--- a/src/lib/components/common/AccessButton.svelte
+++ b/src/lib/components/common/AccessButton.svelte
@@ -14,7 +14,7 @@
 
 <button
 	type="button"
-	class="focus-ring flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
+	class="focus-ring flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-inset ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
 	{disabled}
 	on:click
 >
diff --git a/src/lib/components/common/LanguageModeSelect.svelte b/src/lib/components/common/LanguageModeSelect.svelte
index 1c91bd5286..82a899d8fd 100644
--- a/src/lib/components/common/LanguageModeSelect.svelte
+++ b/src/lib/components/common/LanguageModeSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { getContext } from 'svelte';
@@ -20,20 +20,22 @@
 
 <Tooltip
 	content={$i18n.t('Editing language')}
-	className="relative {className || 'w-full sm:w-fit'}"
+	className="relative inline-flex max-w-full shrink-0 rounded-lg bg-gray-50 text-gray-900 transition ring-1 ring-inset ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className ||
+		'w-fit'}"
 >
-	<GlobeAlt
-		className="pointer-events-none absolute start-2.5 top-1/2 z-10 size-3.5 -translate-y-1/2 text-gray-400 dark:text-gray-500"
-	/>
-	<SettingsSelect
+	<GlobeAlt className="pointer-events-none absolute start-2 top-1/2 size-3 -translate-y-1/2" />
+	<select
 		bind:value
-		className="w-full"
-		selectClassName="min-w-[8.5rem] !ps-8"
-		ariaLabel={$i18n.t('Editing language')}
+		class="focus-ring min-w-0 max-w-full cursor-pointer appearance-none truncate rounded-lg bg-transparent py-1 ps-6 pe-6 text-xs font-normal outline-hidden ![background-image:none] [field-sizing:content]"
+		aria-label={$i18n.t('Editing language')}
 	>
 		{#if includeDefault}<option value="">{$i18n.t('Default')}</option>{/if}
 		{#each options as language}
 			<option value={language.code}>{language.title}{statusFor(language.code)}</option>
 		{/each}
-	</SettingsSelect>
+	</select>
+	<ChevronDown
+		className="pointer-events-none absolute end-2 top-1/2 size-3 -translate-y-1/2"
+		strokeWidth="2"
+	/>
 </Tooltip>