diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 2fe09b0..a4c45f1 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -6,17 +6,18 @@
 
 	type Props = ButtonProps & (NormalButton | SVGButton);
 
-	let { children, ...rest }: Props = $props();
+	let { children, class: class_name = undefined, ...rest }: Props = $props();
 </script>
 
 <!-- If a user provides `svg_only` prop, then the button should be an icon-only button -->
 {#if rest.svg_only}
 	<ButtonPrimitive.Root
 		class={cn(
-			button_variants({ variant: rest.variant, svg_size: rest.size, className: rest.class }),
+			button_variants({ variant: rest.variant, svg_size: rest.size }),
 			{
 				'rounded-full': rest.shape === 'circle'
-			}
+			},
+			class_name
 		)}
 		{...rest}
 	>
@@ -25,10 +26,14 @@
 {:else}
 	<ButtonPrimitive.Root
 		disabled={rest.loading || rest.disabled}
-		class={cn(button_variants({ variant: rest.variant, size: rest.size, className: rest.class }), {
-			'rounded-full': rest.shape === 'rounded',
-			'shadow-shadow-border-small': rest.shadow
-		})}
+		class={cn(
+			button_variants({ variant: rest.variant, size: rest.size }),
+			{
+				'rounded-full': rest.shape === 'rounded',
+				'shadow-shadow-border-small': rest.shadow
+			},
+			class_name
+		)}
 		{...rest}
 	>
 		{#if rest.loading}
diff --git a/src/lib/components/ui/feedback/feedback.svelte b/src/lib/components/ui/feedback/feedback.svelte
index 5bfb491..9c568b9 100644
--- a/src/lib/components/ui/feedback/feedback.svelte
+++ b/src/lib/components/ui/feedback/feedback.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Icons } from '$lib/assets/icons/index.js';
-	import { Button } from '$lib/components/ui/button';
+	import { Button, button_variants } from '$lib/components/ui/button';
 	import * as Popover from '$lib/components/ui/popover';
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { cn } from '$lib/utils';
@@ -26,7 +26,7 @@
 	let height = spring(48, { stiffness: 0.2, damping: 1.2 });
 	let radius = spring(30, { stiffness: 0.2, damping: 1.2 });
 	let current_reaction: number | undefined = $state(undefined);
-	let inline_feedback_el: HTMLTextAreaElement | undefined = $state(undefined);
+	let inline_feedback_el: HTMLTextAreaElement | null = $state(null);
 
 	function toggle_inline_feedback(i: number | undefined) {
 		if (current_reaction === i || i === undefined) {
@@ -56,51 +56,53 @@
 
 {#if variant === 'default'}
 	<Popover.Root>
-		<Popover.Trigger>
-			{#snippet child({ props })}
-				<Button {...props} variant="secondary" size="sm" class="text-gray-900">Feedback</Button>
-			{/snippet}
+		<Popover.Trigger
+			class={cn(button_variants({ size: 'sm', variant: 'secondary' }), 'text-gray-900')}
+		>
+			Feedback
 		</Popover.Trigger>
-		<Popover.Content sideOffset={8} class="w-[340px] rounded-xl p-0">
-			<form>
-				<main class="grid gap-3 p-2">
-					<Textarea placeholder="Your feedback..." bind:value={md} />
-					{#if md}
-						<div transition:slide class="grid gap-2 text-sm">
-							<h2 class="text-xs text-gray-900">Preview</h2>
-							<Markdown {md} />
+		<Popover.Portal>
+			<Popover.Content sideOffset={8} class="w-[340px] rounded-xl p-0">
+				<form>
+					<main class="grid gap-3 p-2">
+						<Textarea placeholder="Your feedback..." bind:value={md} />
+						{#if md}
+							<div transition:slide class="grid gap-2 text-sm">
+								<h2 class="text-xs text-gray-900">Preview</h2>
+								<Markdown {md} />
+							</div>
+						{/if}
+						<div class="flex w-full items-center justify-end gap-1 text-xs text-gray-900">
+							<Icons.Markdown aria-hidden class="h-[14px] w-[22px]" />
+							<span class="sr-only">Markdown</span>
+							supported.
 						</div>
-					{/if}
-					<div class="flex w-full items-center justify-end gap-1 text-xs text-gray-900">
-						<Icons.Markdown aria-hidden class="h-[14px] w-[22px]" />
-						<span class="sr-only">Markdown</span>
-						supported.
-					</div>
-				</main>
-				<footer
-					class="flex items-center justify-between rounded-b-xl border-t border-accents-2 bg-accents-1 p-3"
-				>
-					<span class="flex items-center gap-1">
-						{#each reactions as { emoji: Emoji, label }}
-							<Button
-								variant="tertiary"
-								svg_only
-								aria-label={label}
-								size="sm"
-								shape="circle"
-								class="group hover:bg-blue-300"
-							>
-								<Emoji
-									aria-hidden="true"
-									class="text-gray-900 group-hover:text-blue-900 [&>path]:group-hover:fill-blue-900"
-								/>
-							</Button>
-						{/each}
-					</span>
-					<Button type="submit" size="sm">Send</Button>
-				</footer>
-			</form>
-		</Popover.Content>
+					</main>
+					<footer
+						class="flex items-center justify-between rounded-b-xl border-t border-accents-2 bg-accents-1 p-3"
+					>
+						<span class="flex items-center gap-1">
+							{#each reactions as { emoji: Emoji, label }}
+								<Button
+									variant="tertiary"
+									svg_only
+									aria-label={label}
+									size="sm"
+									shape="circle"
+									class="group hover:bg-blue-300"
+								>
+									<Emoji
+										aria-hidden="true"
+										class="text-gray-900 group-hover:text-blue-900 [&>path]:group-hover:fill-blue-900"
+									/>
+								</Button>
+							{/each}
+						</span>
+						<Button type="submit" size="sm">Send</Button>
+					</footer>
+				</form>
+			</Popover.Content>
+		</Popover.Portal>
 	</Popover.Root>
 {:else if variant === 'inline'}
 	<!-- TODO: Toggle on click outside: https://github.com/svecosystem/runed/pull/46 -->
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index ca5f6e1..6b3201d 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -11,7 +11,14 @@
 </script>
 
 <PopoverPrimitive.Content
-	class={cn('z-50 w-72 rounded-md border bg-background-100 p-4 shadow-md outline-none', class_name)}
+	class={cn(
+		'z-50 w-72 rounded-md border bg-background-100 p-4 shadow-md outline-none',
+		// open animation
+		'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95  data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+		// close animation
+		'data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-95',
+		class_name
+	)}
 	{...rest}
 >
 	{@render children?.()}