diff --git a/website/src/lib/components/Help.svelte b/website/src/lib/components/Help.svelte
index 9767b329e..15a83d341 100644
--- a/website/src/lib/components/Help.svelte
+++ b/website/src/lib/components/Help.svelte
@@ -1,16 +1,23 @@
 <script lang="ts">
     import { CircleQuestionMark } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
+    import type { Snippet } from 'svelte';
 
-    export let link: string | undefined = undefined;
+    let {
+        link,
+        class: className = '',
+        children,
+    }: {
+        link: string;
+        class?: string;
+        children: Snippet;
+    } = $props();
 </script>
 
-<div
-    class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
->
+<div class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {className}">
     <CircleQuestionMark size="16" class="w-4 mr-2 shrink-0 grow-0" />
     <div>
-        <slot />
+        {@render children()}
         {#if link}
             <a href={link} target="_blank" class="text-sm text-link hover:underline">
                 {i18n._('menu.more')}