diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index 34fe35e5a..dca4fae44 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -2,11 +2,11 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const settingsList = tv({
-		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 *:py-2",
+		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default *:py-4 *:first:pt-0 *:last:pb-0",
 		variants: {
 			padding: {
-				regular: "px-4",
-				small: "px-3"
+				regular: "p-4",
+				small: "p-3"
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/settings/SettingsPanel.svelte b/web/src/lib/components/settings/SettingsPanel.svelte
index 66985bf26..5afe725ee 100644
--- a/web/src/lib/components/settings/SettingsPanel.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.svelte
@@ -1,19 +1,24 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import { twMerge } from "tailwind-merge";
 	import SettingsNav, { type SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
 
 	interface Props {
 		items: SettingsNavItem[];
 		active: string;
 		label?: string;
+		class?: string;
 		children: Snippet;
 	}
 
-	let { items, active, label, children }: Props = $props();
+	let { items, active, label, class: className, children }: Props = $props();
 </script>
 
 <div
-	class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
+	class={twMerge(
+		"flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0",
+		className
+	)}
 >
 	<SettingsNav {items} {active} {label} />